Suggerimento rapido come utilizzare Zeplin per generare guide di stile

Abbiamo già spiegato in che modo i designer possono collaborare con il team di sviluppo utilizzando Zeplin, ma c'è un po 'di più in esso; Zeplin è anche un ottimo strumento per generare guide di stile. Consente al tuo team di creare esperienze coerenti grazie alla disponibilità di una guida online aggiornata accessibile a tutti da qualsiasi luogo. 

Permette di salvare e rinominare font e informazioni sui colori e persino esportare i CSS. La guida di stile e la funzione di ispezione risparmieranno molto quando sarà il momento del controllo qualità (garanzia di qualità). Vediamo rapidamente come funziona!

Aggiunta di stili

Innanzitutto, seleziona una schermata dal dashboard del progetto.

Quindi selezionare l'elemento di cui si desidera aggiungere le proprietà alla guida di stile (ad esempio: selezionare Titolo H1 per aggiungere la sua famiglia di caratteri, dimensioni e colore).

Successivamente, passa con il mouse sopra lo strumento di ispezione e cerca l'icona Aa+ che verrà visualizzato dagli stili di testo per aggiungerli al libro dei caratteri:

Titolo selezionato e sue proprietà nell'ispettore

L'aggiunta di colori funziona in modo simile. Fai clic sull'icona a forma di goccia accanto a ciascuno per creare la tavolozza dei colori:

Lo stesso affare, con i colori

La tua guida allo stile

Per vedere la tua guida di stile in azione, seleziona la seconda scheda Guida di stile in cima alla pagina:

Tutti gli elementi aggiunti in precedenza saranno lì. Ora puoi andare avanti e dare a ciascuno un nome più adatto. Per fare ciò, passa con il mouse sul nome del colore predefinito e fai clic per cambiarlo.

Nota: usa nomi e convenzioni di denominazione familiari a tutto il team):

Fai lo stesso per i caratteri; aggiornali con un nome che i progettisti e gli sviluppatori conosceranno entrambi. Non dimenticare che stai aiutando con il dev handover, ma anche creando un repository per altri designer da usare.

Quello con cui finirai è qualcosa del genere:

Esportazione

A questo punto, se fai parte dell'operazione dev, potresti voler copiare il CSS dalla colonna sul lato destro. Scoprirai che è disponibile in qualsiasi sintassi tu preferisca; CSS, LESS, Stilo o semplice CSS.

Ogni regola può essere selezionata singolarmente per il download, mentre Comando + A selezionerà tutto per copiare e incollare. 

Conclusione

Non ci sono più guide di stile obsolete salvate da nessun'altra parte, né più catene di e-mail per scoprire il colore più recente; Zeplin può aiutare l'intero team a progettare in modo efficiente. Saluti alla produttività!