La versione 47 di Sketch ha visto la tanto attesa introduzione di Librerie che consente di sincronizzare i simboli a livello globale su tutti i file di Sketch. I sistemi di progettazione traggono particolare vantaggio da una funzionalità come questa: essere in grado di avere un modo accessibile di portare risorse di sistema di progettazione garantendo al contempo che siano aggiornati per tutti è il sogno di un designer che diventa realtà. Dopo aver provato di tutto, da Craft di InVision alla creazione del nostro plugin Sketch, siamo stati felici di averlo finalmente incluso in Sketch come funzionalità nativa. Ecco alcune delle decisioni a cui siamo arrivati ​​e delle lezioni che abbiamo appreso quando abbiamo inserito il nostro sistema di progettazione in una libreria.

Obiettivi della nostra biblioteca

Per comprendere alcune delle idee che sono state prese nelle nostre decisioni, ecco una breve panoramica di quali fossero gli obiettivi con la nostra Biblioteca:

  1. Uno sportello unico per i nostri designer. Solo un file che potevano inserire e avere le ultime novità che il nostro sistema di progettazione ha da offrire.
  2. Il più vicino possibile a una corrispondenza 1: 1 con i nostri componenti codificati, indipendentemente dalla piattaforma, sia visivamente che strutturalmente.
  3. Facile da mantenere. Gli aggiornamenti o le aggiunte dei componenti dovrebbero essere semplici in modo che i progettisti ottengano le ultime novità senza attendere molto.

Nidificato vs. Singolo

In questo eccellente video di Sketch Together, Pablo Stanley parla di come nidificare le biblioteche. In questo modo è possibile dividere elementi come colori e componenti in diversi file di schizzo e quindi fare riferimento a simboli in tali file. Se si aggiorna un simbolo in uno dei file, si propagherà comunque agli altri file che fanno riferimento a quel simbolo.

L'altra opzione è mettere tutto in un unico file. Non ottieni la netta separazione che ti danno avere file di Sketch separati, ma per i nostri scopi, questo alla fine ha funzionato meglio perché:

  • La manutenzione è più semplice poiché abbiamo solo bisogno di aprire un file quando eseguiamo aggiornamenti alla libreria (obiettivo n. 3).
  • Richiede ai nostri progettisti di aggiungere solo una libreria (obiettivo n. 1).

Utilizzo di Pages for Organization

Scaricare tutti i nostri colori, icone, componenti e così via in un unico file non è la prima cosa che viene in mente quando si pensa "facile da mantenere". Fortunatamente, puoi dividere la tua libreria in pagine all'interno di Sketch. Ecco una carrellata di come abbiamo fatto il nostro:

Mantenere le cose separate da Pages rende anche facile una grande libreria.

Le parti principali del nostro sistema di progettazione (Colore, Tipo, Icone) sono in alto e quindi abbiamo semplicemente elencato i nostri componenti in ordine alfabetico. Vedrai in fondo altre due pagine. La pagina di test, se non l'hai indovinata, è una pagina in cui possiamo testare rapidamente tutti i nuovi simboli che aggiungiamo. L'anteprima della libreria utilizza l'omaggio gratuito di Sketch Hunt per dare alla nostra libreria un'immagine di anteprima personalizzata quando vai ad aggiungere la libreria nelle preferenze di Sketch (questo è ora supportato per impostazione predefinita in Sketch a partire dalla v48).

Simboli di denominazione

Le voci nel menu Simboli possono essere raggruppate in base al nome dei simboli. Separando le cose con un / le inserisce in un nuovo gruppo di menu. Usando l'organizzazione che abbiamo delineato sopra e sapendo come le cose sono raggruppate dal lato componente, siamo andati con ciò che sembrava più logico; per qualcosa come i pulsanti, che assomiglia a questo:

Il che crea un menu simile a questo (modificato un po 'per renderlo più facile da vedere):

Aggiungere colore

Attualmente, Sketch non ha modo di condividere i colori con la funzione Librerie. Certo, ci sono plugin che ti consentono di creare tavolozze condivisibili, ma questo è andato contro i nostri obiettivi di sportello unico e facile manutenibilità. Invece, abbiamo creato i nostri colori usando solo semplici rettangoli vecchi.

Usiamo i nostri simboli di colore come elemento principale per i nostri altri componenti.

Sebbene non sia l'ideale, non è una seccatura per i nostri progettisti poiché la maggior parte delle loro esigenze di colore dovrebbe essere gestita sulle sostituzioni dei simboli di ciascun componente. Inoltre, ci consente di utilizzare quei rettangoli colorati per costruire quei componenti reali (spiegati di seguito). Se eseguiamo un aggiornamento del colore, aggiornerà ogni componente che utilizza quel simbolo di colore.

I nostri colori di livello principale (come marchio, utilità, colori di sfondo) sono contenuti nella pagina Colori e raggruppati di conseguenza. I colori specifici di un componente vanno nella pagina di quel componente per mantenere quella facilità di manutenzione. Possiamo ancora creare simboli rettangolari che facciano riferimento ai colori di livello principale, se necessario, il che rende gli aggiornamenti in seguito molto più rapidi.

Questi colori di utilità possono essere portati in qualsiasi altra pagina del componente, se necessario: pulsanti, toast, icone, ecc.

L'ultima parte della pulizia della casa che dovevamo fare era assicurarsi che quando si apriva una sostituzione del colore, non si era fatto saltare in aria con un enorme elenco di colori. Per ovviare a questo, abbiamo semplicemente ridimensionato quei rettangoli di colore con incrementi di 10, poiché il raggruppamento delle sostituzioni di simboli si basa sulla dimensione. Ad esempio, i colori del marchio sono 20px per 20px, i colori di utilità sono 30px per 30px e così via. Ora, quando un designer vuole passare a un diverso colore dell'icona, sta vedendo solo i colori dell'icona e non tutti gli altri colori nella Libreria.

Aggiunta di icone

Le icone sono state gestite in modo simile ai colori in quanto li abbiamo raggruppati logicamente in base al loro utilizzo (navigazione, sport, tipi di file, ecc.). Per consentire ai designer di alternare i diversi colori che abbiamo per le icone, abbiamo semplicemente aggiunto quei colori come maschere.

Ogni icona include un segno di colore dal nostro elenco di colori dell'icona.

Ricorda che dimensionare le cose in modo simile le fa apparire insieme nel menu di sostituzione. Con questo in mente, abbiamo dimensionato i nostri colori delle icone allo stesso modo in modo che quando un designer cambia colore, vedano solo i colori disponibili per le icone.

Una sfida che abbiamo dovuto affrontare è stata gestire le tre diverse dimensioni in cui entrano le nostre icone. Per ovviare a questo, abbiamo semplicemente creato tre simboli ciascuno alla dimensione corretta con un'icona predefinita (il nostro logo). Poiché stiamo usando un simbolo, un designer può ora scegliere un'icona diversa dal pannello Sostituzioni: tieni presente che puoi ridimensionare un simbolo inserito in base al contenuto del tuo cuore senza influire su ciò che vedi nel riquadro Sostituzioni. Con molte icone, può diventare un elenco piuttosto nodoso, soprattutto rispetto al modo ben categorizzato di fare icone sopra. Non abbiamo molti casi in cui è necessaria un'icona in qualcosa di diverso dalla dimensione media, quindi questa soluzione alternativa funziona per noi.

Lo stesso simbolo, appena ridimensionato.

Aggiunta del tipo

Questa è un'altra area in cui la funzione Librerie non soddisfa pienamente le nostre esigenze. Modificare il testo nel pannello Sostituzioni può essere un po 'una seccatura considerando la dimensione della casella di testo. Rendi i tuoi colori molto simili a quelli iniziali, ci sono plugin di Sketch che possono gestire l'inserimento di Tipo nei tuoi documenti di Sketch come stili di testo, ma vanno contro i nostri obiettivi di facile manutenzione e one-stop shop.

Alla fine abbiamo deciso di creare simboli comunque. I designer possono utilizzare la casella di testo nel pannello Sostituzioni o semplicemente Stacca dal simbolo e modificare il testo come farebbero normalmente. Inoltre, a partire da Sketch v48, è possibile ingrandire la casella di testo nel pannello Sostituzioni aumentando la quantità di testo nel simbolo per impostazione predefinita.

La quantità di testo nel simbolo determina l'ampiezza di una casella di testo che si ottiene nel pannello delle sostituzioni.

C'è un'ultima cosa che dobbiamo affrontare con il testo e questi sono i colori. Con il nostro testo, è già impostato correttamente nel componente. Ma che dire di un ambiente diverso, temi o cose come gli stati di errore? Per questo, ci affidiamo nuovamente al dimensionamento del simbolo per determinare cosa si presenta nelle sostituzioni. Per qualcosa come un'etichetta del modulo, ci assicuriamo solo che quei particolari simboli di testo abbiano tutte le stesse dimensioni.

Etichette colorate diverse della stessa dimensione rendono facile per i nostri progettisti scegliere tra i colori consentiti per qualcosa di simile alle etichette dei moduli.

Aggiunta di componenti

Dopo aver creato tutte le cose difficili, aver reso pulsanti, modali, toast, ecc., Era in realtà piuttosto semplice. Per qualcosa come Modals, portiamo semplicemente il giusto colore di sfondo, aggiungiamo un simbolo di tipo con un buon messaggio predefinito e infine rilasciamo l'icona Chiudi. A questo punto, ci stiamo avvicinando molto alla creazione di simboli come faremmo con React.

E questo è intenzionale poiché vogliamo che i nostri simboli siano il più vicino possibile a una corrispondenza 1: 1 dei nostri componenti. A tal fine, chiamiamo il simbolo sovrascrivendo esattamente come nominiamo i nostri oggetti di scena nel codice. Per rendere ancora più chiaro ai nostri progettisti questi sono oggetti di scena, manteniamo anche i nomi in minuscolo. Tutto ciò che in realtà non fa parte del codice del componente (come i blocchi di riempimento di cui discuteremo di seguito), abbiamo titolo del caso. Mantenere le sostituzioni dei simboli denominate in modo identico ai puntelli dei componenti è un ottimo modo per collegare la discussione di designer / sviluppatori quando arriva il momento di costruire le interfacce.

Quando designer e sviluppatori parlano, dovrebbero usare la stessa lingua. La nostra denominazione di override di Sketch corrisponde alla denominazione nei componenti codificati effettivi.

Suggerimenti e trucchi

Ecco alcune altre cose che abbiamo imparato mentre stavamo costruendo componenti che potrebbero aiutarti:

  • Semplifica le cose e scarica il plug-in Sketch Symbol Organizer. Puoi organizzare i simboli in ordine alfabetico e raggruppare le cose in base al nome. Inoltre, spazerà anche le cose come vuoi. Un grande risparmio di tempo.
  • L'ordine dei livelli nei simboli è importante. Il modo in cui sono ordinati nel simbolo è come verranno ordinati nel pannello Sostituzioni.
  • Vale la pena ripetere qui per la milionesima volta che contano anche le dimensioni dei livelli. Ricorda: è così che cose come sfondi, tipo, icone, ecc., Possono essere raggruppate.
  • Molto probabilmente avrai simboli che i tuoi designer non hanno davvero bisogno, ma sono importanti per la composizione dei tuoi componenti. Abbiamo deciso di creare una voce di menu _Building Blocks (il carattere di sottolineatura lo mantiene ancorato al fondo) che funge un po 'da cassetto spazzatura. Questi elementi rimangono nella pagina del rispettivo componente, ma sono denominati con il prefisso _Building Blocks per garantire che tutti vadano sotto quella voce di menu.
Il prefisso degli elementi che non si desidera vengano mostrati, come abbiamo fatto con
  • Lo schizzo attualmente non gestisce molto bene il ridimensionamento del simbolo nidificato. Per ovviare a questo, di solito creiamo quelli che chiamiamo "blocchi di spaziatura". Un esempio di dove questo potrebbe essere necessario sono i pulsanti; si inserisce un pulsante, si assegna più testo rispetto al valore predefinito e improvvisamente il padding non funziona più. Per questo, abbiamo un simbolo di blocco spaziatura mostra / nascondi che scende in "blocchi" semitrasparenti. Il designer ora deve solo ridimensionare il pulsante fino a quando i blocchi non si allineano.
Questi blocchi possono essere aggiunti a qualsiasi componente per ridurre le congetture quando si tratta di ridimensionare.

Rendendolo disponibile

Una volta completata la biblioteca, avevamo bisogno di un modo per assicurarci che fosse sempre aggiornato per i nostri designer. Usiamo Google Drive, quindi quello era il posto ovvio per dirlo. Abbiamo bloccato l'accesso al file della libreria stesso per garantire che non si verificassero eliminazioni o aggiunte non necessarie e quindi abbiamo redatto una guida introduttiva.

Una delle funzionalità della nostra guida introduttiva sono le istruzioni per la configurazione di Sketch Runner. Anche se questo è un po 'contrario al nostro obiettivo di essere uno sportello unico, scopriamo che i vantaggi dell'utilizzo di questo plugin vanno ben oltre il semplice utilizzo con la nostra libreria: è uno strumento davvero prezioso.

Con Sketch Runner, puoi inserire rapidamente simboli semplicemente digitandone il nome, che per molte persone è un po 'più veloce rispetto ai menu. Consigliamo ai nostri progettisti di disattivare la Ricerca fuzzy nelle opzioni e di aggiungere "_Building Blocks" al prefisso ignorato nelle Impostazioni.

Ecco le nostre impostazioni consigliate per Runner.

Sin dal lancio, abbiamo ricevuto molti feedback su quanto tempo è stato risparmiato utilizzando la libreria. Non vediamo l'ora che Sketch continui a apportare miglioramenti in futuro per renderlo uno strumento ancora più impressionante.