Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Style Guides
Webdesign

Suggerimento Veloce: Come Utilizzare Zeplin per Creare Guide di Stile

Difficulty:BeginnerLength:ShortLanguages:

Italian (Italiano) translation by Annarita Tranfici (you can also view the original English article)

In un precedente tutorial abbiamo visto in che modo i designer possono collaborare con il team degli sviluppatori utilizzando Zeplin. Tuttavia, non è finita qua. Zeplin si rivela uno strumento fantastico anche per creare guide di stile. Uno strumento che permetterà al vostro team di lavorare con coerenza, grazie a una guida online aggiornata e accessibile da tutti, in qualsiasi luogo e momento. 

Zeplin vi darà la possibilità di salvare e rinominare font e informazioni sui colori e, inoltre, esportare il codice CSS. La guida di stile e la funzionalità di ispezione vi faranno risparmiare un sacco di lavoro al momento dei test di qualità. Vediamo velocemente come funziona!

Aggiungere Le Proprietà di Stile

Prima di tutto, selezionate una schermata dal pannello del progetto.

Successivamente, selezionate l'elemento di cui volete aggiungere le proprietà alla guida di stile (per esempio: selezionate H1 title per aggiungere font, dimensione e colore del titolo).

Poi, portate il cursore sullo strumento di ispezione e cercate l'icona Aa+ che apparirà accanto allo stile del testo per aggiungerlo al font book:

selected titles properties in zeplin
Titolo e proprietà selezionati nel pannello di ispezione

Per l'aggiunta dei colori, dovrete procedere allo stesso modo. Cliccate l'icona a goccia accanto a ogni elemento per creare la vostra palette di colori:

same deal with colours
Stesso procedimento, con i colori

La Vostra Guida di Stile

Per vedere la vostra guida di stile in azione, selezionate la seconda tab Styleguide in cima alla pagina:

Tutti gli elementi che sono stati aggiunti precedentemente saranno qui. Ora potete procedere e assegnare a ognuno un nome più adatto. Per farlo, portate il cursore sul nome di default del colore e cliccateci su per modificarlo.

Nota: utilizzate dei nomi e delle convenzioni che siano familiari a tutto il team di lavoro.

Seguite lo stesso procedimento per i font; aggiornateli con un nome che risulti familiare ai designer quanto agli sviluppatori. Non dimenticate che state contribuendo per facilitare il trasferimento dei compiti tra gli sviluppatori, provvedendo, al contempo, alla creazione di un repository che possa essere utilizzato anche da altri designer.

Quando avrete finito, vi ritroverete davanti qualcosa del genere:

Esportazione

A questo punto, se fate parte del gruppo degli sviluppatori. potreste voler copiare il codice CSS trascritto nella colonna a destra. Lo troverete disponibile in qualsiasi sintassi preferiate: Sass, LESS, Stylus o semplice CSS.

Potete selezionare individualmente ogni riga di codice per il download; digitando, invece, Command + A selezionerete tutto il codice (di cui potrete poi fare copia-incolla).

Conclusione

Al bando le guide di stile obsolete e salvate in posti in cui nessuno riesce a trovarle; al bando le lunghe catene di email per recuperare l'ultimo colore scelto. Zeplin può aiutare il vostro team a progettare design efficaci in maniera efficiente. Un brindisi alla produttività!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.