Hvordan lage et Sketch-plugin som vil koble symboler fra biblioteket ditt med ekstern dokumentasjon

Nesten en gjennomgangsveiledning for hvordan du bygger et Sketch-plugin ved å bruke skpm

(Sergey Nikishkin) (28. mai 2020)

Som et eksempel tar jeg Google-materiale Design Kit for Sketch og koble symboler til beskrivelsen på material.io/components . Selvfølgelig vil jeg ikke forklare hver linje med kode, men jeg vil fremheve noen deler som er viktige fra mitt synspunkt. Interessant? Så la oss begynne.

Hvis du ikke er kjent med Sketch plugins-utviklingen, men vil lære mer, kan jeg gi råd om dette settet med 7 artikler av Marc Mariano som en guide for nybegynnere:

( Nybegynnerveiledningen for å skrive skisseprogrammer )

Miljø

Som et bygningsverktøy for pluginet vårt, vil jeg bruke skpm . Dette er et verktøy som lar deg enkelt bygge, feilsøke og publisere Sketch-plugins. Før vi begynner, bør du også ha følgende ting installert på din mac:

Installasjon av skpm og også som en opprettelse av basen for plugin er veldig enkel og krever to kommandoer totalt. Bare lag en ny mappe, åpne Terminal.app i denne mappen, og skriv inn en og en av disse kommandoene:

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

Den første kommandoen installerer selve npm-pakken og alle nødvendige avhengigheter. Den andre oppretter en mappe til som inneholder et sett med ressurser for det nye pluginet ditt. Våre hovedmål der er:

  • my-plugin.sketchplugin – selve pluginet som skal installeres
  • src – mappen med kildekoden til pluginet
Slik ser resultatet ut i VS-koden
Hvordan resultatet ser ut i VS-koden

La meg fortelle litt om manifest.json fra src -mappen. Dette er en JSON-fil som inneholder metadata om programtillegget, dets kommandoer og ressurser. Den viser navnene på eventuelle kommandoer som er definert av pluginet og forteller Sketch hva du skal kalle de tilsvarende menyelementene og hvilke menyer du vil sette dem i.

La oss også modig endre navn på my-command.js til index.js og fjerner all kode inni. Litt senere vil vi skrive noe mye mer interessant enn kode som viser “ Den lever! 🙌 ”melding.

Skjemaet

Før vi begynner å skrive kode, la oss forstå hvordan pluginet vil arbeid. Først og fremst trenger vi tre filer:

  • config.json – inneholder lenker som skal kobles til symbolene
  • index.js – inneholder alle hovedfunksjoner
  • manifest.json – inneholder metadata for plugin
Arbeidsskjemaet
Arbeidsskjemaet

Så. Når vi velger symbolet på tegnebrettet og kjører pluginet, kaller det en funksjon fra index.js som går til config.json, sjekker tilgjengeligheten av lenken for det valgte symbolet, returnerer svaret til index.js, og hvis alle kontroller er bestått, åpner ressursen med dokumentasjon. Som du ser er logikken veldig enkel.

Funksjoner

Det første vi bør gjøre er å importere config.json til index.js ved å bruke koden nedenfor:

Den aller første linjen i index.js

Og la oss nå gå videre til funksjonene.

openLink ()

I denne funksjonen bruker vi noen få klasser og metoder fra Swift API som hjelper oss med å åpne eksterne lenker direkte fra Sketch.

  • NSURL

  • URLWithString

  • NSWorkspace

  • SharedWorkspace

openLink () -funksjon
  • const {link} = config.names[name] – får en streng med URL fra config.json
  • const url = NSURL.URLWithString(link) – transformerer streng med URL til objekt med URL
  • NSWorkspace.sharedWorkspace().openURL(url) – åpner objekt med URL i standard nettleser

analyse ()

I denne funksjonen samsvarer vi det valgte objektet på tegnebrettet med et objekt i config.json. Hvis de samsvarer, returnerer funksjonen nøkkelen med URL-lenken.

parse () -funksjon

Etter min mening er den mest interessante delen her en regex på linje 13:

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

Ved å bruke denne regexen kan vi finne og matche objekter på forskjellige hekkingsnivåer. I vårt tilfelle er objektet navnet på symbolet eller navnet på gruppen der symbolet er plassert. La oss se på hekkestrukturen for Chips-komponenten og dens varianter i Material Design Kit for Sketch:

Struktur av nesting for Chips-komponent i Material Design Kit for Sketch
Struktur for nesting for Chips-komponent i Material Design Kit for Sketch

Og hvordan denne hekkingen i lagpanelet kan matches med config.json:

Hvordan samsvar fungerer
Hvordan matching fungerer

For regexen vår, spiller det ingen rolle, på hvilket nivå du vil koble symbolet med dokumentasjon. Hovedregelen er at navnene skal være de samme på begge sider. Det spiller ingen rolle hvilken notasjon du bruker for gruppering av symboler, enten det er med sifre, bokstaver, understreking og så videre. hekker betyr ikke noe heller.

isValidType ()

Når du velger ect noe på tegnebrettet og kjører pluginet, denne funksjonen sjekker typen valgt objekt. Og hvis objektet har en av de oppførte typene, returnerer svaret med true -parameteren.

isValidType ( ) -funksjon

Bare en liten bonus med muligheten til å koble ikke bare symboler, men grupper og former ved hjelp av skisseoverskrifter.

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

onRun()

La meg sitere Mathieu Dutour, som er skaper av skpm.

skpm forventer også at du export default function (context) {} i stedet for å skrive et toppnivå onRun -funksjon.

onRun () -funksjon

config.json

Så. Det er på tide å utarbeide en JSON-fil som inneholder lenker til ekstern dokumentasjon. Jeg har valgt tre komponenter fra Material Design Kit som vi skal teste: "Banner", "Input chip" og "Card".

config.json med reelle data

Som Du kan se, strukturen til JSON-filen er veldig enkel. Bare ikke glem at navnet på objektet i config.json skal være det samme som en del av navnet på objektet i Sketch som jeg nevnte ovenfor.

Forresten kan vi ikke bare bruke http:// eller https:// men også zpl:// koblinger som tillater oss å åpne Zeplin.app-seksjoner.

manifest.json

Som jeg nevnte ovenfor, er dette en JSON-fil som inneholder metadata om programtillegget, dets kommandoer og Den endelige strukturen til manifest.json for pluginet vårt ser slik ut:

Den endelige strukturen til manifestet. json

Flere parametere, også som en detaljert beskrivelse av hver parameter vi bruker i denne filen, kan du finne i den offisielle dokumentasjonen.

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

Resu lt

Det er på tide å gå tilbake til Terminal.app og bygge et plugin:

npm run build

Det er det. Plugin er klar til å installeres og testes. La oss endelig gjøre det og se på resultatet.

Det fungerer!
Det fungerer!

Avslutningsvis

La oss være ærlige. Dette er mer et eksperiment enn et ferdigprodukt, og selvfølgelig er det ikke en ideell implementering. Vårt hovedmål var å ikke bruke mye tid på utvikling, og dette er grunnen til at vi noen steder har brukt de løsningene som var enklere i stedet for mer korrekte. Men vi har brukt denne pluginen i det daglige arbeidet i mer enn et år.Og jeg vil si at det er strålende for nye designere som nylig har kommet i teamet og nettopp har begynt å bli kjent med komponentene du bruker.

Jeg vil også si en stor takk til Kirill Savelov og Dmitry Kozlov for deres tålmodighet og hjelp.

Flere historier om Design System and Tools

  • (Design System, del 2. Ikoner, SVG-skrifter, Gulp)
  • (Design System, del 3. Selvlagde verktøy som vi bruker i det daglige arbeidet)
  • (ffmpeg + ImageMagick. Konverter video til GIF ved hjelp av Terminal.app i macOS)
  • (Hvordan optimalisere bilder ved hjelp av macOS Terminal + TinyPNG CLI)

Nyttige lenker

Følg Acronis Design på