We previously covered how designers can collaborate with the dev team using Zeplin, but there’s a bit more to it; Zeplin is a great tool for generating style guides too. It makes sure your team creates consistent experiences by having an up-to-date online guide accessible to everyone from anywhere.
It allows you to save and rename fonts and colour information, and even export CSS. The style guide and the inspect feature will save a lot of effort when the time comes for QA (quality assurance). Let’s quickly see how it works!
Adding Styles
First, select a screen from the project dashboard.
Then select the element whose properties you want to add to the style guide (for example: select H1 title to add its font family, size and colour).
Next, hover over the inspector tool and look for the icon Aa+ which will appear by the text styles to add them to the font book:
Adding colours works in a similar way. Click the drop icon next to each one to build your colour palette:
Your Style Guide
To see your style guide in action, select the second tab Styleguide at the top of the page:
All the previously added elements will be there. You can now go ahead and give each one a more suitable name. To do this, hover over the default colour name and click to change it.
Note: use names and naming conventions which are familiar to the entire team):
Do the same for fonts; update them with a name which designers and devs will both be familiar with. Don’t forget you’re helping with the dev handover, but also creating a repository for other designers to use.
What you’ll end up with is something like this:
Exporting
At this point, if you’re part of the dev operation, you might want to copy the CSS from the right-hand side column. You’ll find it’s available in whichever syntax you prefer; Sass, LESS, Stylus, or plain CSS.
Each rule can be individually selected for download, whilst Command + A will select everything for copying and pasting.
Conclusion
No more outdated style guides saved somewhere no one can find, no more chains of emails to find out the latest colour; Zeplin can help your whole team design efficiently. Cheers to productivity!
