Design handoff: how to do it the way developers love
Building new features is exciting. However, design handoff, a critical step in your workflow, can be messy and bring frustration across the board. Thankfully, there is a way to do it that satisfies developers alongside the entire product team.
From design to production
Design is a vital part of your product cycle. To avoid design/tech debt and offer customers top-notch user-friendly interfaces, tech-focused companies happen to run several design sprints a month or so.
Born in Google, (design) sprint is a methodology invented by Jake Knapp that enables you to build and test ideas fast. Jake later wrote a book titled SPRINT: How to solve big problems and test new ideas in just five days which has since become a bestseller.
However, those exciting screens designed (in Figma) you all loved are a promise. Now you’ve got to deliver on that promise; this is when design handoff becomes critical, as it connects the designer’s creative work to the developer’s production work.
Now, find below some of the ways companies usually go about design handoff.
How companies handle design handoff
The current way of doing design handoff: relying design specs and documentation
To help you in design handoff, design software like Figma (and all the others) lets you see the spec associated with your design items.
But the only problem is it only gives you a limited 2D view of your design when what you need is a full 3D plan of your design.
With this method, design teams and product managers still have to document their design files to align design and development teams on the expected outcomes.
The alternative ways
To go around those limitations, some companies and startups have since explored the following alternatives:
- An alternative way of doing design handoff was to let your designers learn the basics of front-end development — aka HTML, CSS — to sort of facilitate the handoff by speaking the language of developers. That’s similar to design with your developer in mind. But that could be tedious for your designers since it increases their workload.
- Another version of this is to have your developers learn one thing or two about (UI) design and design software tools — Figma, Sketch, Adobe XD, and the likes — to be more fluent in designers’ language. But that too is not a given; many developers hate it for obvious reasons.
- Hiring Swiss-Army-like full stack developers who also know UI design. Well…
Fortunately, there’s a better way than just trying to meet halfway.
Doing design handoff the Zeplin way
Are you breaking your head over the methods mentioned above? Then Zeplin is what you may need right now.
Zeplin rocks, just like their rock band namesake. Now you can go beyond design specs handoff thanks to this game-changing tool but not just. Most importantly, Zeplin brings together the entire product team beautifully. Product teams at leading companies like Salesforce, Box, Pinterest are already reaping the benefits of Zeplin.
Zeplin.io is a powerhouse, it’s got a lot to offer. But for now, I’ll just give you an overview.
- With Zeplin you do not share just design specs, you publish the finalized — this is very useful when your design includes some interactions and when you don’t know which one of the design screens specs you should share.
- You get great code snippets across platforms.
- Zeplin.io integrates with everybody’s tool stack across functions:
- Figma, Sketch, Adobe XD, and even Photoshop integrations (for product designers)
- Jira, Slack, Trello, etc. (for product managers/owners and the entire team)
- Visual Code (for developers)
- Android Studio (for Android software engineers).
3. Developers’ codebase is now connected to your design system
Now engineers can access UI components right on the designs, with links to Github, Storybooks, and more.
4. Zeplin.io comes in many flavors, Mac app, Windows app, and web app.
5. Last but not least, Zeplin offers a free plan, while upgrade starts at $6/seat/month for 12 projects. Bliss!
As you can see, Zeplin makes relying on design specs and its usual addendums completely anachronistic. Save yourself time and effort, you deserve it.
What are you waiting for? Go to Zeplin.io to give it a try. I promise, you’ll thank me later ;)
