Figma handoff: What design teams can learn from the world’s greatest architecture
Design Delivery
Ruolan Xia
Nov 2021
In the world of product development, when we say “designers” we usually think of UX or UI designers. When we say “engineers” we usually think of software engineers, specifically front-end and back-end developers. Now, let’s take a moment to consider another field that also includes designers and engineers: architecture.
Below is one of my favorite examples of great architecture: the Havenhuis. Award-winning firm Zaha Hadid Architects designed this amazing cantilevered structure which seems to just float above the original historical port building in Antwerp, Belgium. The design team was meticulous about every element of this design, every structural component, every surface detail—not to mention loads of design decisions that aren’t visible to the eye. It would be unimaginable if the engineers building the Havenhuis were to begin construction without having absolute clarity on every part of the design. Building the front structural column true to the design is probably pretty important to keep the Havenhuis floating.That isn’t something you want to miss by even a single millimeter.
So what does all of this impressive architecture have to do with building great digital product experiences? Well, the clarity that the engineers of the Havenhuis needed isn’t really that different from the clarity that developers need when building today's digital applications. They may not be building floating cantilevers, but the quality experience they want users to have is exactly the same.
Let’s see how Figma designers and developers can benefit from using Zeplin to achieve clarity on exactly what to build.
The“latest” design might not be finalized
When designers share a live Figma design file, the development team begin their work based on what they hope is the finalized design. But this isn’t necessarily the case. Since the designs in Figma aren’t locked, they can be edited at any time, including by accident. While a developer is working, they may be worried: Did the design team in Luxembourg make an undeclared change last night? Am I going to have to recode all of this again next week? These risks get more and more likely as the size of the team increases, as teams become distributed and the volume of screens increase.
To manage these risks, I used to carefully adjust access rights and roles in multiple Figma files. But, with Figma and Zeplin together, designers can spend that time on design, instead of documentation and role administration. By publishing finalized designs to the Zeplin workspace, I can purposefully determine when a design is ready for development and provide absolute clarity to the team. This separates the live design file in Figma from the published design in Zeplin. The file in Figma is the latest, but the file in Zeplin is the one intended for development.
Zeplin is the source of truth for finalized designs, if it’s not in Zeplin it won’t be in the shipped product.
—Alan Chappell,Head of UX, Box
Creative freedom without duplicating
Now, you may be thinking: Why do I really need Zeplin to do that? Can’t I just create duplicate designs or use Figma branches to let developers know which designs are ready to build? Sure, you could but…
Prepping duplicate design files as a normal course of workflow is time consuming and also introduces additional complexity. Whenever you create a duplicate file, you’re also multiplying the number of files you need to manage, including feedback and updates.
Some designers are considering using Branches in Figma for developer handoff. Using this method, designers can create a branch from the main file to send to development. One challenge here is that neither design is locked and can still be edited, relying again on role administration and verbal agreements to not make design changes. Also, keeping multiple branches in sync can get messy quickly, especially when merging lots of changes across large distributed teams.
Using Figma and Zeplin together, designers can avoid the headaches of managing duplicates and additional design reviews, and instead focus on designing great experiences for users. Publishing finalized designs to Zeplin allows for a more streamlined workflow, separating the live Figma design from the published design in Zeplin. The team at Superformula have established a workflow just like this using Figma and Zeplin together. Designers get the creative freedom they need and developers get the clarity they deserve.
Figma is our 'playground' where we can run around and make as much of a mess as we need, then Zeplin is the ‘shelf’ where we can place finalized designs.
Caroline Maxwell,Principal Designer at Superformula
Clarity for the team
The team behind the Havenhuis can teach us something about design to development handoff. The importance of establishing precise clarity on what to build is key to the success of any design to development workflow. For the Havenhuis, it was never about informal verbal agreements, using live architectural files or managing duplicate design files. Great architects provide their engineers with absolute clarity on exactly what to build and we can learn from this. Sure, we’re not building dazzling buildings but we want the apps we’re building to be just as dazzling.
Learn more about how Zeplin can improve your company’s experience with Figma, and try Zeplin for free.
Fin
