Zeplin's Top 5 Features for Harmonious Design-Dev Handoffs

The handoff between these teams is a processes that can make or break your product. If the right tools and communication channels aren’t in place, it's likely to contribute to a lot of frustration - and a potentially less-than-ideal launch.

Here at Yeti our operations are fully remote, so finding and utilizing effective tools and seamless communication methods is key in our ability to build top-notch products. We recently added Zeplin to our toolbox, and it's now one of our favorite additions to our handoff process.

What is Zeplin?

Zeplin is our secret sauce. The ultimate collaboration tool, Zeplin allows us to maintain and organize project designs, comments, user flows, and behavior/requirement annotations. Plus, Zeplin’s collaboration features allow us to share a common language, avoiding potential miscommunication from the get-go.

Zeplin's Top 5 Features

1. Figma & Slack Integration

Connecting Zeplin with Figma and Slack are really important for our process. At Yeti, we use Figma as our primary design software so being able to integrate our design files and easily export our screens, styles, and assets saves us a ton of time during the handoff process. Once integrated with Slack, we can have Zeplin automatically send notifications to the connected Slack channel whenever there is a design update. This benefits the team helping everyone stay in the loop with any added design and style guide updates or annotations directly in each project’s slack channel.

Designers can leave comments, behavior, and requirement annotations, make changes to the style guide, upload new versions of a screen or assets and rest assured that developers and the rest of the team will be notified of all these changes.

Download the Zeplin to Figma Plugin

2. Comments & Annotations:

Developers can use comments to ask questions or give feedback to the team. Comments can be pinned directly to a screen or area on the design, plus filtered by status and color, making it easier to track.

During handoff, designers will add annotations to help document how a design should behave as well as its defined product requirements. Zeplin allows users to add images and even gifs to support the text with visuals.

3. Styleguides & Individual Styles

Having our project’s styleguide saved in Zeplin helps us ensure that we are always creating a brand-consistent experience with our products. Each styleguide in Zeplin includes grids, spacing systems, text styles, colors, assets and all common components organized in one spot.

Designers can make changes to their styleguide in their design files and have them reflected back in Zeplin for the team to keep up with all updates. Developers can view a project’s design system easily and copy over hex colors, text styling, reusable component styling as well as exporting any saved assets.

4. Exporting Assets

Designers can select which assets from the design should be assigned as exportable and send them over to Zeplin. Developers can go straight to Zeplin to download any assets from the project. Having the option to download assets in Zeplin greatly reduces the back and forth with designers and allows developers to gather assets easily at their own time. When downloading assets, developers can also choose the naming convention, file type (.png, .webp and .svg) and bitmap scales.

5. User Flows

Once screens are saved to Zeplin, designers can link screens together and map different user flows for the product. Having user flows in Zeplin allows developers to easily view the flow, understand all of a user’s possible paths and behaviors, identify missing use cases and predict interaction scenarios that might not have been caught before.

Having a visual for a product’s user flow in Zeplin helps create a seamless product experience along with a standardized source of truth into the end-to-end user journey

Once the screens have been saved to Zeplin and handed over to developers, designers should stand by to support and answer any additional questions or comments the team may have. After that, the next step would be to start planning QA sessions and launch phases. QA will be necessary for the team to check that the implementation of the designs is correct. Check out our articles related to Quality Assurance to learn more.

We hope this article has provided you with some insight into how Zeplin can be used to improve your design-dev handoff process.

If you have any questions or feedback, feel free to contact us- we love hearing from you.

^{DISCLAIMER: We are in no way associated or paid by Zeplin to write this article. We are just fans!}