Socially Bright | Mooring the Zeplin
We work with a wide range of advertising agencies and brands to help bring their digital dreams to life. As a dedicated, specialist and flexible part of your team we offer strategy, creative and production across all native and web technologies. We develop mobile, web and social apps that work on every last browser and device you can think of.
single,single-post,postid-16020,single-format-standard,ajax_fade,page_not_loaded,,,qode-theme-ver-6.5,wpb-js-composer js-comp-ver-4.4.3,vc_responsive

Mooring the Zeplin


11 Dec Mooring the Zeplin

This is the second post in a series of articles looking at the latest tools that are providing more control, speed and better comms to the digital production process.  Here I take a look at Zeplin, a design hand-off tool.

The Problem

As a developer working with a designer, often you may experience a bottle-neck when waiting on new designs to come in.  Back up the workflow, design changes can also cause a slowdown: the client might suggest a design change and ask both designer and developer if the change impacts on the UX or user journey, how much time it would take to implement, if it’s feasible etc. Once the change has been approved the designer updates those designs.

When the designs finally get to me, as PSDs exported with  comments from the designer, I can get going. But frequently there can be hold ups even when the client wants to change one small thing.  The designer makes those changes and the developers make coffee while they wait for the PSDs.

Then for each original or updated PSD there then begins the laborious task of:

  • Turning layers of the file into usable assets; the correct web format and different resolutions device scaling.
  • Extracting colours off the PSD, either in RGBA or hex.
  • Using the ruler to measure the spacing between content and assets.
  • Getting the correct fonts and font sizes of the content.

I’m not complaining about Photoshop here. It’s a tried and tested tool for editing bitmap images that, until Sketch came along, was the best way to create UI designs.

The real problem is that it’s not a developer’s tool.

The process of creating assets shouldn’t fall to the developer and we shouldn’t be using Photoshop for this because it’s simply too heavy for us to use. What developers want is an easy, streamlined way of downloading assets, extracting colours, font sizes, margins and padding… Photoshop offers that, but we’re developers and we want quick and easy results.

Another problem is that it offers no platform for collaboration. If a client wanted to make a specific change, they’d also have to use Photoshop to export a jpg of the design and add their comments on there with scribbles and annotations and send it to both designer and developer. The communication of ideas becomes jumbled and files are being sent back and forth until something can be agreed and finalised. It takes far, far too much time.

Fortunately there is something out there for clients, designers and developers that makes this process smooth and painless.

The Solution

Meet Zeplin: a collaborative tool that really makes discussing ideas and implementing design much faster.  It imports designs direct from Sketch generating specs, style guides and all the necessary formats for us to build it exactly the way the designer wants!

Here are my favourite features that this tool offers:

  • Get pixel/point/device-pixel perfect measurements for margin or padding for an element

Zeplin measurements

I can’t stress enough how useful this is when you know the constraints of your app or webpage. If you click on a specific element you get to see the amount of space between the element and the window. If you hover over another element, then you can see the spacing between those two elements!

  • Export assets in web format (in 3 different resolutions) or in SVG format

Zeplin Guidelines

No more having to find the exact layer an asset is on and saving 3 different versions; all you need to do on Zeplin is select the asset and press the export button and it will generate 3 different files at different resolutions!

  • Attach comments directly onto the design and reply to them almost instantly

Zeplin Comment


This is the most important part of Zeplin as it promotes collaboration between client, designer and developer.  You can comment on a specific part of a design and it will send a notification to all those involved in the project bringing an end to the messy business of sharing marked-up screenshots.

We’re now using Sketch and Zeplin for all projects and it’s been a simple and rewarding switch.  As a developer, time is your resource and Zeplin will save you a lot of time – then you can hire someone else to make your coffee!