Erstellen eines Sketch-Plugins Dadurch werden Symbole aus Ihrer Bibliothek mit jeder externen Dokumentation verbunden.

Fast eine exemplarische Anleitung zum Erstellen eines Sketch-Plugins mit skpm

(Sergey Nikishkin) (28. Mai 2020)

Als Beispiel nehme ich Google Material Design Kit für Skizze und verbinden Sie Symbole mit ihrer Beschreibung auf material.io/components . Natürlich werde ich nicht jede Codezeile erklären, aber ich werde einige Teile hervorheben, die aus meiner Sicht wichtig sind. Interessant? Dann fangen wir an.

Wenn Sie nicht mit der Entwicklung von Sketch-Plugins vertraut sind, aber mehr erfahren möchten, kann ich diesen Satz von 7 Artikeln von Marc Mariano als Leitfaden für Anfänger empfehlen:

( Das Anfängerhandbuch zum Schreiben von Skizzen-Plugins )

Umgebung

Als Build-Tool für unser Plugin verwende ich skpm . Dies ist ein Dienstprogramm, mit dem Sie Sketch-Plugins einfach erstellen, debuggen und veröffentlichen können. Bevor wir beginnen, sollten auf Ihrem Mac die folgenden Dinge installiert sein:

Installation des skpm und auch als Erstellung der Basis für das Plugin ist sehr einfach und erfordert insgesamt zwei Befehle. Erstellen Sie einfach einen neuen Ordner, öffnen Sie Terminal.app in diesem Ordner und geben Sie nacheinander die folgenden Befehle ein:

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

Der erste Befehl installiert das npm-Paket selbst und alle erforderlichen Abhängigkeiten. Der zweite erstellt einen weiteren Ordner, der eine Reihe von Assets für Ihr neues Plugin enthält. Unsere Hauptziele dort sind:

  • my-plugin.sketchplugin – das Plugin selbst, das installiert werden sollte
  • src – der Ordner mit dem Quellcode des Plugins
Wie das Ergebnis im VS-Code aussieht
Wie das Ergebnis im VS-Code aussieht

Lassen Sie mich etwas über manifest.json aus dem Ordner src. Dies ist eine JSON-Datei, die Metadaten zum Plugin, seinen Befehlen und Ressourcen enthält. Es listet die Namen aller vom Plugin definierten Befehle auf und teilt Sketch mit, wie die entsprechenden Menüelemente aufgerufen werden sollen und in welche Menüs sie eingefügt werden sollen.

Lassen Sie uns auch bis index.js und entfernt den gesamten Code darin. Wenig später werden wir etwas viel Interessanteres schreiben als Code, der „ Es lebt! 🙌 „Nachricht.

Das Schema

Bevor wir mit dem Schreiben von Code beginnen, sollten wir verstehen, wie das Plugin funktioniert Arbeit. Zunächst benötigen wir drei Dateien:

  • config.json – enthält Links, die mit den Symbolen
  • index.js – enthält alle Hauptfunktionen
  • manifest.json – enthält Plugin-Metadaten

Das Arbeitsschema
Das Arbeitsschema

Also. Wenn wir das Symbol auf der Zeichenfläche auswählen und das Plugin ausführen, ruft es eine Funktion von index.js auf, die zu config.json wechselt und die Verfügbarkeit von überprüft Der Link für das ausgewählte Symbol gibt die Antwort an index.js zurück und öffnet die Ressource mit Dokumentation, wenn alle Prüfungen bestanden wurden. Wie Sie sehen können, ist die Logik sehr einfach.

Funktionen

Als erstes sollten wir config.json nach index.js unter Verwendung des folgenden Codes:

Die allererste Zeile in index.js

Und jetzt gehen wir zu den Funktionen über.

openLink ()

In dieser Funktion verwenden wir einige Klassen und Methoden über die Swift-API, mit deren Hilfe wir externe Links direkt aus Sketch öffnen können.

  • NSURL

  • URLWithString

  • NSWorkspace

  • SharedWorkspace

openLink () -Funktion
  • const {link} = config.names[name] – Ruft eine Zeichenfolge mit URL von config ab.json
  • const url = NSURL.URLWithString(link) – transformiert Zeichenfolge mit URL in Objekt mit URL
  • NSWorkspace.sharedWorkspace().openURL(url) – wird geöffnet Objekt mit URL in Ihrem Standardbrowser

parse ()

In dieser Funktion ordnen wir das ausgewählte Objekt auf der Zeichenfläche einem Objekt in . Wenn sie übereinstimmen, gibt die Funktion den Schlüssel mit dem URL-Link zurück.

parse () -Funktion

Meiner Meinung nach ist der interessanteste Teil hier ein regulärer Ausdruck in Zeile 13:

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

Mit Mit diesem regulären Ausdruck können wir Objekte auf verschiedenen Verschachtelungsebenen finden und abgleichen. In unserem Fall ist das Objekt der Name des Symbols oder der Name der Gruppe, in der das Symbol platziert ist. Schauen wir uns die Verschachtelungsstruktur für die Chip-Komponente und ihre Varianten im Material Design Kit für Sketch an:

Struktur von Verschachtelung für Chips-Komponente im Material Design Kit für Sketch
Struktur der Verschachtelung für Chips-Komponente im Material Design Kit für Sketch

Und wie Diese Verschachtelung im Ebenenbedienfeld kann mit config.json:

abgeglichen werden
Funktionsweise des Abgleichs

Für unsere Regex spielt es keine Rolle, auf welcher Ebene Sie das Symbol verbinden möchten Die Hauptregel lautet, dass die Namen auf beiden Seiten gleich sein sollten. Außerdem spielt es keine Rolle, welche Notation Sie für die Gruppierung von Symbolen verwenden, ob sie aus Ziffern, Buchstaben, Unterstrichen usw. besteht Verschachtelung spielt ebenfalls keine Rolle.

isValidType ()

Wenn Sie auswählen Wenn Sie etwas auf der Zeichenfläche ausführen und das Plugin ausführen, überprüft diese Funktion den Typ des ausgewählten Objekts. Wenn das Objekt einen der aufgelisteten Typen hat, wird die Antwort mit dem Parameter true zurückgegeben.

isValidType ( ) function

Nur ein kleiner Bonus mit der Möglichkeit, nicht nur Symbole, sondern auch Gruppen und Formen mithilfe von Sketch Headern zu verbinden.

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

onRun()

Lassen Sie mich Mathieu Dutour zitieren, der der Schöpfer der skpm ist.

skpm erwartet dies auch von Ihnen export default function (context) {} anstatt eine onRun -Funktion der obersten Ebene zu schreiben.

onRun () -Funktion

config.json

So. Es ist Zeit, eine JSON-Datei vorzubereiten, die Links zu externer Dokumentation enthält. Ich habe drei Komponenten aus dem Material Design Kit ausgewählt, die wir testen werden: "Banner", "Input chip" und "Card".

config.json mit realen Daten

As Sie sehen, die Struktur der JSON-Datei ist sehr einfach. Vergessen Sie nur nicht, dass der Name des Objekts in config.json mit einem Teil des Namens für das Objekt in Sketch identisch sein sollte, wie oben erwähnt.

Übrigens können wir nicht nur http:// oder https:// verwenden, sondern auch zpl:// Links, mit denen wir alle Zeplin.app-Abschnitte öffnen können.

manifest.json

Wie oben erwähnt, handelt es sich um eine JSON-Datei, die Metadaten zum Plugin, seinen Befehlen und enthält Ressourcen. Die endgültige Struktur von manifest.json für unser Plugin sieht folgendermaßen aus:

Die endgültige Struktur des Manifests. json

Weitere Parameter, auch als detaillierte Beschreibung aller Parameter, die wir in dieser Datei verwenden, finden Sie in der offiziellen Dokumentation.

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

Das Ergebnis

Es ist Zeit, zu Terminal.app zurückzukehren und ein Plugin zu erstellen:

npm run build

Das wars. Das Plugin kann installiert und getestet werden. Lassen Sie uns das endlich tun und das Ergebnis betrachten.

Es funktioniert!
Es funktioniert!

Abschließend

Seien wir ehrlich. Dies ist eher ein Experiment als ein fertiges Produkt, und natürlich ist es keine ideale Implementierung. Unser Hauptziel war es, nicht viel Zeit für die Entwicklung aufzuwenden. Aus diesem Grund haben wir an einigen Stellen Lösungen verwendet, die einfacher als korrekter waren. Aber wir verwenden dieses Plugin seit mehr als einem Jahr in der täglichen Arbeit.Und ich möchte sagen, dass es hervorragend für neue Designer ist, die kürzlich im Team gelandet sind und gerade erst angefangen haben, sich mit den von Ihnen verwendeten Komponenten vertraut zu machen.

Außerdem möchte ich mich ganz herzlich bedanken an Kirill Savelov und Dmitry Kozlov für ihre Geduld und Hilfe.

Weitere Geschichten über Design System und Tools

  • (Design System, Teil 2. Symbole, SVG-Schriftarten, Gulp)
  • (Design System, Teil 3. Selbst erstellte Tools, die wir in der täglichen Arbeit verwenden)
  • (ffmpeg + ImageMagick. Konvertieren Sie Videos mithilfe von Terminal.app in GIF in macOS)
  • (So optimieren Sie Bilder mithilfe von macOS Terminal + TinyPNG CLI)

Nützliche Links

Folgen Sie Acronis Design auf