Sådan oprettes et Sketch-plugin der forbinder symboler fra dit bibliotek med ekstern dokumentation

Næsten en gennemgangsvejledning til, hvordan man bygger et Sketch-plugin ved hjælp af skpm

(Sergey Nikishkin) (28. maj 2020)

Som et eksempel vil jeg tage Google-materiale Design Kit til skitse og forbinde symboler til deres beskrivelse på material.io/components . Selvfølgelig vil jeg ikke forklare hver linje kode, men jeg vil fremhæve nogle dele, der er vigtige fra mit synspunkt. Interessant? Så lad os starte.

Hvis du ikke er fortrolig med udviklingen af ​​Sketch-plugins, men vil lære mere, kan jeg rådgive dette sæt med 7 artikler af Marc Mariano som en guide gennem begyndere:

p> ( Begyndervejledningen til skrivning af skitse-plugins )

Miljø

Som et byggeværktøj til vores plugin bruger jeg skpm . Dette er et hjælpeprogram, der giver dig mulighed for nemt at opbygge, debugge og udgive Sketch-plugins. Inden vi starter, skal du også have følgende ting installeret på din mac:

Installation af skpm og også som oprettelse af basen til pluginet er meget enkel og kræver to kommandoer i alt. Opret bare en ny mappe, åbn Terminal.app i denne mappe, og indtast en efter en disse kommandoer:

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

Den første kommando installerer selve npm-pakken og alle nødvendige afhængigheder. Den anden opretter endnu en mappe, der indeholder et sæt aktiver til dit nye plugin. Vores vigtigste mål der er:

  • my-plugin.sketchplugin – selve pluginet, der skal installeres
  • src – mappen med kildekoden til pluginet
Sådan ser resultatet ud i VS-koden
Sådan ser resultatet ud i VS-koden

Lad mig fortælle lidt om manifest.json fra mappen src. Dette er en JSON-fil, der indeholder metadata om pluginet, dets kommandoer og ressourcer. Den viser navnene på alle kommandoer, der er defineret af pluginet, og fortæller Skitse, hvad de tilsvarende menupunkter skal kaldes, og hvilke menuer de skal placeres i.

Lad os også modigt omdøbe my-command.js til index.js og fjerner al kode indeni. Lidt senere skriver vi noget meget mere interessant end kode, der viser “ Den lever! 🙌 ”besked.

Ordningen

Før vi begynder at skrive kode, lad os forstå, hvordan pluginet vil arbejde. Først og fremmest har vi brug for tre filer:

  • config.json – indeholder links, der vil være forbundet med symbolerne
  • index.js – indeholder alle hovedfunktioner
  • manifest.json – indeholder plugin-metadata
Arbejdsplanen
Arbejdsplanen

Så. Når vi vælger symbolet på tegnebrættet og kører pluginet, kalder det en funktion fra index.js, der går til config.json, kontrollerer tilgængeligheden af linket til det valgte symbol, returnerer svaret til index.js, og hvis alle kontroller er bestået, åbner ressourcen med dokumentation. Som du kan se, er logikken meget enkel.

Funktioner

Den første ting, vi skal gøre, er at importere config.json til index.js ved hjælp af nedenstående kode:

Den allerførste linje i index.js

Og lad os nu gå videre til funktionerne.

openLink ()

I denne funktion bruger vi et par klasser og metoder fra Swift API, der hjælper os med at åbne eksterne links direkte fra Sketch.

  • NSURL

  • URLWithString

  • NSWorkspace

  • SharedWorkspace

openLink () -funktion
  • const {link} = config.names[name] – får en streng med URL fra config.json
  • const url = NSURL.URLWithString(link) – omdanner streng med URL til objekt med URL
  • NSWorkspace.sharedWorkspace().openURL(url) – åbner objekt med URL i din standardbrowser

parse ()

I denne funktion matcher vi det valgte objekt på tegnebrættet med et objekt i config.json. Hvis de matches, returnerer funktionen nøglen med URL-linket.

parse () -funktion

Efter min mening er den mest interessante del her en regex på linje 13:

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

Ved at bruge denne regex kan vi finde og matche objekter på forskellige indlejringsniveauer. I vores tilfælde er objektet navnet på symbolet eller navnet på den gruppe, hvor symbolet er placeret. Lad os se på indlejringsstrukturen til Chips-komponenten og dens varianter i Material Design Kit til skitse:

Struktur af indlejring af Chips-komponent i Material Design Kit til skitse
Struktur af indlejring af Chips-komponent i Material Design Kit til skitse

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

Sådan fungerer matchning
Hvordan matchning fungerer

For vores regex betyder det ikke noget, på hvilket niveau du gerne vil forbinde symbolet med dokumentation. Hovedreglen er, at navnene skal være de samme på begge sider. Det betyder ikke noget, hvilken notation du bruger til gruppering af symboler, om det er med cifre, bogstaver, understregning osv. Dybden af indlejring betyder heller ikke noget.

isValidType ()

Når du vælger ect noget på tegnebrættet og kører pluginet, denne funktion kontrollerer typen af ​​det valgte objekt. Og hvis objektet har en af ​​de anførte typer, returneres svaret med true parameter.

isValidType ( ) -funktion

Bare en lille bonus med muligheden for ikke kun at forbinde symboler, men grupper og figurer ved hjælp af skitsehoveder.

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

onRun()

Lad mig citere Mathieu Dutour, som er skaberen af ​​skpm.

skpm forventer også, at du export default function (context) {} i stedet for at skrive en top onRun -funktion.

onRun () -funktion

config.json

Så. Det er tid til at forberede en JSON-fil, der indeholder links til ekstern dokumentation. Jeg har valgt tre komponenter fra Material Design Kit, som vi vil teste: "Banner", "Input chip" og "Card".

config.json med reelle data

Som kan du se, JSON-filens struktur er meget enkel. Glem bare ikke, at navnet på objektet i config.json skal være det samme som en del af navnet på objektet i Sketch som jeg nævnte ovenfor.

Forresten kan vi ikke kun bruge http:// eller https:// men også zpl:// links, der giver os mulighed for at åbne alle Zeplin.app-sektioner.

manifest.json

Som jeg nævnte ovenfor, er dette en JSON-fil, der indeholder metadata om pluginet, dets kommandoer og ressourcer. Den endelige struktur for manifest.json for vores plugin ser sådan ud:

Den endelige struktur for manifestet. json

Flere parametre, også som en detaljeret beskrivelse af hver parameter, som vi bruger i denne fil, kan du finde i den officielle dokumentation.

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

Resu lt

Det er på tide at gå tilbage til Terminal.app og oprette et plugin:

npm run build

Det er det. Pluginet er klar til at blive installeret og testet. Lad os endelig gøre det og se på resultatet.

Det virker!
Det fungerer!

Afslutningsvis

Lad os være ærlige. Dette er mere et eksperiment end et færdigt produkt, og det er selvfølgelig ikke en ideel implementering. Vores hovedmål var ikke at bruge meget tid på udvikling, og det er grunden til, at vi nogle steder har brugt de løsninger, der var mere enkle i stedet for mere korrekte. Men vi har brugt dette plugin i det daglige arbejde i mere end et år.Og jeg vil gerne sige, at det er strålende for nye designere, der for nylig er kommet i teamet og lige er begyndt at stifte bekendtskab med de komponenter, som du bruger.

Jeg vil også sige en stor tak til Kirill Savelov og Dmitry Kozlov for deres tålmodighed og hjælp.

Flere historier om Design System og værktøjer

  • (Design System, del 2. Ikoner, SVG-skrifttyper, Gulp)
  • (Design System, del 3. Selvfremstillede værktøjer, som vi bruger i det daglige arbejde)
  • (ffmpeg + ImageMagick. Konverter video til GIF ved hjælp af Terminal.app i macOS)
  • (Sådan optimeres billeder ved hjælp af macOS Terminal + TinyPNG CLI)

Nyttige links

Følg Acronis Design på