Snabbtips Hur man använder Zeplin för att generera Style Guides

Vi har tidigare täckt hur designers kan samarbeta med dev teamet med Zeplin, men det är lite mer till det; Zeplin är ett bra verktyg för att generera stilguider också. Det gör att ditt team skapar konsekventa erfarenheter genom att ha en uppdaterad online guide tillgänglig för alla från var som helst. 

Det låter dig spara och byta namn på teckensnitt och färginformation, och till och med exportera CSS. Stilguide och inspektionsfunktionen sparar mycket ansträngning när det gäller QA (kvalitetssäkring). Låt oss snabbt se hur det fungerar!

Lägga till stilar

Välj först en skärm från projektpanelen.

Välj sedan det element vars egenskaper du vill lägga till i stilguiden (till exempel: välj H1-titel för att lägga till sin typsnitt, storlek och färg).

Häng sedan över inspektörsverktyget och leta efter ikonen Aa+ som kommer att visas med textstilarna för att lägga till dem i teckensnittsboken:

Vald titel och dess egenskaper i inspektören

Lägga till färger fungerar på ett liknande sätt. Klicka på drop-ikonen bredvid var och en för att bygga din färgpalett:

Samma sak med färger

Din stilguide

Om du vill se din stilguide i åtgärd väljer du den andra fliken Stil guide längst upp på sidan:

Alla tidigare tillsatta element kommer att finnas där. Du kan nu gå vidare och ge var och en ett lämpligare namn. För att göra detta, sväng över standardfärgnamnet och klicka på för att ändra det.

Notera: använd namn och namnkonventioner som är kända för hela laget):

Gör samma för teckensnitt; uppdatera dem med ett namn som designers och devs kommer att vara bekanta med. Glöm inte att du hjälper till med dev handover, men skapar också ett förråd för andra designers att använda.

Vad du kommer att sluta med är något så här:

exportera

Om du är en del av dev-operationen kanske du vill kopiera CSS från kolumnen till höger. Du hittar den tillgänglig i vilken syntax du föredrar. Sass, LESS, Stylus eller vanlig CSS.

Varje regel kan väljas individuellt för nedladdning, medan Kommando + A kommer att välja allt för kopiering och klistra in. 

Slutsats

Inga mer föråldrade stilguider sparas någonstans ingen kan hitta, inga fler kedjor av e-postmeddelanden för att ta reda på den senaste färgen; Zeplin kan hjälpa hela teamdesignen effektivt. Skål till produktivitet!