Comment créer un plugin Sketch qui connectera les symboles de votre bibliothèque à nimporte quelle documentation externe

Presque un guide pas à pas sur la façon de créer un plugin Sketch en utilisant skpm

(Sergey Nikishkin) (28 mai 2020)

À titre dexemple, je prendrai le matériel Google Kit de conception pour lesquisse et connectez les symboles à leur description sur material.io/components . Bien sûr, je nexpliquerai pas chaque ligne de code, mais je soulignerai certaines parties qui sont importantes de mon point de vue. Intéressant? Alors commençons.

Si vous nêtes pas familier avec le développement de plugins Sketch mais que vous voulez en savoir plus, je peux vous conseiller cet ensemble de 7 articles de Marc Mariano comme guide pour les débutants:

( Guide du débutant pour lécriture de plugins desquisse )

Environnement

En tant quoutil de création de notre plugin, jutiliserai skpm . Il sagit dun utilitaire qui vous permet de créer, déboguer et publier facilement des plugins Sketch. De plus, avant de commencer, vous devez installer les éléments suivants sur votre mac:

Installation du skpm et aussi en tant que création de la base pour le plugin est très simple et nécessite deux commandes au total. Créez simplement un nouveau dossier, ouvrez Terminal.app dans ce dossier et entrez une par une ces commandes:

  • npm install -g skpm
  • skpm create your-plugin-name

La première commande installe le paquet npm lui-même et toutes les dépendances requises. Le second crée un autre dossier contenant un ensemble dactifs pour votre nouveau plugin. Nos principales cibles sont:

  • my-plugin.sketchplugin – le plugin lui-même qui devrait être installé
  • src – le dossier avec le code source du plugin
À quoi ressemble le résultat dans le code VS
À quoi ressemble le résultat dans le code VS

Permettez-moi de parler un peu de manifest.json du dossier src. Il sagit dun fichier JSON qui contient des métadonnées sur le plugin, ses commandes et ses ressources. Il répertorie les noms de toutes les commandes définies par le plugin et indique à Sketch comment appeler les éléments de menu correspondants et dans quels menus les mettre.

Aussi, renommeons courageusement my-command.js à index.js et supprime tout le code à lintérieur. Un peu plus tard, nous écrirons quelque chose de beaucoup plus intéressant que le code qui montre «  Il est vivant! 🙌 « message.

Le schéma

Avant de commencer à écrire du code, voyons comment le plugin va travail. Tout dabord, nous aurons besoin de trois fichiers:

  • config.json – contient des liens qui seront connectés aux symboles
  • index.js – contient toutes les fonctions principales
  • manifest.json – contient les métadonnées du plugin

Le schéma de travail
Le schéma de travail

Alors. Lorsque nous sélectionnons le symbole sur le plan de travail et exécutons le plugin, il appelle une fonction de index.js qui va à config.json, vérifie la disponibilité de le lien pour le symbole sélectionné, renvoie la réponse dans index.js et, si toutes les vérifications sont réussies, ouvre la ressource avec la documentation. Comme vous pouvez le voir, la logique est très simple.

Fonctions

La première chose à faire est dimporter config.json vers index.js en utilisant le code ci-dessous:

La toute première ligne dans index.js

Et maintenant passons aux fonctions.

openLink ()

Dans cette fonction, nous utilisons quelques classes et méthodes de lAPI Swift qui nous aidera à ouvrir des liens externes directement à partir de Sketch.

  • NSURL

  • URLWithString

  • NSWorkspace

  • SharedWorkspace

fonction openLink ()
  • const {link} = config.names[name] – obtient une chaîne avec lURL de la configuration.json
  • const url = NSURL.URLWithString(link) – transforme la chaîne avec lURL en objet avec lURL
  • NSWorkspace.sharedWorkspace().openURL(url) – souvre objet avec lURL dans votre navigateur par défaut

parse ()

Dans cette fonction, nous faisons correspondre lobjet sélectionné sur le plan de travail avec un objet en config.json. Sils correspondent, la fonction renvoie la clé avec le lien URL.

parse () function

À mon avis, la partie la plus intéressante ici est une expression régulière à la ligne 13:

new RegExp(".*(" + set.join("|") + ")(\/|$), "i")

En utilisant cette regex, nous pouvons trouver et associer des objets à différents niveaux dimbrication. Dans notre cas, lobjet est le nom du symbole ou le nom du groupe où se trouve le symbole. Examinons la structure dimbrication du composant Chips et ses variantes dans Material Design Kit for Sketch:

Structure de imbrication du composant Chips dans Material Design Kit for Sketch
Structure dimbrication du composant Chips dans Material Design Kit for Sketch

Et comment cette imbrication dans le panneau des calques peut être mise en correspondance avec config.json:

Fonctionnement de la correspondance
Fonctionnement de la correspondance

Pour notre regex, peu importe le niveau auquel vous souhaitez connecter le symbole avec documentation. La règle principale est que les noms doivent être les mêmes des deux côtés. De plus, peu importe la notation que vous utilisez pour le regroupement de symboles, que ce soit avec des chiffres, des lettres, des traits de soulignement, etc. limbrication na pas dimportance non plus.

isValidType ()

Lorsque vous sélectionnez ect quelque chose sur le plan de travail et exécute le plugin, cette fonction vérifie le type dobjet sélectionné. Et si lobjet a lun des types répertoriés, renvoie la réponse avec le paramètre true.

isValidType ( ) function

Juste un petit bonus avec la possibilité de connecter non seulement des symboles mais des groupes et des formes en utilisant les en-têtes Sketch.

https://developer.sketch.com/plugins/internal-api

onRun()

Permettez-moi de citer Mathieu Dutour, qui est le créateur du skpm.

skpm attend également de vous export default function (context) {} au lieu décrire une fonction onRun de premier niveau.

fonction onRun ()

config.json

Donc. Il est temps de préparer un fichier JSON qui contiendra des liens vers de la documentation externe. Jai sélectionné trois composants du kit de conception de matériaux que nous allons tester: "Banner", "Input chip" et "Card".

config.json avec des données réelles

As vous pouvez le voir, la structure du fichier JSON est très simple. Noubliez pas que le nom de lobjet dans le config.json doit être le même quune partie du nom de lobjet dans Sketch comme je lai mentionné ci-dessus.

Au fait, nous pouvons utiliser non seulement http:// ou https:// mais aussi zpl:// liens qui nous permettent douvrir toutes les sections Zeplin.app.

manifest.json

Comme je lai mentionné ci-dessus, il sagit dun fichier JSON qui contient des métadonnées sur le plugin, ses commandes et La structure finale de manifest.json pour notre plugin ressemble à ceci:

La structure finale du manifeste. json

Plus de paramètres, ainsi quune description détaillée de chaque paramètre que nous utilisons dans ce fichier, vous pouvez trouver dans la documentation officielle.

https://developer.sketch.com/plugins/plugin-manifest

Le resu

Il est temps de retourner dans Terminal.app et de créer un plugin:

npm run build

Cest tout. Le plugin est prêt à être installé et testé. Faisons enfin cela et regardons le résultat.

Ça marche!
Ça marche!

En conclusion

Soyons honnêtes. Il s’agit davantage d’une expérience que d’un produit prêt à lemploi et, bien entendu, ce n’est pas une mise en œuvre idéale. Notre objectif principal était de ne pas consacrer beaucoup de temps au développement et cest la raison pour laquelle, à certains endroits, nous avons utilisé des solutions plus simples plutôt que plus correctes. Mais nous utilisons ce plugin dans le travail quotidien depuis plus dun an.Et jaimerais dire que cest génial pour les nouveaux designers qui ont récemment rejoint léquipe et qui viennent de commencer à se familiariser avec les composants que vous utilisez.

Aussi, je voudrais vous dire un grand merci à Kirill Savelov et Dmitry Kozlov pour leur patience et leur aide.

Plus dhistoires sur le système de conception et les outils

  • (Design System, partie 2. Icônes, polices SVG, Gulp)
  • (Design System, partie 3. Outils que nous utilisons au quotidien dans le travail)
  • (ffmpeg + ImageMagick. Convertissez une vidéo en GIF à laide de Terminal.app sous macOS)
  • (Comment optimiser les images à laide de macOS Terminal + TinyPNG CLI)

Liens utiles

Suivez Acronis Design sur