Rask Tips Hvordan bruke Zeplin til å generere stilveiledninger

Vi har tidligere dekket hvordan designere kan samarbeide med dev teamet med Zeplin, men det er litt mer til det; Zeplin er et flott verktøy for å generere stil guider også. Det sørger for at laget din skaper konsekvente opplevelser ved å ha en oppdatert nettguide som er tilgjengelig for alle fra hvor som helst. 

Den lar deg lagre og endre navn på skrifter og fargeinformasjon, og til og med eksportere CSS. Stilguide og inspeksjonsfunksjonen sparer mye arbeid når tiden kommer til QA (kvalitetssikring). La oss raskt se hvordan det fungerer!

Legge til stiler

Velg først en skjerm fra prosjektpanelet.

Velg deretter elementet hvis egenskaper du vil legge til i stilguiden (for eksempel: velg H1 tittel for å legge til fontfamilien, størrelsen og fargen).

Deretter svinger du over inspektørverktøyet og ser etter ikonet Aa+ som vises ved tekststiler for å legge dem til skriftboken:

Utvalgte tittel og dens egenskaper i inspektøren

Legge til farger fungerer på en lignende måte. Klikk på drop-ikonet ved siden av hver for å bygge fargepaletten din:

Samme avtale, med farger

Din stilguide

Hvis du vil se stilveiledningen din, velger du den andre kategorien Stilguide øverst på siden:

Alle de tidligere lagt elementene vil være der. Du kan nå gå videre og gi hverandre et mer passende navn. For å gjøre dette, svinger du over standardfargenavnet og klikker for å endre det.

Merk: bruk navn og navnekonvensjoner som er kjent for hele laget):

Gjør det samme for skrifttyper; oppdater dem med et navn som designere og devs vil både være kjent med. Ikke glem at du hjelper med dev overlevering, men også opprette et lager for andre designere å bruke.

Det du vil ende med er noe slikt:

eksportere

På dette tidspunktet, hvis du er en del av dev-operasjonen, vil du kanskje kopiere CSS fra kolonnen til høyre. Du finner det tilgjengelig i hvilken syntaks du foretrekker; Sass, LESS, Stylus, eller vanlig CSS.

Hver regel kan velges individuelt for nedlasting, mens Kommando + A vil velge alt for å kopiere og lime inn. 

Konklusjon

Ingen mer utdaterte stilguider lagret et sted ingen kan finne, ikke flere kjeder med e-postmeldinger for å finne ut de nyeste fargene; Zeplin kan hjelpe hele teamdesignet effektivt. Skål til produktivitet!