Cum să creați un plugin Sketch care va conecta simbolurile din biblioteca dvs. cu orice documentație externă

Aproape un ghid pasionat despre cum să creați un plugin Sketch folosind skpm

(Sergey Nikishkin) (28 mai 2020)

Ca exemplu, voi lua Google Material Kit de proiectare pentru schiță și conectați simbolurile la descrierea lor pe material.io/components . Desigur, nu voi explica fiecare linie de cod, dar voi evidenția câteva părți importante din punctul meu de vedere. Interesant? Atunci să începem.

Dacă nu sunteți familiarizați cu dezvoltarea pluginurilor Sketch, dar doriți să aflați mai multe, vă pot sfătui acest set de 7 articole ale lui Marc Mariano ca ghid de plimbare pentru începători:

( Ghidul pentru începători pentru scrierea pluginurilor de schițe )

Mediu

Ca instrument de construcție pentru pluginul nostru, voi folosi skpm . Acesta este un utilitar care vă permite să creați, să depanați și să publicați cu ușurință pluginuri Sketch. De asemenea, înainte de a începe, ar trebui să aveți următoarele lucruri instalate pe computerul dvs.:

Instalarea skpm și, de asemenea, ca o creație a bazei pentru plugin este foarte simplu și necesită două comenzi în total. Creați un folder nou, deschideți Terminal.app în acest folder și introduceți una câte una aceste comenzi:

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

Prima comandă instalează pachetul npm în sine și toate dependențele necesare. Al doilea creează încă un folder care conține un set de active pentru noul dvs. plugin. Principalele noastre obiective acolo sunt: ​​

  • my-plugin.sketchplugin – pluginul în sine care ar trebui instalat
  • src – folderul cu codul sursă al pluginului
Cum arată rezultatul în codul VS
Cum arată rezultatul în codul VS

Permiteți-mi să vă spun ceva despre manifest.json din folderul src. Acesta este un fișier JSON care conține metadate despre plugin, comenzile și resursele acestuia. Acesta enumeră numele oricăror comenzi definite de plugin și îi spune Sketch cum să numească elementele de meniu corespunzătoare și în ce meniuri să le introducă.

De asemenea, să redenumim cu curaj my-command.js la index.js și elimină tot codul din interior. Puțin mai târziu vom scrie ceva mult mai interesant decât codul care arată „ Este în viață! Message ”mesaj.

Schema

Înainte de a începe să scriem cod, să înțelegem cum va fi pluginul muncă. În primul rând, vom avea nevoie de trei fișiere:

  • config.json – conține linkuri care vor fi conectate la simboluri
  • index.js —conține toate funcțiile principale
  • manifest.json – conține metadate plugin

Schema de lucru
Schema de lucru

Deci. Când selectăm simbolul de pe tablă și executăm pluginul, acesta apelează o funcție din index.js care merge la config.json, verifică disponibilitatea linkul pentru simbolul selectat, returnează răspunsul în index.js și, dacă toate verificările sunt trecute, deschide resursa cu documentație. După cum puteți vedea, logica este foarte simplă.

Funcții

Primul lucru pe care ar trebui să-l facem este să importăm config.json în index.js utilizând codul de mai jos:

Prima linie din index.js

Și acum să trecem la funcții.

openLink ()

În această funcție, folosim câteva clase și metode din Swift API care ne va ajuta să deschidem linkuri externe direct din Sketch.

  • NSURL

  • URLWithString

  • NSWorkspace

  • SharedWorkspace

funcția openLink ()
  • const {link} = config.names[name] – primește un șir cu URL din config.json
  • const url = NSURL.URLWithString(link) – transformă șirul cu URL în obiect cu URL
  • NSWorkspace.sharedWorkspace().openURL(url) —opens obiect cu URL în browserul dvs. implicit

parse ()

În această funcție, potrivim obiectul selectat de pe tablă cu un obiect din config.json. Dacă sunt potrivite, funcția returnează cheia cu linkul URL.

funcția parse ()

În opinia mea, cea mai interesantă parte aici este o regex pe linia 13:

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

Prin utilizarea această regex putem găsi și potrivi obiecte la diferite niveluri de cuibărire. În cazul nostru, obiectul este numele simbolului sau numele grupului în care este plasat simbolul. Să aruncăm o privire asupra structurii de cuibărire pentru componenta Chips și variantele sale în Material Design Kit for Sketch:

Structura imbricare pentru componenta Chips în kitul de proiectare a materialelor pentru schiță
Structura imbricării pentru componenta chipsuri în kitul de proiectare a materialelor pentru schiță

Și cum acest imbricare în panoul de straturi poate fi asortat cu config.json:

Cum funcționează potrivirea
Cum funcționează potrivirea

Pentru regexul nostru, nu contează, la ce nivel doriți să conectați simbolul cu documentație. Regula principală este că numele ar trebui să fie aceleași pe ambele părți. De asemenea, nu contează ce notație folosiți pentru gruparea simbolurilor, dacă este cu cifre, litere, subliniere și așa mai departe. nici cuibarea nu contează.

isValidType ()

Când selectați ect ceva pe planșă și rulează pluginul, această funcție verifică tipul obiectului selectat. Și dacă obiectul are unul dintre tipurile listate, returnează răspunsul cu parametrul true.

isValidType ( ) function

Doar un mic bonus cu posibilitatea de a conecta nu numai simboluri, ci grupuri și forme folosind Sketch Headers.

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

onRun()

Permiteți-mi să-l citez pe Mathieu Dutour, care este creatorul skpm-ului.

De asemenea, skpm vă așteaptă să export default function (context) {} în loc să scrieți o funcție de nivel superior onRun.

funcția onRun ()

config.json

Deci. Este timpul să pregătiți un fișier JSON care va conține linkuri către documentație externă. Am selectat trei componente din kitul de proiectare a materialelor pe care le vom testa: "Banner", "Input chip" și "Card".

config.json cu date reale

As puteți vedea, structura fișierului JSON este foarte simplă. Nu uitați că numele obiectului din config.json ar trebui să fie același cu o parte a numelui obiectului din Sketch așa cum am menționat mai sus.

Apropo, putem utiliza nu numai http:// sau https:// ci și zpl:// linkuri care ne permit să deschidem orice secțiune Zeplin.app.

manifest.json

După cum am menționat mai sus, acesta este un fișier JSON care conține metadate despre plugin, comenzile sale și resurse. Structura finală a manifest.json pentru pluginul nostru arată astfel:

Structura finală a manifestului. json

Mai mulți parametri, de asemenea ca o descriere detaliată a fiecărui parametru pe care îl folosim în acest fișier, pe care îl puteți găsi în documentația oficială.

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

Rez Lt

Este timpul să vă întoarceți la Terminal.app și să creați un plugin:

npm run build

Gata. Pluginul este gata pentru a fi instalat și testat. Să facem asta în sfârșit și să vedem rezultatul.

Funcționează!
Funcționează!

În concluzie

Să fim sinceri. Acesta este mai mult un experiment decât un produs gata făcut și, desigur, nu este o implementare ideală. Scopul nostru principal a fost să nu petrecem mult timp pe dezvoltare și acesta este motivul pentru care în unele locuri am folosit acele soluții care erau mai simple în loc de mai corecte. Dar am folosit acest plugin în munca de zi cu zi pentru mai mult de un an.Și aș vrea să spun că este genial pentru noii designeri care au ajuns recent în echipă și care au început să se familiarizeze cu acele componente pe care le folosiți.

De asemenea, aș dori să mulțumesc foarte mult către Kirill Savelov și Dmitry Kozlov pentru răbdare și ajutor.

Mai multe povești despre Sistemul de proiectare și Instrumente

  • (Sistem de proiectare, partea 2. Icoane, fonturi SVG, Gulp)
  • (Sistem de proiectare, partea 3. Instrumente realizate pe cont propriu pe care le folosim în activitatea de zi cu zi)
  • (ffmpeg + ImageMagick. Conversia videoclipurilor în GIF folosind Terminal.app în macOS)
  • (Cum să optimizați imaginile utilizând macOS Terminal + TinyPNG CLI)

Linkuri utile

Urmăriți Acronis Design pe