10 Things to Keep in Mind Working with Sketch & Zeplin. Developers Will Thank You!
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:
Only the image
Only the filter
Image + filter
6. Line-height
The line height of the body text has to be 6px more than the current font size, exceptions can be titled 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 screen 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 on your website or app.
What more?
Don’t waste your time creating a style guide, you can add the colors and typographies directly from Zeplin (Styleguide tab).
PS: Don’t forget to invite the development team to your Zeplin project!
Join my Skillshare class about how to build prototypes in inVision using Sketch & Craft plugin for more tips.
Hope this helps!