Sfat rapid Cum să utilizați Zeplin pentru a genera ghiduri de stil

Ne-am referit anterior la modul în care designerii pot colabora cu echipa dev folosind Zeplin, dar mai este ceva mai mult; Zeplin este un instrument excelent pentru generarea ghidurilor stilului. Asigură-vă că echipa dvs. creează experiențe consistente, având un ghid online actualizat accesibil tuturor de oriunde. 

Acesta vă permite să salvați și redenumiți fonturile și informațiile de culoare și chiar să exportați CSS. Ghidul de stil și funcția de inspectare vor economisi mult efort atunci când va veni timpul pentru asigurarea calității (QA). Să vedem rapid cum funcționează!

Adăugarea de stiluri

Mai întâi, selectați un ecran din tabloul de bord al proiectului.

Apoi selectați elementul ale cărui proprietăți doriți să le adăugați la ghidul de stil (de exemplu: selectați Titlul H1 pentru a adăuga familia de fonturi, dimensiunea și culoarea sa).

Apoi, poziționați cursorul peste instrumentul de inspector și căutați pictograma Aa+ care vor apărea prin stilurile de text pentru a le adăuga la cartea de fonturi:

Titlul selectat și proprietățile sale în inspector

Adăugarea culorilor funcționează într-un mod similar. Dați clic pe pictograma de cădere de lângă fiecare pentru a crea paleta de culori:

Aceeași afacere, cu culori

Ghidul dvs. de stil

Pentru a vedea ghidul de stil în acțiune, selectați a doua filă Ghid stilistic În partea de sus a paginii:

Toate elementele adăugate anterior vor fi acolo. Acum puteți merge și dați fiecăruia un nume mai potrivit. Pentru a face acest lucru, plasați cursorul peste numele implicit al culorii și faceți clic pentru al modifica.

Notă: folosiți numele și convențiile de numire care sunt familiare întregii echipe):

Faceți același lucru pentru fonturi; actualizați-le cu un nume pe care designerii și distribuitorii să-l cunoască. Nu uitați că vă ajutați cu predarea dev, dar de asemenea creați un depozit pentru alți designeri care să le folosească.

Ceea ce veți încheia este ceva de genul:

Exportator

În acest moment, dacă sunteți parte din operațiunea dev, ați putea dori să copiați CSS din coloana din dreapta. Veți găsi că este disponibil în orice sintaxă preferați; Sass, LESS, Stylus sau CSS simplu.

Fiecare regulă poate fi selectată individual pentru descărcare, în timp ce Comandă + A va selecta totul pentru copiere și lipire. 

Concluzie

Nu mai există ghiduri de stil depășite undeva unde nimeni nu poate găsi, nu mai există lanțuri de e-mailuri pentru a afla cea mai recentă culoare; Zeplin vă poate ajuta întregul proiect de proiectare eficient. Noroc la productivitate!