Top UI Design Tool: Use Zeplin for Pixel Perfect Specs Without Headaches

by: | Nov 19, 2015

I’ve lost not just hours but days tediously updating design documentation over the course of some app development projects. These specification documents are crucial — it’s the sacred source from which our iOS developers and Android developers take our designs and bring them to life.

In an agency environment like ours, we often work in compressed timeframes and manage multiple projects simultaneously. We must respond quickly to feedback about our designs as it flows from all directions during our agile process — from clients, product managers, and engineers themselves. These docs help keep our teams completely aligned.

This means each minor revision in UI or UX by our design team needs to be reflected in our documentation so that our engineers always have the latest. So, painfully, we’ve burned a lot of time manually updating these docs.

Updating these specs is incredibly monotonous — certainly not what I signed up for when I went into the “creative” app design profession. But there’s a more important cost than my boredom: Every minute I spend on revising documentation is a minute lost that I could be spending really nailing the visuals, experience, and interactions. And it’s these details that can turn a mundane app into a delightful experience.

Zeplin showed up and changed everything

Zeplin is becoming a top UI design tool that encourages a seamless and iterative collaboration between developers and designers.

Most importantly, Zeplin takes my design revisions and automatically updates the specification docs, so I spend less time administering and more time designing. Using the Zeplin plugin for Sketch to export an artboard automatically generates an interactive design specification document, guidelines, and assets. It even exports all the creative assets at just the right sizes for the target devices. You can invite team members to your project so they can leave comments and get all the information they need when they need it. And if you tweak a design, it’s no problem — export again, and all the specs are automatically updated. This streamlined and automated process makes life so much easier for everyone involved.

When we first started looking at Zeplin a year ago, it was still in beta with a very minimal set of features. So, we played around with it and were hopeful but couldn’t fully commit to adding it to our workflow. Since they’ve released v1.0 this summer, we’ve gone all-in. Now it’s become an indispensable part of our agile product development process.

How did Zeplin get it so right as a top UI design tool?

While using Zeplin has become part of our daily routine at ArcTouch, we’ve also been curious onlookers as the Zeplin product and business has taken shape. After all, we work with many startups — and are always interested in understanding the origins of great products. Here’s how we think Zeplin has taken its perch as a top UI design tool:

Zeplin Top Design Tool app assets

Zeplin released an MVP version before assets were exportable.

1. Product/market fit — It’s clear that the four-person team that started Zeplin really understands their target users. They’re laser-focused on the pain points of designers and developers that need to work with each other. It can be especially tricky since the app caters to those two very different users with different needs. But it balances those needs beautifully, making it easier for us designers to communicate with our developers and vice versa.

2. Iterating quickly — The first version of Zeplin we tried in late 2014 was very basic. There was blank space on the interface side with a friendly note about how an asset export feature would go there eventually. But that didn’t stop Zeplin from releasing its lean MVP — and getting lots of feedback from early users about what was really important to them. It turns out, asset export was at the top of the list. When they added it, we did a happy dance at ArcTouch. We’ve been blown away by how quickly they’ve released new features.

Zeplin Top Design Tool App Fun

Productivity and emoji can go together — and they do in Zeplin.

3. Friendly — A lot of productivity apps tend to be dry and lack any personality — even some targeted at those of us in the “creative industry.” But Zeplin has even managed to make the soul-sucking process of reviewing and redlining an app design somehow enjoyable. The interface is friendly and has just enough playfulness to make you grin when you use it.

4. Creating evangelists — If you have a winning product, users beget users. At ArcTouch, the design team was the first group of adopters — but we’ve since sold Zeplin to other stakeholders across the company in a sort of bottoms-up approach. First, we convinced our devs of the idea. Once both the designers and the developers bought in, it was easy to convince management we needed a paid account. I imagine this is how Zeplin is spreading in most companies. And then some of us love it so much, we go and write blog posts like this. (And no, I had no ulterior motive to writing this post other than sharing info about a service I love using).