Using Zeplin for Better App Design Specs

Design Development Process Tools

App design specifications ensures an app designer's interface design and vision translates properly from the design to the development process. Yet design speccing is as tedious and time intensive as it is critical. It's prone to error, so we've tried a number of tools meant to simplify and speed up the speccing process. Many of those tools, however, fall short of making the speccing process easier and more accurate.

As part of Savvy's design team, I've been a big part of the way we've changed our speccing process over the last year. Our new method is a much more interactive and collaborative approach that uses a tool called Zeplin. This new approach completely perfects the accuracy of our speccing and saves us time and money. Here's how we've overcome speccing challenges to make sure our vision survives the speccing process.

What is App Design Speccing?

Design speccing includes identifying colors, X and Y values, fonts, text weights, distances, positioning, and a number of other specific asset characteristics. We use these characteristics to translate the feel of the app into measurements we then use for coding the actual app. Each asset carries a number of specific characteristics that need to be recorded. Trying to transfer all this information to our developers can be a headache, to say the least.

It's critical to make sure that all specs are accurate to their designs. Inaccurate specs mean that developers either have to rely on guesswork when building the app or rely on going into the design source to answer their questions. In doing so, they may miss the little details that make up our vision. For example, I might have a very specific reason why the text is bold in one area or an image isn't exactly centered on a screen. Developers don't necessarily understand my reasoning and might overlook those details if they just eyeball the design.

We start the speccing process as we move into having our designs locked down. Speccing can take significant time depending on the extensiveness of the designs. We used to budget out multiple days or weeks just for speccing. Because it was a manual process that's prone to error, we tried to use use plugins and tools for Photoshop in particular. Even with the help of those tools, the process remained time intensive and often enough, inaccurate.

Most App Speccing Tools Don't Fix the Problems

We didn't have much success with most of the speccing tools we tried. Some of the more commonly used speccing tools export specs to a flat image, which makes trying to iterate or make any number of small changes to a design difficult once the specs have already been exported. This means that when we use these tools, speccing is usually the last thing we do. If we change anything, there's no quick way to have it re-specced.

Markly is the best speccing tool we've encountered for Photoshop. It pops open a new window that allows to you click elements and measure them to other elements or document bounds. Unfortunately, it's not always accurate and is sometimes sluggish. While it excels at creating flat image mockups, that approach still falls short when we need to quickly iterate designs.

An example of what speccing looks like using Pixel Measure.

An element can have a ton of different things you need to know about it. In specKing, a speccing plugin for Photoshop, you can choose where all this information goes and what exactly you're measuring, but it's often a clunky, inaccurate experience. Many speccing tools for Photoshop can create awkwardly placed blocks of text that you have to move around and draw lines directing specs to their respective assets. Other tools are even more restrictive in the types of spec details you can capture. With Sketch Measure you can only measure asset distances. Even then, Sketch Measure doesn't have a good way of capturing half pixels and works only some of the time. Sketch Measure has since been abandoned since Sketch now has a native measuring tool. Pixel Measure is another option for Photoshop speccing. It's limited, however, to measuring distances and speccing fonts.

How Zeplin Simplifies the Design Specs Process

We were excited to try out Zeplin during its beta in February 2015. Since then we've integrated it into our app creation process thanks to the quick and accurate way it handles speccing. Zeplin is a plugin and web app that works solely with Sketch. It compiles all aspects of the selected elements into an interactive specifications sheet that simplifies the handoff between our design team and the developers.

In Zeplin's mac app you can select assets to see their specs appear on the screen and in the sidebar.

It’s so easy to spec with Zeplin. Once you've installed the Sketch plugin, you can export any number of screens by selecting the Artboard(s) you wish to export and hitting the hotkey (Command+E). You then select the project you want to add your specs to and click import. The Artboards are then quickly added to the Zeplin web app where you can interact with the assets in each screen to see their specs. The Guideline panel allows you to further note colors and fonts from your screens. This is a handy way for developers to keep track of the colors and fonts used in the project and even export the colors into a file as Objective C or Swift. Zeplin also handles asset exporting to PNG and PDF for different device sizes.

Unlike other speccing tools, Zeplin's specs are very accurate partly because it works with Sketch, a vector-based design tool made specifically for UX and UI designers. Sketch's reliance on vector shapes allows Zeplin to easily find the absolute X and Y values of assets, as well as their colors and sizes. Photoshop, on the other hand, isn't able to accurately measure the bounds of an object or position on its own because it relies on layers. Objects made up of several layers can prove a challenge to spec in Photoshop.

Interactive vs. Flat Speccing

The best thing about using Zeplin in our speccing process is that it provides a living, breathing, interactive specification sheet. Seeing an asset's specs is a simple matter of hovering over an element in the web app. We no longer provide our developers with clunky, difficult to understand, flat specs that take forever to generate. With Zeplin, changes are almost instantaneously reflected. For example, we can change the button heights and immediately export that out and have a conversation with a developer about it. This means we no longer have to wait until the very end of the design process to give specs to our developers. Instead, we can bring in developers earlier in the process and iterate as much as we want.

Zeplin's interactive approach also provides more ways for us to collaborate with developers about the app's specifications. The tool's annotation features allow us to comment on specific parts of the app and use this work as a roadmap. It also helps clear up any potentially confusing parts of the speccing process and keep a record of these notes that is available for anyone to review as needed. While we don't use it, Zeplin offers Slack integration for additional collaboration that may make sense for remote or more distanced teams.

What Can Zeplin Do Better?

So far Zeplin has been very responsive to feature suggestions. They added the ability to export multiple Sketch Artboards after users requested that feature. Anyone can add their own suggestions and vote for recommended features on Zeplin's forum page.

We echo the need for enabling font styles from Sketch, which is one of the top voted feature requests on that site. Right now we designate font styles in Sketch but don't have a way to organize those same styles in Zeplin to help out our developers. We'd also like to see an auto export that doesn't require us to slice in Sketch and native mac notifications for when a new screen or comment is added.

Zeplin's fun approach to color naming conventions.

We were big fans of Zeplin's earlier color palette naming conventions which featured amusing names like “sherpaBlue,” “turbo,” keyLimePie,” and “melrose” instead of their more boring counterparts like “pinkishRed.” We suggest bringing back the old color naming conventions as well as adding a color search function that would allow us to search to see which screens a specific color (maybe “amaranth”) is being used in. This is particularly useful for when we accidentally grab a different hex value than we intended and need to find all the screens where that color was used in order to go back and fix the value.

Concluding Note

This interactive approach to speccing allows us to spend more time on what's important -- creating beautiful and functional designs and making sure users have the best possible app experience. We now have the tools to quickly and accurately translate the vision of an app into the measurements needed to code the app. We're looking forward to seeing the features Zeplin adds to make speccing even more enjoyable and who else steps up to improve on the process.

Joe is a California-grown pixel pusher who drinks large amounts of Diet Coke.

You made it this far so...