Zeplin: The Developer Side

If you Google “designer to developer handoff”, there’s a ton of results. The reason there are so many articles with titles like, “How to be a Designer that Developers Love” and “Designers: How to Make a Developer Fall in Love with You” is because for a long time designers didn’t have the greatest tools. Only recently have we seen apps specifically tailored to helping us design UI’s more efficiently (Sketch was launched in 2010). With that disruption in the Adobe-dominated market, we are getting new apps and tools faster than JS frameworks are being released. Yeah, that fast 🏃‍.

One of the newer apps to take-off is Zeplin. Zeplin’s whole purpose is to take care of designer-developer handoff. Unlike InVision, which is attempting to take-on the entire design process (InVision Studio), Zeplin is hyper-focused on this one goal.

“All we want is a world where designers and developers can communicate well, work together efficiently and live in harmony forever.”

So, with that said, lets dig into the features and look at what Zeplin has to offer developers.

I’ll assume you’ve created an account with Zeplin and have just received an invite from your designer to a project. Once you login to either the web app or the native app you will see your projects (if you have a ton, you can sort them).

I’ve redacted the project name and team members to save their souls.

From the projects home, double-click into your project to see all of the screens and get to the good stuff 😜.

With most apps, there are going to be a fair number of screens created by your designer. You’ll want a way to sort these to get to what you’re looking for. This is where tags come into play. If your designer is nice, they will add helpful tags to their screens. Here, I’ve added “admin” and “regular” tags to delineate between two different user’s screens. You can click on tags to filter and sort by either “Name” or “Last Updated” as well. In the right-hand panel, you can see some useful information like the density of the project, the type (Android, iOS, or Web), a way to copy the web link to the project, and a quick Slack integration option. The Slack integration is pretty nifty, letting you know when updates happen (it’s also configurable).

Slack notification of a screen being added to your project.

By double-clicking on a screen, you are taken to an inspect mode. Here, you can click on any element in the screen to get the relevant CSS, typeface info, colors, and measurements to get coding.

Inspecting a piece of text gives you what you need for that element alone.

Because I’ve selected a piece of text, I’ll get the relevant typeface size, line height, alignment, and color. There’s a handy quick-copy button to grab the text and there’s even a snippet of CSS you can use. Clicking on the CSS button, you’re given options to change the format to SCSS, LESS, Sass, and Stylus. You can also change the HEX values to RGB or HSL. To each their own.

Holding the option key (Mac) gives you percentages.

Clicking out of the chosen element, you’re given four tabs in the right-hand panel (information, colors, assets, notes). These tabs pertain to the screen as a whole.

The information tab lets you toggle the grid on and off.

The information tab (default tab) gives you some meta data (description, last updated, tags) on the screen, the ability to toggle the grid on/off (this can be incredibly helpful to a developer), get links to the screen, and download the sketch file itself.

The colors tab, although useful, is not exciting.

In the colors tab, you can see all of the relevant HEX values to that screen. You can also add a color to the styleguide (which we will cover later).

Grab relevant assets that have been made exportable in Sketch.

Opening the assets tab, you’ll see any assets that have been made exportable in Sketch. Here, I’ve made one of photos exportable and you can download the 3 PNG’s or JPG’s (these come in 1x, 2x, and 3x). If I had exported a vector, you would get 3 PNG’s and an SVG of that vector for download. Make sure to have a conversation with your designer about what you need them to export so that you have everything you need.

The notes tab holds conversations about that particular screen.

The notes tab holds the conversation around a screen. By command + clicking anywhere on the screen, you can add a note. This is incredibly helpful because you can ask pointed questions without having to describe the element in question. If the notes clutter the screen too much, you can toggle them on/off by clicking the “Notes 🐵” button on the bottom. For added pleasure, you can even use emojis 😸!

You can easily set SCSS variables in the styleguide.

Lastly, if you click back to the Dashboard and head into the Styleguide tab, you can see the color palette and font styles. These are generated by either adding the colors and fonts individually from each screen, or by the designer in Sketch adding text styles and document colors (just have the designer add these).

To wrap-up, Zeplin is a great tool for handoff. It is platform agnostic (allowing you to use the Mac, Windows, or Web app), free for one project, and intuitive. If you run into issues along the way, be sure to check out the Zeplin’s support page or even ask your designer(s) for help. ✌️