Zeplin – Generating Style Guides

In the previous article “Why Zeplin?”, we covered how front-end developers can use Zeplin to collaborate with designers, and that is not over yet; Zeplin also comes with Styleguide to make your life much easier. The design and front-end team gets access to an upto-date online Style guide accessible to everyone from anywhere.

Once you login to the application, you will be able to save fonts, related typographies, and work with colour information such as adding and changing colors, and even export CSS. The inspect feature helps save a huge amount of time during the Quality Assurance.

Generating Styles

1. Choose a Project screen from the project dashboard.

2. Now, spot the element whose properties you choose to be added to the Styleguide. For example, Click the typeface H1 element to make your own font family, font size and font colour.

3. Next, by hovering on the inspector tool, inspect the icon Aa+ which appear next to the text to add them to the font book.

4. Changing typeface properties and adding colours works the same way. To generate your color palette, simply click the drop icon next to each one.

The Style Guide

To view your Style guide, just select the second tab titled ‘Styleguide’ at the very top next to Dashboard.

Elements that were added previously will be already seen there.

You may change the names of the elements by simply hovering over the color names and click them and change to a more appropriate one.

Let the names you give to the elements be friendly to the entire team.

Fonts also follow the same scenario; give a name to the font elements in such a way both the UI designers and developers are consented of.

Zeplin automatically detect the font family and other properties while it is imported at once. Just choose ‘Add all’ to add all of the fonts to the Font Book. There you can see the font-family, font size, font type and font color. These can be edited just by clicks or also can be removed by clicking the remove link to the right of the font.

You can also add any font to the screen by selecting the font portion in the screen and changing it at the right side tool panel. With no more step, this typography will also be added to your Font Book under your Style guide tab.

Exporting

After all the manipulations to the elements of the project, you might need to export a copy of the CSS by copying the CSS code from the right bar window. You have more options to copy the code: Sass, LESS, Stylus, or simply CSS. Each and every rule can be downloaded seperately or as a whole by selecting Control + A and simply copy paste them.

To export assets from Zeplin, choose the desired screen, and then you have two options; either select the asset on the screen or navigate to all of your assets available for download within the assets tab in the tool panel on the right side column. Selecting the asset in the screen itself picks the asset ready to download, and you can simply export the asset by selecting the export icon in the tool panel.