Snelle tip Zeplin gebruiken om stijlgidsen te genereren

We hebben eerder besproken hoe ontwerpers kunnen samenwerken met het ontwikkelaarssteam met Zeplin, maar er is meer aan de hand; Zeplin is ook een geweldig hulpmiddel om ook stijlgidsen te genereren. Het zorgt ervoor dat uw team consistente ervaringen genereert door een actuele online gids toegankelijk te maken voor iedereen, waar u ook bent. 

Hiermee kunt u lettertypen en kleurinformatie opslaan en hernoemen, en zelfs CSS exporteren. De stijlgids en de inspectiefunctie zullen veel moeite kosten wanneer de tijd rijp is voor QA (kwaliteitsborging). Laten we snel zien hoe het werkt!

Stijlen toevoegen

Selecteer eerst een scherm in het projectdashboard.

Selecteer vervolgens het element waarvan u de eigenschappen wilt toevoegen aan de stijlgids (bijvoorbeeld: selecteren H1 titel om de lettertypefamilie, -grootte en -kleur toe te voegen).

Plaats vervolgens de muisaanwijzer op het infovenster en zoek het pictogram Aa+ die worden weergegeven door de tekststijlen om ze toe te voegen aan het lettertypeboek:

Geselecteerde titel en de eigenschappen ervan in het infovenster

Het toevoegen van kleuren werkt op een vergelijkbare manier. Klik op het drop-pictogram naast elk pictogram om uw kleurenpalet te maken:

Dezelfde deal, met kleuren

Uw stijlgids

Selecteer het tweede tabblad om uw stijlgids in actie te zien Stijlgids bovenaan de pagina:

Alle eerder toegevoegde elementen zullen er zijn. U kunt nu doorgaan en elk een geschiktere naam geven. Om dit te doen, zweeft u over de standaardkleurnaam en klikt u om deze te wijzigen.

Notitie: gebruik namen en naamgevingsconventies die bekend zijn bij het hele team):

Doe hetzelfde voor lettertypen; update ze met een naam waarmee ontwerpers en ontwikkelaars vertrouwd zijn. Vergeet niet dat je helpt met de dev-handover, maar ook een repository aanmaakt voor andere ontwerpers om te gebruiken.

Waarmee je eindigt, is zoiets als dit:

Exporteren

Als je op dit moment deel uitmaakt van de dev-bewerking, wil je misschien de CSS kopiëren uit de rechterkolom. U zult zien dat het beschikbaar is in elke gewenste syntaxis; Sass, LESS, Stylus of gewone CSS.

Elke regel kan afzonderlijk worden geselecteerd om te downloaden, terwijl Command + A zal alles selecteren voor kopiëren en plakken. 

Conclusie

Geen gedateerde stijlgidsen meer opgeslagen die niemand kan vinden, geen kettingreacties meer om de nieuwste kleur te vinden; Zeplin kan uw hele team efficiënt ontwerpen. Proost op productiviteit!