Better Design-Developer Handover with Zeplin

Isis Bakhshov

Within our Innovation Delivery (ID) team our UX designers work very closely with our developers to deliver intelligently designed products for our clients in the health, engineering, and science sectors.

Our designers need to transfer their ideas or designs of a digital product for development. There are numerous design collaboration tools on the market – at ID we have been using Zeplin and it has made a noticeable difference in improving our teams’ workflows. It has become our single source of truth for project work and it is core to our specification process – saving us time, boosting collaboration and improving communication between the team members.

About Zeplin

Zeplin is a collaboration tool between designers and developers that enables a smoother handover process around design assets. By creating a shared space where designers and developers can work and communicate effectively it helps build a bridge between both teams.

Where does Zeplin fit in the workflow?

The point at which we introduce Zeplin can vary depending on the project, but we typically bring in Zeplin when our designers need to communicate to different stakeholders about the designs.
The design handoff workflow at ID typically looks like this:
• UX designer creates a mockup of the designs in a prototyping tool.
• UX designer exports the mockups to a design handoff tool.
• Stakeholders review the designs and give any necessary feedback.
• UX designer makes design updates and exports an updated version.
• Developers inspect the signed-off designs.
• Design handoff tools translate each layer into CSS and the developer can then use this code as the basis for developing the app or website.

Without design-development handoff, developers would be left with having to make do with guesswork. This can lead to inaccuracies — for example, the wrong colours being used, or an interaction behaving incorrectly — which in turn impacts user experience.

Benefits of using Zeplin

We have found that working with Zeplin has many benefits, below are some of the key advantages.

It saves time

Once our designers export their designs to Zeplin the tool generates the relevant information about the design such as text styles, colour styles, images, icons, and dimensions. Designers can mark specific layers of the design as exportable which allows the development team to export individual assets in either SVG, JPG or PNG format. As all the information about the designs is in one place, the developers can easily find exactly the information that they need without having to go through the design team.

A single source of truth

The key to design-development collaboration is the importance of keeping both designers and developers on the same page regarding any change in design. Zeplin works by creating a shared link that allows others to view the design online. This makes design specs easy to share and keep up to date. This means there is a single source of truth and prevent situations where there are multiple versions of the same spec document floating around.

Aids communication

One of my favourite features of Zeplin is the ability to annotate the designs via its commenting feature. Our teams use this feature to track updates that need to be made to the designs. We also use it to ask clarifying questions about design requirements. Being able to colour-code the comments means that you can create a system for this. For example, we tend to use yellow for discussion between the product team and the client and green for comments relating to technical feasibility.