September 19, 2020

How I hand off designs to developers with Sketch y Zeplin

Delivering interface designs to developers is not an easy task. Many designers try to create guidelines manually to show font sizes, colors, components, space, margins, etc. This takes a lot of work, and keeps it updated is a nightmare.

Several applications serve to do this work in a more orderly and efficient way: Invision, Avocado, and Zeplin, to name a few. In this post, I will explain how I use Zeplin to handle this important task.

Table of content

• Why Zeplin?
• Connecting Zeplin and Sketch
  • Create a Zeplin Proyect
  • Installing the Sketch plugin
• What do developers expect from the designer?
• Five things that cannot be missing in your Sketch file
  • Consistent color palette
  • Use Text Styles
  • Consistent space
  • Use Symbols
  • Make the assets exportable
• Setting up the project in Zeplin
  • Export from Sketch
  • Adding and organizing content to Zeplin
    • Color Palette
    • Text Style Catalog
    • Spacing and Layout
    • Components
• Sharing
• Conclusion
• Questions?

Why Zeplin?

1. Automatically generate style guides
2. You can organize your components in sections and groups
3. Synchronize directly with Sketch through an official plugin
4. Download assets, images in 1x, 2x, and 3x also optimized SVG
5. Good CSS code with variables and relative units
6. Webapp available
7. Can be shared with the whole team
8. Has a free version

Connecting Zeplin and Sketch

After you create your account in Zeplin, the next step is to create a project.

Create a Zeplin Proyect

You can do it from the Mac or Windows app:

Installing the Sketch plugin

Once you install Zeplin the Sketch plugin should install automatically, but if you have any problems download the plugin and click double click. Once you have done this, you should have it available under the plugins menu in Sketch:

What do developers expect from the designer?

1. Typeface: family, size, weight, space between characters and line spacing
2. Spaces: margins, padding and distance between elements
3. Colors
4. Symbols or components
5. Assets: images, photos etc

Zeplin gives you all this and also generates very good CSS code for this.

Five things that cannot be missing in your Sketch file

To demonstrate how to use Zeplin I made a small design in Sketch, you can download here.

Consistent color palette

Zeplin automatically creates a color list of all the colors used in the Sketch document, so it is very important to be consistent with the use of colors.

Create your color palette, add them to the document, and always pick colors from that palette.

Use Text Styles

It allows you to store a set of styles and reuse them in different text layers within your designs, thus maintaining consistency in your UI, more information on how to use it in the Sketch documentation.

You can use any name in your ** Text Styles ** I separate them by where I use them, for example:

• Form / Label

• Button / Primary / Label o Button / Secondary / Label

• Typography / H1

• Typography / Body

Consistent space

I use 8px as base space. This means margins and paddings between the UI elements is based on multiples of 8 (8, 16, 24, 32, 40, 48, and so on).

Using an even number like 8 in space and size elements in your design makes scaling for a wide variety of devices much more comfortable and consistent. If you want to know more about this technique, I recommend this post: How to create stronger layouts with the 8pt Grid.

Use Symbols

The symbols in Sketch are a way to save and reuse common elements in your designs. Symbols are the most powerful tool in Sketch. For more information about symbols check the Sketch's documentation.

Make the assets exportable

By doing this, you will allow developers to download assets from Zeplin and even in different resolutions such as 1x, 2x, and 3x:

Then in Zeplin, the developer will be able not only to inspect the image but also to download the png or jpg files for 1x, 2x, and 3x and also HTML code for responsive image:

Setting up the project in Zeplin

Export from Sketch

Once you export all the artboards and pages from ** Sketch **:

Plugins > Zeplin > Export All > Artboards from all pages

and then go to your Symbol page, select all of them and

Plugins > Zeplin > Export Selected

With this, you make sure to export absolutely the entire Sketch document to Zeplin.

Adding and organizing content to Zeplin

If you open your project in Zeplin, you will see that there is an indicator in the "Styleguide" tab, which means that Zeplin found colors and text styles to add to your project.

Color Palette

With a single click, you add all the colors that Zeplin found in your document:

And it not only adds the colors, but it also generates the necessary CSS code, so the developer only has to copy and paste the code in his project:

You can also change the names and the order of the colors if you wish.

Text Style Catalog

As with colors, Zeplin detects the ** Text Styles ** that your Sketch document has and suggests adding them with a single click:

As with colors, it generates the CSS code so that developers only have to copy and paste:

By default it uses the names that come from Sketch but you can change them if you wish.

Spacing and Layout

In this section you can create "tokens" with the spaces that you use in your design. Since my design uses spaces of multiples of 8px I must create: 8, 16, 24, 32 and so on and I make sure to mark the checkbox to use measures rem:

Using relative measures (rems) not only generates the CSS code with those measures but when the developer is inspecting the design, he can see the name of the generated CSS variables, which will allow him to develop the page and the responsive and accessible components:

Components

In this section, the developer will be able to see all the Symbols that you created in your design in Sketch which serves as a guide for the reusable components that the developer needs to create and as a bonus CSS code with the color and space variables:

By default, they are all grouped in the same section but you can group them by section, select multiple components and then: Right click> New Section From Selection

You can also organize it by groups, select multiple components in a section Right Click> New Group from Selection

And you can also drag and drop components, groups and sections to organize better. By doing this, Sketch will automatically update all the components, and you organized them into Sections and Groups.

Sharing

Everything is ready to send to your developer or development team. In Zeplin's project dashboard, you click on the "Share" button:

In the popup, you can invite the developers by email (the email with which they registered in Zeplin) or send them the link for both the web and the app. Both links are private, and only users invited to the project have access to them.

Finally, Zeplin has the concept of "Scene" which is a public page where you can share your design with everyone, this is 100% public, but you only activate it if you wish, here is the link of this project: https://scene.zeplin.io/project/5f663baa271b6a1b54aba890

Conclusion

As you could see, Sketch and Zeplin allow you to pass in an orderly way and always in sync handoff the designs to the developers, including colors and fonts, sizes, spaces, etc.

Zeplin can so do much more. For example, a developer can link the code of its components, its repository, snippets, and even StoryBook with the Zeplin project. In the next post, I will do that process.