Zeplin

What is Zeplin?

Zeplin is a tool used to create smoother collaboration around design artefacts. You can quickly export your artboards to Zeplin via a Sketch plugin. It can also be used to host exported icons and imagery and to maintain a simple style library. It even has extensions to export code snippets in CSS, HTML, React Native, and other languages.

It Saves Time

The developers on teams I work with have told me how much time Zeplin saves them. Using Zeplin means they don’t have to hunt for the correct Sketch file. They don’t have to wait for Sketch to open. Since they link the appropriate Zeplin artboards to the corresponding stories in their backlog, accessing the needed designs is super-quick and easy for everyone.

Why should you use a style guide?

Using a style guide helps you save time and limit rework. Style guides are useful for both designers and developers as well as marketing teams.

For the designers, it helps with:

• keeping the product consistent.
• summarising all colours, font styles, components used throughout the app along with their states (idle, disabled, active, loading, success, error…) and variations (primary, secondary, icon only etc…).
• explaining to the devs each component behaviour without having to repeat it on each mockup.

For developers, it serves as:

• a reference of standard colour codes, font sizes, font weights to use in the code.
• a library of components with the variations and states they can have.
• a compilation of components behaviour so as not to forget any cases.

For marketers, it helps with:

• a way to communicate brand standards.
• a library of assets to use in marketing.

Other design tools

• Canva
• Crello
• Draftss
• Milanote
• PiktoChart
• Sketch
• Vizme
• Vizzlo