yeti logo icon
Close Icon
contact us
Yeti postage stamp
We'll reply within 24 hours.
Thank you! Your message has been received!
A yeti hand giving a thumb's up
Oops! Something went wrong while submitting the form.

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

By
Laura Pulido
-
December 1, 2022
Group of people working at computers

No matter the size of your company, launching a product always involves LOTS  of back and forth between teams, especially the design and development team.

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

Saving a design from Figma to Zeplin

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.

Live Zeplin Feed in a Projects’ 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:

Leaving a Behavior Comment in Zeplin

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

Viewing styleguide sections

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

Asset from Styleguide with Export Options

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

Connecting screens to create user flow

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!

Laura is a multidisciplinary creative with over 10 years of experience across Product, UI, UX, and CX. As a Product Design Lead, she helps brands build deep and meaningful relationships with their users  through the design process. In her free time Laura enjoys hiking around LA with her pup, turning her home into an indoor jungle, dancing, and cooking traditional Latin American food.

You Might also like...

A designer using AIDesigning the Future: AI's Impact on Creativity and Precision in Product Design

As a tech enthusiast, I have always been intrigued by AI but I never thought it'd creep into the design world so quickly. Can a machine really grasp the elegance of design language, the tricky balancing act between looks, functionality, and catering to the unique tastes of every user? Join me for a deep dive into the state of AI in the world of product design.

Want to Build an App Users Will Love? Focus on UX Design

Every day over 5000 apps are submitted to the app store - some are successful, while many fail to thrive. The greatest differentiating factor is often the quality of their UX Design.

The Ultimate ADA Compliance Checklist

Web products should be designed to allow anyone to equally find, navigate, and understand your web software.

Browse all Blog Articles

Ready for your new product adventure?

Let's Get Started