After weighing the pros and cons of Sketch & Zeplin before start using them, it seemed like there were much more pros than cons, but you still have the same workload and difficulties to communicate with the development team. You find yourself wondering whether developers don’t know how to use a so simple tool like Zeplin.

You have just uploaded all your designs to Zeplin and suddenly you receive a message from one of the developers asking you to export all your icons and images and send them in a zip file. And you wonder, why don’t they download them directly from Zeplin? They told you to upload a screenshot to Zeplin because they cannot see the margins between the items… and you think, then what purpose does this tool serve?

If one of these things are happening to you, this article is for you. These are the 10 things that will help you to get the most out of your time and find a happy medium with developers.

1. Artboards size

iOS

• @1X: 375 x 667 px

Android

• mdpi: 360 x 640 px

Web

In which devices your product will be seen? Define the breakpoints and keep in mind the media queries that developers are going to use. Talk with your developer if you don’t know what it is.

• 1920 x 1080 px
• 1200 x 900 px
• 1024 x 768 px
• 320 x 480 px

2. How breakpoints work in responsive layouts

Upload an artwork to Zeplin with the responsive design (according to the breakpoints that you’ve already set), in other words, share how your design looks in different screen resolutions and devices.

You think it‘s clear that the design will be horizontally center at higherresolutions, such as 1920 x 1080 pixels, but developers are not mind readers.

Sharing the responsive design

3. Raster images size

Assign the maximum size to the raster images to avoid loss of quality when the design is displayed on screens with higher resolutions. For example, if you are working on an app for iOS, set the size of the images to @3x. If you don’t do this, you’ll get a message from the developer like the following:

Send me the large-size images because they look pixelated when I see the design on an iPhone 7.

4. Make exportable the icon group, but also the individual objects separately

Developers may be interested to export one or more of the elements of your icon, or the full icon. So make all items exportable separately and as group. Later in Zeplin, the dev team will be able to export individual assets as well as the full group.

5. Make exportable the images, not the text

Imagine a banner that contains an image, a text and a filter, and the filter cannot be built with CSS. Then, developers have to be able to export:

1. Only the image
2. Only the filter
3. Image + filter

6. Line-height

The line-height of the body text has to be 6px more than the current font-size, exception can be titles or overlay texts where you want to impact the user by empowering the graphics of an element.

Then, check the line-heights of the different text boxes. Keep in mind developer is going to select a text box and copy and paste the line-height. Set the same line-height in all of the text boxes to save coherence along your design.

7. Text box width

Set the width of a single line text to ‘auto’. This will allow your dev team to view the margin between the text and other elements of the interface, or the boundaries of the screen design.

8. Remove the area around the icon

Some of the icons that you import in Sketch have a surrounding area, which is good to export the asset, but is tough for developer when he tries to check the margin between objects in Zeplin. Remove this space to allow developers to be able to check the margin between the icon and the next element of the interface.

9. Button states

You’ve done your design in Sketch and you’ve uploaded the screens to Zeplin. Now comes up the developer’s question.

Which is the behaviour of the icon, text, button, what happens when the user does hovering, clicking…

Create a new artwork with all of the states for the different components that you are using in the interface, You can name it ‘Specs’.

10. How to organize the design screens in Zeplin

Zeplin allows you to organize the screens by tags. You can sort your screens designs by content (for example, the sections of your website) or functionalities.

Sort the screens following the user flow into each of the tags (section or functionality). That way, the first screen in Zeplin will be the first screen in your website or app.