La creazione di un design system è un processo lungo e complesso.
Sketch è un ottimo strumento per farlo in quanto permette di creare e gestire vari componenti usando la metodologia Atomic Design che permette di velocizzare il flusso di lavoro. Ogni atomo va nominato in un certo modo seguendo una logica che permetta poi di trovarlo facilmente all’interno di un gruppo di atomi (ad es. Icons / Player / Play). Anche le molecole che creiamo con gli atomi vanno nominate in modo chiaro per essere poi trovate e inserite in vari contesti (per esempio le navbar, le card ecc.). Il design system è anche dinamico cioè si sviluppa insieme al design delle schermate che facciamo aggiungendo nuovi componenti.
Come riuscire a mantenere tutti gli elementi ordinati e aggiornati, visto che anche i nomi degli elementi possono cambiare in base alle nostre esigenze?
Ci vengono in aiuto alcuni fantastici plugin Sketch utili per la gestione del design system e che ci fanno risparmiare ore e ore di lavoro. Nei prossimi paragrafi vi presento tre tra i molti presenti nella pagina ufficiale di Sketch.
Buona lettura.
Rename It
Il primo plugin, che ormai ritengo indispensabile, è Rename It. Il grande vantaggio di questo add-on è che permette di rinominare in due secondi interi gruppi di atomi e molecole. Immaginate di dover introdurre una modifica nel naming nel gruppo di componenti a sinistra:
Basta selezionarli, aprire il plugin (ovvero la classica funzionalità “Trova e sostituisci”), inserire la parte del nome che accomuna tutti gli elementi (in questo caso la parola “Player”) e il nuovo nome (in questo caso “Player/Pop-up/iPhone”). Vedremo l’anteprima dei nomi che verranno modificati, e una volta controllato che tutto sia corretto potremo cliccare “Rename” per concludere le modifiche.
Immaginatevi ora, in un progetto con molti componenti, l’utilità di questo plugin per rinominare decine di elementi insieme.
Styles Generator
Una volta che abbiamo rinominato correttamente anche i font e i colori possiamo creare degli stili che sono fondamentali in un buon design system. Ci sono principalmente 2 modi per farlo:
- Aggiungere gli stili manualmente, uno ad uno, scrivendo il nome di ogni stile.
- Utilizzare il plugin Styles Generator. Basta selezionare tutti i font e colori da cui vogliamo creare gli stili e avviare il plugin che farà tutto il resto applicando i nomi che abbiamo modificato precedentemente con Rename It. L’animazione seguente mostra quanto appena scritto.
Symbol Organizer
Il terzo plugin che vorrei consigliarvi è Symbol Organizer. Man mano che creiamo nuovi componenti in Sketch la nostra pagina “Symbols” sarà sempre più ricca di elementi e disordinata, con il rischio concreto di investire più tempo nella ricerca e/o modifica dei componenti stessi. Questo plugin è una sorta di “bacchetta magica”: in un batter d’occhio permette di ordinare tutti i simboli e le artboard a seconda del nome, in ordine alfabetico o divisi in gruppi e colonne. Sarà sicuramente più semplice ricercarli e verificare la coerenza del nostro design.
Date un’occhiata al mio file in Sketch prima e dopo aver utilizzato Symbol Organizer…è tutto molto più ordinato!
