Hogyan készítsünk egy Sketch plugint amely összeköti a könyvtáradból származó szimbólumokat bármilyen külső dokumentációval

Szinte áttekintő útmutató arról, hogyan lehet Sketch plugint felépíteni az skpm

(Sergey Nikishkin) használatával (2020. május 28.)

Példaként a Google anyagát veszem fel Design Kit a vázlathoz és kapcsolja össze a szimbólumokat a leírásukkal a material.io/components . Természetesen nem fogom megmagyarázni az egyes kódsorokat, de kiemelek néhány olyan szempontot, amely az én szemszögemből fontos. Érdekes? Akkor kezdjük.

Ha még nem ismeri a Sketch beépülő modulok fejlesztését, de többet szeretne megtudni, akkor tanácsot adhatok Marc Mariano 7 cikkből álló készletének, mint séta útmutató a kezdők számára:

( Útmutató a vázlatos beépülő modulok megírásához )

Környezet

Bővítményünk építőeszközeként a skpm . Ez egy segédprogram, amely lehetővé teszi a Sketch beépülő modulok egyszerű elkészítését, hibakeresését és közzétételét. Mielőtt elkezdenénk, a következő dolgokat kell telepítenie a mac-ra:

A skpm és a plugin alapjának létrehozása is nagyon egyszerű és összesen két parancsra van szükség. Csak hozzon létre egy új mappát, nyissa meg a Terminal.app alkalmazást ebben a mappában, és írja be egyesével ezeket a parancsokat:

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

Az első parancs maga az npm csomagot és az összes szükséges függőséget telepíti. A második egy mappát hoz létre, amely tartalmaz egy sor eszközt az új plugin számára. Fő célkitűzéseink a következők:

  • my-plugin.sketchplugin – maga a plugin, amelyet telepíteni kell
  • src – a plugin forráskódú mappája
Hogyan néz ki az eredmény a VS-kódban
Hogyan néz ki az eredmény a VS-kódban

Hadd mondjak el egy kicsit a manifest.json a src mappából. Ez egy JSON fájl, amely metaadatokat tartalmaz a bővítményről, annak parancsairól és erőforrásairól. Felsorolja a plugin által definiált parancsok nevét, és megmondja a Sketch-nek, hogy hívják a megfelelő menüpontokat, és melyik menükbe tegye őket.

Ezenkívül nevezzük át bátran a a index.js címre, és eltávolítja az összes kódot belülről. Kicsit később sokkal érdekesebbet írunk, mint a „ Életben van! 🙌 ”üzenet.

A séma

Mielőtt elkezdenénk kódot írni, értsük meg, hogyan fog működni a bővítmény munka. Először három fájlra lesz szükségünk:

  • config.json – linkeket tartalmaz, amelyek összekapcsolódnak a szimbólumokkal
  • index.js – az összes fő funkciót tartalmazza
  • manifest.json – plugin metaadatokat tartalmaz
Működési séma
A működési séma

Szóval. Amikor kiválasztjuk a szimbólumot a rajztáblán, és futtatjuk a bővítményt, az meghív egy index.js függvényt, amely a config.json címre megy, ellenőrzi a a kiválasztott szimbólum linkje visszaadja a választ a következőre: index.js, és ha minden ellenőrzés sikeres, akkor az erőforrást dokumentációval nyitja meg. Amint láthatja, a logika nagyon egyszerű.

Funkciók

Az első dolog, amit tennünk kell, a következőt kell importálni: config.json a index.js az alábbi kód használatával:

Az index.js első sora

Most térjünk át a függvényekre.

openLink ()

Ebben a függvényben néhány osztályt és metódust használunk a Swift API-ból, amely segít megnyitni a külső hivatkozásokat közvetlenül a Sketch alkalmazásból.

  • NSURL

  • URLWithString

  • NSWorkspace

  • SharedWorkspace

openLink () függvény
  • const {link} = config.names[name] – URL-t kap a stringből a config-ból.json
  • const url = NSURL.URLWithString(link) – átalakítja a karakterláncot URL-vel objektummá URL-lel
  • NSWorkspace.sharedWorkspace().openURL(url) – megnyílik objektum URL-címmel az alapértelmezett böngészőben

parse ()

Ebben a függvényben a rajztáblán lévő kiválasztott objektumot egy . Ha ezek megegyeznek, a függvény visszaadja a kulcsot az URL-linkkel.

parse () függvény

Véleményem szerint itt a legérdekesebb egy regex a 13. sorban:

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

A ebben a regexben különböző fészkelési szinteken találhatunk objektumokat. Esetünkben az objektum a szimbólum neve vagy annak a csoportnak a neve, ahová a szimbólum kerül. Vessünk egy pillantást a Chips komponens és annak változatainak beágyazási struktúrájára a Material Design Kit for Sketch-ben:

Chips komponens beágyazása a Material Design Kit for Sketch
Chips komponens beágyazásának felépítése a Material Design Kit for Sketch

És hogyan ez a fészkelés a rétegek panelen egyeztethető a következővel: config.json:

Hogyan működik az egyezés
Hogyan működik az egyezés

A regexünknél nem mindegy, hogy melyik szinten szeretné összekapcsolni a szimbólumot dokumentációval. A fő szabály az, hogy a neveknek mindkét oldalon azonosaknak kell lenniük. Nem számít, hogy melyik jelölést használja a szimbólumok csoportosításához, legyen szó számjegyekkel, betűkkel, aláhúzásokkal és így tovább. a fészkelés sem számít.

isValidType ()

Amikor kiválasztod Valami valamit a rajztáblán, és futtatja a bővítményt, ez a funkció ellenőrzi a kiválasztott objektum típusát. Ha pedig az objektum rendelkezik a felsorolt ​​típusok valamelyikével, akkor a választ true paraméterrel adja vissza.

isValidType ( ) function

Csak egy kis bónusz azzal a lehetőséggel, hogy a Sketch Headers használatával nemcsak szimbólumokat, hanem csoportokat és alakzatokat is összekapcsolhat.

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

onRun()

Hadd idézzem Mathieu Dutour-t, aki az skpm készítője.

Az skpm azt is elvárja tőled, hogy export default function (context) {} felső szintű onRun függvény megírása helyett.

onRun () függvény

config.json

Tehát. Itt az ideje elkészíteni egy JSON fájlt, amely hivatkozásokat tartalmaz a külső dokumentációra. Az Anyagtervező készletből három összetevőt választottam, amelyeket tesztelni fogunk: "Banner", "Input chip" és "Card".

config.json valós adatokkal

As láthatja, hogy a JSON fájl felépítése nagyon egyszerű. Csak ne felejtsd el, hogy a config.json elemben lévő objektumnak meg kell egyeznie a Sketch objektum nevének részével, amint azt fentebb említettem.

Egyébként használhatunk nemcsak http:// vagy https://, hanem zpl:// linkek, amelyek lehetővé teszik a Zeplin.app bármely szakaszának megnyitását.

manifest.json

Mint fent említettem, ez egy JSON fájl, amely metaadatokat tartalmaz a bővítményről, annak parancsairól és erőforrások. A plugin manifest.json végső szerkezete így néz ki:

A manifeszt végső szerkezete. json

További paraméterek, az egyes paraméterek részletes leírásaként, amelyeket ebben a fájlban használunk, megtalálhatja a hivatalos dokumentációban.

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

A folytatás lt

Itt az ideje, hogy visszatérjen a Terminal.app oldalra, és elkészítsen egy plugint:

npm run build

Ez az. A bővítmény telepítésre és tesztelésre kész. Végezzük el végre, és nézzük meg az eredményt.

Működik!
Működik!

Befejezésül

Legyünk őszinték. Ez inkább kísérlet, mint elkészített termék, és természetesen nem ideális megvalósítás. Fő célunk az volt, hogy ne fordítsunk sok időt a fejlesztésre, és ez az oka annak, hogy egyes helyeken azokat a megoldásokat használtuk, amelyek helyesebbek helyett egyszerűbbek voltak. De ezt a bővítményt több mint egy éve használjuk a mindennapi munkában.És azt szeretném mondani, hogy nagyszerű azoknak az új tervezőknek, akik nemrég kerültek be a csapatba, és most kezdtek megismerkedni az Ön által használt komponensekkel.

Ezenkívül szeretnék nagy köszönetet mondani Kirill Savelovnak és Dmitrij Kozlovnak türelmükért és segítségükért.

További történetek a tervezési rendszerről és az eszközökről

  • (Tervezési rendszer, 2. rész: Ikonok, SVG betűtípusok, Gulp)
  • (Tervezési rendszer, 3. rész. Saját készítésű eszközök, amelyeket a mindennapi munkában használunk)
  • (ffmpeg + ImageMagick. Videót konvertálhat GIF-be a Terminal.app használatával macOS-ban)
  • (Hogyan optimalizálhatjuk a képeket a macOS Terminal + TinyPNG CLI használatával)

Hasznos linkek

Kövesse az Acronis Design alkalmazást a