Come creare un plug-in Sketch che collegherà i simboli dalla tua libreria con qualsiasi documentazione esterna

Quasi una guida dettagliata su come creare un plug-in Sketch utilizzando skpm

(Sergey Nikishkin) (28 maggio 2020)

Ad esempio, prenderò il materiale di Google Kit di progettazione per Sketch e collega i simboli alla loro descrizione su material.io/components . Ovviamente non spiegherò ogni riga di codice, ma evidenzierò alcune parti importanti dal mio punto di vista. Interessante? Allora iniziamo.

Se non hai familiarità con lo sviluppo dei plugin di Sketch ma vuoi saperne di più, posso consigliare questo set di 7 articoli di Marc Mariano come guida per principianti:

( Guida per principianti alla scrittura di plug-in per schizzi )

Ambiente

Come strumento di creazione del nostro plug-in, utilizzerò skpm . Questa è unutilità che ti consente di creare, eseguire il debug e pubblicare facilmente plug-in di Sketch. Inoltre, prima di iniziare, dovresti avere le seguenti cose installate sul tuo Mac:

Installazione del skpm e anche come creazione della base per il plugin è molto semplice e richiede due comandi in totale. Basta creare una nuova cartella, aprire Terminal.app in questa cartella e inserire uno per uno questi comandi:

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

Il primo comando installa il pacchetto npm stesso e tutte le dipendenze richieste. Il secondo crea unaltra cartella che contiene una serie di risorse per il tuo nuovo plug-in. I nostri obiettivi principali sono:

  • my-plugin.sketchplugin – il plug-in stesso che dovrebbe essere installato
  • src – la cartella con il codice sorgente del plug-in
Come appare il risultato nel codice VS
Come appare il risultato nel codice VS

Fammi parlare un po di manifest.json dalla cartella src. Questo è un file JSON che contiene metadati sul plug-in, i suoi comandi e le risorse. Elenca i nomi di tutti i comandi definiti dal plug-in e dice a Sketch come chiamare le voci di menu corrispondenti e in quali menu inserirle.

Inoltre, “s coraggiosamente rinomina my-command.js a index.js e rimuove tutto il codice allinterno. Un po più tardi scriveremo qualcosa di molto più interessante del codice che mostra “ È vivo! 🙌 “messaggio.

Lo schema

Prima di iniziare a scrivere codice, vediamo come funziona il plugin lavoro. Prima di tutto, avremo bisogno di tre file:

  • config.json – contiene i collegamenti che saranno collegati ai simboli
  • index.js: contiene tutte le funzioni principali
  • manifest.json – contiene i metadati del plug-in

Lo schema di lavoro
Lo schema di lavoro

Quindi. Quando selezioniamo il simbolo sulla tavola da disegno ed eseguiamo il plug-in, esso chiama una funzione da index.js che va a config.json, controlla la disponibilità di il collegamento per il simbolo selezionato, restituisce la risposta in index.js e, se tutti i controlli vengono superati, apre la risorsa con la documentazione. Come puoi vedere, la logica è molto semplice.

Funzioni

La prima cosa che dovremmo fare è importare config.json in index.js utilizzando il codice seguente:

La primissima riga in index.js

E ora passiamo alle funzioni.

openLink ()

In questa funzione stiamo usando alcune classi e metodi dallAPI Swift che ci aiuterà ad aprire link esterni direttamente da Sketch.

  • NSURL

  • URLWithString

  • NSWorkspace

  • SharedWorkspace

openLink () function
  • const {link} = config.names[name] – ottiene una stringa con lURL da config.json
  • const url = NSURL.URLWithString(link) – trasforma una stringa con URL in un oggetto con URL
  • NSWorkspace.sharedWorkspace().openURL(url) – si apre oggetto con URL nel tuo browser predefinito

parse ()

In questa funzione, facciamo corrispondere loggetto selezionato sulla tavola da disegno con un oggetto in config.json. Se corrispondono, la funzione restituisce la chiave con il collegamento URL.

parse () function

A mio parere, la parte più interessante qui è unespressione regolare sulla riga 13:

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

Utilizzando questa regex possiamo trovare e abbinare oggetti su diversi livelli di nidificazione. Nel nostro caso, loggetto è il nome del simbolo o il nome del gruppo in cui è posizionato il simbolo. Diamo uno sguardo alla struttura di nidificazione per il componente Chips e alle sue varianti nel Material Design Kit for Sketch:

Struttura di nidificazione per il componente Chip nel Material Design Kit for Sketch
Struttura della nidificazione per il componente Chips nel Material Design Kit for Sketch

E come questa nidificazione nel riquadro dei livelli può essere abbinata a config.json:

Come funziona la corrispondenza
Come funziona la corrispondenza

Per la nostra regex, non importa, a quale livello “desideri collegare il simbolo con la documentazione. La regola principale è che i nomi devono essere gli stessi su entrambi i lati. Inoltre, non importa quale notazione stai usando per il raggruppamento dei simboli, se è composta da cifre, lettere, trattino basso e così via. La profondità del non importa neanche lannidamento.

isValidType ()

Quando selezioni ect qualcosa sulla tavola da disegno ed esegue il plugin, questa funzione controlla il tipo di oggetto selezionato. E se loggetto ha uno dei tipi elencati, restituisce la risposta con il parametro true.

isValidType ( ) funzione

Solo un piccolo bonus con la possibilità di collegare non solo simboli ma gruppi e forme utilizzando le intestazioni di schizzo.

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

onRun()

Consentitemi di citare Mathieu Dutour, che è il creatore dello skpm.

skpm si aspetta anche che tu lo faccia export default function (context) {} invece di scrivere una funzione onRun di primo livello.

funzione onRun ()

config.json

Quindi. È ora di preparare un file JSON che conterrà collegamenti a documentazione esterna. Ho selezionato tre componenti dal Material Design Kit che testeremo: "Banner", "Input chip" e "Card".

config.json con dati reali

As puoi vedere, la struttura del file JSON è molto semplice. Non dimenticare che il nome delloggetto in config.json dovrebbe essere lo stesso di una parte del nome delloggetto in Sketch come ho menzionato sopra.

A proposito, possiamo usare non solo http:// o https:// ma anche zpl:// link che ci consentono di aprire qualsiasi sezione Zeplin.app.

manifest.json

Come ho già detto, questo è un file JSON che contiene metadati sul plugin, i suoi comandi e risorse. La struttura finale di manifest.json per il nostro plug-in ha il seguente aspetto:

La struttura finale di manifest. json

Altri parametri, anche come descrizione dettagliata di ogni parametro che stiamo usando in questo file, puoi trovare nella documentazione ufficiale.

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

Il resu lt

È ora di tornare a Terminal.app e creare un plug-in:

npm run build

Questo è tutto. Il plugin è pronto per essere installato e testato. Facciamo finalmente quello e guardiamo il risultato.

Funziona!
Funziona!

In conclusione

Siamo onesti. Questo è più un esperimento che un prodotto già pronto e, naturalmente, non è unimplementazione ideale. Il nostro obiettivo principale era quello di non dedicare molto tempo allo sviluppo e questo è il motivo per cui in alcuni luoghi abbiamo utilizzato soluzioni più semplici invece che corrette. Ma abbiamo utilizzato questo plugin nel lavoro quotidiano da più di un anno.E vorrei dire che è fantastico per i nuovi designer che sono recentemente entrati nel team e hanno appena iniziato a familiarizzare con i componenti che stai utilizzando.

Inoltre, vorrei dire grazie mille a Kirill Savelov e Dmitry Kozlov per la loro pazienza e aiuto.

Altre storie su Design System and Tools

  • (Design System, parte 2. Icone, font SVG, Gulp)
  • (Sistema di progettazione, parte 3. Strumenti fatti da noi che utilizziamo nel lavoro quotidiano)
  • (ffmpeg + ImageMagick. Converti video in GIF utilizzando Terminal.app in macOS)
  • (Come ottimizzare le immagini utilizzando macOS Terminal + TinyPNG CLI)

Link utili

Segui Acronis Design su