Jak vytvořit plugin Sketch který propojí symboly z vaší knihovny s jakoukoli externí dokumentací

Téměř návod, jak vytvořit plugin Sketch pomocí skpm

(Sergey Nikishkin) (28. května 2020)

Jako příklad uvedu materiál Google Design Kit for Sketch a připojte symboly k jejich popisu na material.io/components . Samozřejmě nebudu vysvětlovat každý řádek kódu, ale zdůrazním některé části, které jsou z mého pohledu důležité. Zajímavý? Pak začneme.

Pokud nejste obeznámeni s vývojem pluginů Sketch, ale chcete se dozvědět více, mohu vám doporučit tuto sadu 7 článků Marca Mariana jako průvodce pro začátečníky:

( Průvodce pro začátečníky k psaní doplňků pro skici )

Prostředí

Jako stavební nástroj pro náš plugin použiji skpm . Toto je nástroj, který vám umožní snadno vytvářet, ladit a publikovat doplňky Sketch. Než začneme, měli byste mít ve svém počítači Mac nainstalované následující věci:

Instalace skpm a také jako vytvoření základu pro plugin je velmi jednoduché a vyžaduje celkem dva příkazy. Stačí vytvořit novou složku, otevřít Terminal.app v této složce a zadat jeden po druhém tyto příkazy:

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

První příkaz nainstaluje samotný balíček npm a všechny požadované závislosti. Druhá vytvoří jednu další složku, která obsahuje sadu prostředků pro váš nový plugin. Naše hlavní cíle jsou:

  • my-plugin.sketchplugin – samotný plugin, který by měl být nainstalován
  • src – složka se zdrojovým kódem pluginu
Jak výsledek vypadá v kódu VS
Jak výsledek vypadá v kódu VS

Dovolte mi něco říct o manifest.json ze složky src. Toto je soubor JSON, který obsahuje metadata o pluginu, jeho příkazech a zdrojích. Uvádí seznam názvů všech příkazů definovaných modulem plug-in a sděluje aplikaci Sketch, jak zavolat odpovídající položky nabídky a do kterých nabídek je umístit.

Rovněž nechme odvážně přejmenovat my-command.js to index.js a odstraní veškerý kód uvnitř. O něco později napíšeme něco mnohem zajímavějšího než kód, který zobrazí „ Je to naživu! 🙌 ”zpráva.

Schéma

Než začneme psát kód, pochopme, jak bude plugin fungovat práce. Nejprve budeme potřebovat tři soubory:

  • config.json – obsahuje odkazy, které budou spojeny se symboly
  • index.js – obsahuje všechny hlavní funkce
  • manifest.json – obsahuje metadata pluginu
Pracovní schéma
Pracovní schéma

Takže. Když vybereme symbol na kreslicí ploše a spustíme plugin, zavolá funkci z index.js, která přejde do config.json, zkontroluje dostupnost odkaz na vybraný symbol, vrátí odpověď do index.js a pokud jsou předány všechny kontroly, otevře zdroj s dokumentací. Jak vidíte, logika je velmi jednoduchá.

Funkce

První věcí, kterou bychom měli udělat, je import config.json do index.js pomocí níže uvedeného kódu:

Úplně první řádek v index.js

A nyní přejdeme k funkcím.

openLink ()

V této funkci používáme několik tříd a metod z rozhraní Swift API, které nám pomůže otevírat externí odkazy přímo z aplikace Sketch.

  • NSURL

  • URLWithString

  • NSWorkspace

  • SharedWorkspace

funkce openLink ()
  • const {link} = config.names[name] – získá řetězec s URL z config.json
  • const url = NSURL.URLWithString(link) – transformuje řetězec s URL na objekt s URL
  • NSWorkspace.sharedWorkspace().openURL(url) —otevření objekt s adresou URL ve vašem výchozím prohlížeči

parse ()

V této funkci porovnáváme vybraný objekt na kreslicí ploše s objektem v config.json. Pokud se shodují, vrátí funkce klíč s odkazem na URL.

funkce parse ()

Podle mého názoru je zde nejzajímavější částí regex na řádku 13:

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

Použitím tento regulární výraz můžeme najít a porovnat objekty na různých úrovních vnoření. V našem případě je objektem název symbolu nebo název skupiny, kde je symbol umístěn. Pojďme se podívat na strukturu vnoření komponenty Chips a její varianty v Material Design Kit pro Sketch:

Struktura vnoření pro komponentu Chips v Material Design Kit pro náčrt
Struktura vnoření pro komponentu Chips v Material Design Kit pro náčrt

A jak toto vnoření v panelu vrstev lze porovnat s config.json:

Jak funguje shoda
Jak funguje shoda

U našeho regexu nezáleží na tom, na jaké úrovni byste chtěli připojit symbol s dokumentací. Hlavním pravidlem je, že jména by měla být na obou stranách stejná. Také nezáleží na tom, kterou notaci používáte pro seskupování symbolů, ať už s číslicemi, písmeny, podtržítkem atd. Hloubka na vnoření také nezáleží.

isValidType ()

Když sel ect něco na kreslicí ploše a spustí plugin, tato funkce zkontroluje typ vybraného objektu. A pokud má objekt jeden z uvedených typů, vrátí odpověď s parametrem true.

isValidType ( ) funkce

Jen malý bonus s možností propojit nejen symboly, ale i skupiny a tvary pomocí hlaviček náčrtu.

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

onRun()

Dovolte mi citovat Mathieu Dutoura, který je tvůrcem skpm.

skpm také očekává, že export default function (context) {} místo psaní funkce onRun nejvyšší úrovně.

funkce onRun ()

config.json

Takže. Je čas připravit soubor JSON, který bude obsahovat odkazy na externí dokumentaci. Ze sady Material Design Kit jsem vybral tři komponenty, které otestujeme: "Banner", "Input chip" a "Card".

config.json se skutečnými daty

Jak vidíte, struktura souboru JSON je velmi jednoduchá. Nezapomeňte, že název objektu v config.json by měl být stejný jako část názvu objektu v aplikaci Sketch, jak jsem uvedl výše.

Mimochodem, můžeme použít nejen http:// nebo https:// ale také zpl:// odkazy, které nám umožňují otevírat jakékoli sekce Zeplin.app.

manifest.json

Jak jsem zmínil výše, jedná se o soubor JSON, který obsahuje metadata o pluginu, jeho příkazech a zdroje. Konečná struktura manifest.json pro náš plugin vypadá takto:

Konečná struktura manifestu. json

Další parametry, také jako podrobný popis každého parametru, který v tomto souboru používáme, najdete v oficiální dokumentaci.

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

Resu lt

Je čas vrátit se na Terminal.app a vytvořit plugin:

npm run build

To je vše. Plugin je připraven k instalaci a testování. Pojďme to konečně udělat a podívejme se na výsledek.

Funguje to!
Funguje to!

Závěrem

Buďme upřímní. Jedná se spíše o experiment než o hotový produkt a samozřejmě nejde o ideální implementaci. Naším hlavním cílem bylo nestrávit hodně času vývojem, a proto jsme na některých místech použili ta řešení, která byla jednodušší místo správnější. Tento plugin jsme ale používali v každodenní práci déle než rok.A rád bych řekl, že je to skvělé pro nové designéry, kteří nedávno přistáli v týmu a právě se začali seznamovat s těmi komponenty, které používáte.

Také bych rád poděkoval Kirill Savelov a Dmitrij Kozlov za trpělivost a pomoc.

Další příběhy o Design System and Tools

  • (Design System, část 2. Ikony, písma SVG, Gulp)
  • (Design System, část 3. Vlastní nástroje, které používáme při každodenní práci)
  • (ffmpeg + ImageMagick. Převod videa do formátu GIF pomocí Terminal.app v macOS)
  • (Jak optimalizovat obrázky pomocí terminálu macOS Terminal + TinyPNG CLI)

Užitečné odkazy

Sledujte návrh Acronis na