Hur man bygger ett Sketch-plugin som kommer att ansluta symboler från ditt bibliotek med någon extern dokumentation

Nästan en genomgångsguide för hur man bygger ett Sketch-plugin med skpm

(Sergey Nikishkin) (28 maj 2020)

Som ett exempel tar jag Google Material Design Kit för skiss och anslut symboler till deras beskrivning på material.io/components . Naturligtvis kommer jag inte att förklara varje kodrad, men jag kommer att lyfta fram några delar som är viktiga ur min synvinkel. Intressant? Låt oss börja.

Om du inte är bekant med Sketch plugins-utvecklingen men vill lära dig mer kan jag ge råd om denna uppsättning av 7 artiklar av Marc Mariano som en guide för nybörjare:

( Nybörjarhandboken för att skriva skiss-plugins )

Miljö

Som ett byggverktyg för vårt plugin kommer jag att använda skpm . Detta är ett verktyg som gör att du enkelt kan bygga, felsöka och publicera Sketch-plugins. Innan vi börjar bör du också ha följande saker installerade på din mac:

Installation av skpm och även som skapande av basen för plugin är mycket enkelt och kräver totalt två kommandon. Skapa bara en ny mapp, öppna Terminal.app i den här mappen och mata in en och en av dessa kommandon:

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

Det första kommandot installerar själva npm-paketet och alla nödvändiga beroenden. Den andra skapar ytterligare en mapp som innehåller en uppsättning tillgångar för ditt nya plugin. Våra huvudmål är:

  • my-plugin.sketchplugin – själva plugin-programmet som ska installeras
  • src – mappen med källkoden för plugin
Hur resultatet ser ut i VS-koden
Hur resultatet ser ut i VS-koden

Låt mig berätta lite om manifest.json från src -mappen. Detta är en JSON-fil som innehåller metadata om plugin-programmet, dess kommandon och resurser. Den listar namnen på alla kommandon som definierats av pluginprogrammet och berättar för Sketch vad man ska kalla motsvarande menyalternativ och vilka menyer de ska placeras i.

Låt oss också tappa namn på my-command.js till index.js och tar bort all kod inuti. Lite senare kommer vi att skriva något mycket mer intressant än kod som visar “ Det lever! 🙌 ”meddelande.

Schemat

Innan vi börjar skriva kod, låt oss förstå hur plugin kommer att arbete. Först och främst behöver vi tre filer:

  • config.json – innehåller länkar som kommer att kopplas till symbolerna
  • index.js – innehåller alla huvudfunktioner
  • manifest.json – innehåller plugin-metadata
Arbetsschemat
Arbetsschemat

Så. När vi väljer symbolen på tavlan och kör plugin, kallar den en funktion från index.js som går till config.json, kontrollerar tillgängligheten av länken för den valda symbolen, returnerar svaret till index.js och, om alla kontroller klaras, öppnar resursen med dokumentation. Som du kan se är logiken väldigt enkel.

Funktioner

Det första vi ska göra är att importera config.json till index.js med hjälp av koden nedan:

Den allra första raden i index.js

Och nu går vi vidare till funktionerna.

openLink ()

I den här funktionen använder vi några klasser och metoder från Swift API som hjälper oss att öppna externa länkar direkt från Sketch.

  • NSURL

  • URLWithString

  • NSWorkspace

  • SharedWorkspace

openLink () -funktion
  • const {link} = config.names[name] – får en sträng med URL från config.json
  • const url = NSURL.URLWithString(link) – omvandlar sträng med URL till objekt med URL
  • NSWorkspace.sharedWorkspace().openURL(url) – öppnas objekt med URL i din standardwebbläsare

analys ()

I den här funktionen matchar vi det valda objektet på ritytan med ett objekt i config.json. Om de matchas returnerar funktionen nyckeln med URL-länken.

parse () -funktion

Enligt min mening är den mest intressanta delen här en regex på rad 13:

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

Genom att använda denna regex kan vi hitta och matcha objekt på olika häckningsnivåer. I vårt fall är objektet namnet på symbolen eller namnet på den grupp där symbolen placeras. Låt oss ta en titt på häckningsstrukturen för Chips-komponenten och dess varianter i Material Design Kit för skiss:

Struktur av kapsling för Chips-komponent i Material Design Kit för skiss
Strukturen för kapsling för Chips-komponent i Material Design Kit för skiss

Och hur detta kapsling i lagerpanelen kan matchas med config.json:

Hur matchning fungerar
Hur matchning fungerar

För vår regex spelar det ingen roll, på vilken nivå du vill ansluta symbolen med dokumentation. Huvudregeln är att namnen ska vara desamma på båda sidor. Det spelar ingen roll vilken notering du använder för gruppering av symboler, oavsett om det är siffror, bokstäver, understrykning och så vidare. häckning spelar ingen roll heller.

isValidType ()

När du väljer ect något på tavlan och kör plugin, den här funktionen kontrollerar typen av valt objekt. Och om objektet har en av de listade typerna returnerar du svaret med parametern true.

isValidType ( ) -funktion

Bara en liten bonus med möjligheten att ansluta inte bara symboler utan även grupper och former med hjälp av skissrubriker.

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

onRun()

Låt mig citera Mathieu Dutour, som är skaparen av skpm.

skpm förväntar dig också att export default function (context) {} istället för att skriva en toppnivå onRun -funktion.

onRun () -funktion

config.json

Så. Det är dags att förbereda en JSON-fil som innehåller länkar till extern dokumentation. Jag har valt tre komponenter från Material Design Kit som vi kommer att testa: "Banner", "Input chip" och "Card".

config.json med verkliga data

Som Du kan se, strukturen för JSON-filen är väldigt enkel. Glöm inte att namnet på objektet i config.json ska vara detsamma som en del av namnet på objektet i Sketch som jag nämnde ovan.

Förresten kan vi inte bara använda http:// eller https:// utan också zpl:// länkar som tillåter oss att öppna alla Zeplin.app-avsnitt.

manifest.json

Som jag nämnde ovan är detta en JSON-fil som innehåller metadata om plugin, dess kommandon och resurser. Den slutliga strukturen för manifest.json för vårt plugin ser ut så här:

Den slutliga strukturen för manifestet. json

Fler parametrar, även som en detaljerad beskrivning av varje parameter som vi använder i den här filen kan du hitta i den officiella dokumentationen.

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

Resu lt

Det är dags att gå tillbaka till Terminal.app och bygga ett plugin:

npm run build

Det är det. Plugin är redo att installeras och testas. Låt oss äntligen göra det och titta på resultatet.

Det fungerar!
Det fungerar!

Sammanfattningsvis

Låt oss vara ärliga. Detta är mer ett experiment än en färdig produkt, och det är naturligtvis inte en idealisk implementering. Vårt huvudmål var att inte spendera mycket tid på utveckling och detta är anledningen till att vi på vissa ställen har använt de lösningar som var enklare istället för mer korrekta. Men vi har använt detta plugin i det dagliga arbetet i mer än ett år.Och jag skulle vilja säga att det är fantastiskt för nya designers som nyligen har hamnat i teamet och precis börjat bekanta sig med de komponenterna som du använder.

Jag vill också säga ett stort tack till Kirill Savelov och Dmitry Kozlov för deras tålamod och hjälp.

Fler berättelser om Design System och verktyg

  • (Design System, del 2. Ikoner, SVG-teckensnitt, Gulp)
  • (Design System, del 3. Självtillverkade verktyg som vi använder i det dagliga arbetet)
  • (ffmpeg + ImageMagick. Konvertera video till GIF med Terminal.app i macOS)
  • (Hur man optimerar bilder med macOS Terminal + TinyPNG CLI)

Användbara länkar

Följ Acronis Design på