Jak zbudować wtyczkę Sketch który połączy symbole z Twojej biblioteki z dowolną dokumentacją zewnętrzną

Prawie przewodnik po tym, jak zbudować wtyczkę Sketch za pomocą skpm

(Sergey Nikishkin) (28 maja 2020)

Jako przykład wezmę Google Material Zestaw do projektowania szkiców i połącz symbole z ich opisem na material.io/components . Oczywiście nie będę wyjaśniał każdego wiersza kodu, ale wskażę kilka części, które są ważne z mojego punktu widzenia. Ciekawy? W takim razie zacznijmy.

Jeśli nie jesteś zaznajomiony z rozwojem wtyczek Sketch, ale chcesz dowiedzieć się więcej, mogę polecić ten zestaw 7 artykułów autorstwa Marca Mariano jako przewodnik dla początkujących:

( Przewodnik dla początkujących dotyczący pisania wtyczek do szkiców )

Środowisko

Jako narzędzia do budowania naszej wtyczki użyję skpm . Jest to narzędzie, które umożliwia łatwe tworzenie, debugowanie i publikowanie wtyczek Sketch. Zanim zaczniemy, na komputerze Mac powinny być zainstalowane następujące elementy:

Instalacja skpm, a także jako tworzenie bazy dla wtyczki jest bardzo proste i wymaga łącznie dwóch poleceń. Po prostu utwórz nowy folder, otwórz Terminal.app w tym folderze i wprowadź kolejno następujące polecenia:

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

Pierwsze polecenie instaluje sam pakiet npm i wszystkie wymagane zależności. Drugi tworzy jeszcze jeden folder zawierający zestaw zasobów dla nowej wtyczki. Nasze główne cele to:

  • my-plugin.sketchplugin – sama wtyczka, która powinna zostać zainstalowana
  • src – folder z kodem źródłowym wtyczki
Jak wygląda wynik w kodzie VS
Jak wygląda wynik w kodzie VS

Opowiem trochę o manifest.json z folderu src. To jest plik JSON zawierający metadane dotyczące wtyczki, jej poleceń i zasobów. Zawiera listę wszystkich poleceń zdefiniowanych przez wtyczkę i informuje Sketch, jak wywołać odpowiednie pozycje menu i które menu je umieścić.

Ponadto, odważnie zmieńmy nazwę my-command.js do index.js i usuwa cały kod z wnętrza. Nieco później napiszemy coś znacznie bardziej interesującego niż kod, który pokazuje „ To żyje! 🙌 ”.

Schemat

Zanim zaczniemy pisać kod, zrozummy, jak wtyczka będzie praca. Przede wszystkim będziemy potrzebować trzech plików:

  • config.json – zawiera linki, które zostaną połączone z symbolami
  • index.js – zawiera wszystkie główne funkcje
  • manifest.json – zawiera metadane wtyczki
Schemat działania
Schemat działania

Więc. Kiedy wybieramy symbol w obszarze roboczym i uruchamiamy wtyczkę, wywołuje ona funkcję z index.js, która przechodzi do config.json, sprawdza dostępność łącze do wybranego symbolu, zwraca odpowiedź do index.js i, jeśli wszystkie testy są zakończone pomyślnie, otwiera zasób z dokumentacją. Jak widać, logika jest bardzo prosta.

Funkcje

Pierwszą rzeczą, którą powinniśmy zrobić, jest zaimportowanie config.json do index.js za pomocą poniższego kodu:

Pierwsza linia w index.js

A teraz przejdźmy do funkcji.

openLink ()

W tej funkcji używamy kilku klas i metod z Swift API, które pomoże nam otwierać zewnętrzne linki bezpośrednio z Sketch.

  • NSURL

  • URLWithString

  • NSWorkspace

  • SharedWorkspace

funkcja openLink ()
  • const {link} = config.names[name] – pobiera ciąg z adresem URL z config.json
  • const url = NSURL.URLWithString(link) – przekształca ciąg z adresem URL w obiekt z adresem URL
  • NSWorkspace.sharedWorkspace().openURL(url) – otwiera obiekt z adresem URL w Twojej domyślnej przeglądarce

parse ()

W tej funkcji dopasowujemy wybrany obiekt w obszarze roboczym do obiektu w config.json. Jeśli są dopasowane, funkcja zwraca klucz z linkiem do adresu URL.

parse () function

Moim zdaniem najciekawszą częścią jest tutaj wyrażenie regularne w linii 13:

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

Używając to wyrażenie regularne możemy znaleźć i dopasować obiekty na różnych poziomach zagnieżdżenia. W naszym przypadku obiektem jest nazwa symbolu lub nazwa grupy, w której znajduje się symbol. Przyjrzyjmy się strukturze zagnieżdżenia komponentu Chips i jego wariantom w Material Design Kit for Sketch:

Struktura zagnieżdżanie komponentu Chips w Material Design Kit for Sketch
Struktura zagnieżdżania komponentu Chips w Material Design Kit for Sketch

I jak to zagnieżdżenie w panelu warstw można dopasować do config.json:

Jak działa dopasowywanie
Jak działa dopasowywanie

W przypadku naszego wyrażenia regularnego nie ma znaczenia, na którym poziomie chcesz połączyć symbol z dokumentacją. Główną zasadą jest to, że nazwy powinny być takie same po obu stronach. Poza tym nie ma znaczenia, jakiego zapisu używasz do grupowania symboli, czy to z cyframi, literami, podkreśleniem itd. zagnieżdżenie też nie ma znaczenia.

isValidType ()

Gdy wybierzesz ect coś w obszarze roboczym i uruchamia wtyczkę, ta funkcja sprawdza typ wybranego obiektu. A jeśli obiekt ma jeden z wymienionych typów, zwraca odpowiedź z parametrem true.

isValidType ( )

Tylko mały bonus z możliwością łączenia nie tylko symboli, ale także grup i kształtów za pomocą nagłówków szkicu.

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

onRun()

Pozwólcie, że zacytuję Mathieu Dutour, który jest twórcą skpm.

skpm również oczekuje, że export default function (context) {} zamiast pisać funkcję najwyższego poziomu onRun.

funkcja onRun ()

config.json

A więc. Czas przygotować plik JSON, który będzie zawierał linki do zewnętrznej dokumentacji. Wybrałem trzy komponenty z Material Design Kit, które będziemy testować: "Banner", "Input chip" i "Card".

config.json z rzeczywistymi danymi

Jak widać, struktura pliku JSON jest bardzo prosta. Po prostu nie zapominaj, że nazwa obiektu w config.json powinna być taka sama, jak część nazwy obiektu w Sketch, jak wspomniałem powyżej.

Nawiasem mówiąc, możemy użyć nie tylko http:// lub https://, ale także zpl:// linki, które pozwalają nam otwierać dowolne sekcje Zeplin.app.

manifest.json

Jak wspomniałem powyżej, jest to plik JSON, który zawiera metadane dotyczące wtyczki, jej poleceń i zasobów. Ostateczna struktura manifest.json dla naszej wtyczki wygląda następująco:

Ostateczna struktura manifestu. json

Więcej parametrów, także jako szczegółowy opis każdego parametru, którego używamy w tym pliku, można znaleźć w oficjalnej dokumentacji.

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

Resu lt

Czas wrócić do Terminal.app i zbudować wtyczkę:

npm run build

To wszystko. Wtyczka jest gotowa do zainstalowania i przetestowania. Na koniec zróbmy to i spójrzmy na wynik.

To działa!
Działa!

Podsumowując

Bądźmy szczerzy. To bardziej eksperyment niż gotowy produkt i oczywiście nie jest to idealne wdrożenie. Naszym głównym celem było to, aby nie poświęcać dużo czasu na rozwój i dlatego w niektórych miejscach stosowaliśmy rozwiązania, które były prostsze niż bardziej poprawne. Ale używamy tej wtyczki w codziennej pracy od ponad roku.Chciałbym powiedzieć, że to genialne rozwiązanie dla nowych projektantów, którzy niedawno trafili do zespołu i właśnie zaczęli poznawać komponenty, których używasz.

Chciałbym również podziękować Kirill Savelov i Dmitry Kozlov za ich cierpliwość i pomoc.

Więcej historii o systemie projektowania i narzędziach

  • (System projektowania, część 2. Ikony, czcionki SVG, Gulp)
  • (System projektowania, część 3. Własne narzędzia, których używamy w codziennej pracy)
  • (ffmpeg + ImageMagick. Konwertuj wideo na GIF za pomocą Terminal.app w macOS)
  • (Jak zoptymalizować obrazy za pomocą terminala macOS + TinyPNG CLI)

Przydatne linki

Obserwuj program Acronis Design na