Guide to Developer Handoff: A collection of best practices from the experts

Before making the switch to Figma, it didn't take long for me to notice just how much the collaborative design tool reshaped the ways that I worked with developers. Before Figma, it was normal for me to wait until a design was nearly, or more often, completely finished before sharing it with those on the engineering team, and for good reason. Sharing designs with developers, or really, anyone outside of the design team was often a cumbersome and time-consuming feat. Sometimes, by the time screens and assets were exported, designs were already outdated. It was a frustrating experience that left many collaborators unable to provide meaningful feedback. That resulted in too many surprises down the line and feelings of being left out of the design process.

When I realized the incredible difference that collaborating early with developers can make, I wanted to learn more from others in the industry about how their teams involve developers and how they're approaching the handoff process. I was lucky enough to be able to speak with a few of the talented designers and developers from Dropbox, Expedia, and Cash App to hear their thoughts and perspectives. Ok, ready to dive in?

Getting your developers started with Figma

On her small team at Dropbox, Carola Pescio Canale is the only designer, but works closely with five developers for nearly every design project. Because of this, it's important that she be able to consistently and efficiently share her Figma files with her team. In our conversation, Carola shared with me that she will create a file for each of the big projects she's working on, with pages inside that hold all of the many iterations and versions. This means that for her, she only needs to share a single link with developers on her team. All of the comments, prototypes, and iterations along the way will always be visible and easily accessible via that link.

Inviting another team member into your projects or files is as easy as clicking the blue Share button in the top right corner. Owners and Editors of files have the ability to invite others either by their email address or just by copying and sharing a link. When you invite another person, you can set their role to either an Editor or a Viewer. Unlike Editors, Viewers don't require a paid license and can be added for free, still allowing them to inspect, export assets, view code, comment, and even navigate through prototypes. To learn more about Permissions in Figma, check out this article in our help center.

Tip: If you belong to a team that's using Figma for Organization, domain capture automatically adds any existing Figma members with a verified email address to your organization, making it even easier to share files with others in your company.

After the Figma file for the project has been created, using the Sharing modal, Carola's able to copy a sharable link to the file and paste it right into the design spec within Dropbox Paper for everyone on her team to see. This document isn't a traditional handoff spec, as you won't find any redlines or callouts, because developers on her team are able to view all of the implementation details directly from Figma. Rather, it's a deep-dive into the relevant iterations, problem definitions, links to research, and general documentation.

Keeping files organized for your team

As developers get access to design files, which are filled with dozens of in-progress frames, iterations, components, and more, it's good practice to communicate which parts of the files are ready for implementation and which are still being worked on. File organization and communication were consistent trends among each of the design teams at Expedia, Dropbox, and Cash App and there were a few ways, in particular, that each team approached it.

Naming pages to indicate what's ready for implementation — Each of the designers I spoke with used pages within files to separate what was still being worked on, what was ready for feedback, and what was ready to build, while also making space for the iterations along the way. Did you know you can use emojis in page names? Go ahead, get creative! 🏗️, 💭, 🚢.

Create custom thumbnails — It's now possible in Figma to set any frame on the canvas as the file's thumbnail. Just select the frame, right-click, and choose "Set as Thumbnail." These thumbnails appear when browsing through files within the file browser and can help provide additional context for teammates.

Here's a preview of how the file previews look for the teams at Expedia and at Cash App.

Using components for a clean handoff

One of the reasons I was so excited to write this handoff guide was because, for many developers, the opportunity to get a glimpse behind the curtain of the design process really hasn't existed before. I think the Design Team at Cash App described it best when they told me that prior to Figma, the traditional developer handoff model wasn't fluid or intuitive and often felt like final screens and assets had to be tossed over a fence for developers to catch. As you might imagine, this invisible, but all-too-real fence left room for ambiguity and often, frustration.

Because Figma is collaborative for both designers and non-designers, I wanted to learn more from the folks at Cash App about how they're using Figma with developers to show designs, communicate intention, and collect feedback.

The design process is often messy, and for someone who's not a designer, coming into a file to view designs or provide feedback can be intimidating. The team at Cash App recognized this and shared a clever solution that goes a step beyond creating organized pages within files. The team used the ability to turn any frame into a component in Figma, including those which compose final design, to their advantage.

For any frame that's ready to be shared with the broader team, designers at Cash App will create a dedicated page within a file, where instances of those design components are placed, ready to view. What works so well about this method is that changes can be made on the original frame, on a less organized page, and the instance, which has been placed in the clean, organized space for developers and non-designers to view automatically updates. It's a nice way to save time and help others navigate through your files.

If you want to further communicate to your team the flow of screens or interactions, Autoflow, a plugin built for Figma by Yitong Zhang from Coinbase, does just that. Running the plugin, with two objects selected on the canvas, automatically generates a line between them, quickly indicating where to move next, from one screen to another.

Components, Styles, and documentation

The Team Library, a feature that makes Figma so uniquely powerful for teams who closely collaborate, is a way for designers to create, maintain, and share Components and Styles across all of their designs. The concept of components is nothing new to developers, as it's a framework that's existed within engineering for some time now as a way to build interfaces. However, for many of us designers, components are still a fairly new way of thinking. Many of us are still working to learn best practices for not only creating and using components but also sharing their function with developers.

To begin to understand more about what it looks like when developers are inside of Figma files, I couldn't imagine better people to talk with than Lauren LoPrete, Natalie Annin, and Ben Munge from Expedia. Lauren and Natalie are both designers and work closely with Ben, a Senior Software Engineer who is working on the company's iOS applications. Lauren has spent much of her time at Expedia working on design systems and documentation within Figma and Natalie most recently designed and implemented dark mode component variants for the team's library.

Because developers at Expedia have access to in-progress design files, it's more important than ever to communicate how reusable components in designs are being used. One way to relay this information, and a feature that the team relies on, is Figma's ability to navigate to the master component's location from an instance.

When a component instance is selected, inside of the properties panel on the right is an option to "go to master component," which when clicked, will open the file where the component originated from. Lauren shared with me that having access to where these components were created makes it really easy for developers at Expedia to understand more about them, such as whether or not the component is a part of the larger design system or if it was created specifically for the project. The ability to view the master component also makes it possible to understand, which, if any, overrides were applied by the designer who used the component.

Inside of one of their many design system files, for each major set of components, Lauren and the team have created a frame, where the component name, description, usage instructions, variants, and states all exist. This means that when a developer clicks on "go to master component," they're taken immediately to the source of truth, with all of the accompanying component documentation they might need.

Tip: Just make sure to also invite developers into the libraries which hold your team's master components. Otherwise, they'll likely receive a 404 error.

Below is an example of one of Expedia's Global Navigation components, which shows off their system well.

Naming Styles give work more context

Along with Components, each of the three design teams relies on Styles within Figma to keep their interfaces consistent. Taking the time to assign relevant names to color, type, and effect styles, such token or variable names, can make it easy for the developers you partner with to better match what's in Figma with what's in code.

Natalie shared that at Expedia, designers and developers rely on both light and dark versions of their interface elements, depending on which mode the user has enabled. With a canvas full of bright components, the project of beginning to convert from light to dark quickly took off. Because Style names can be viewed in the code panel, which is accessible inside of any file for both Editors and Viewers, in many cases, it becomes possible to implement variables instead of those non-scalable, hand-coded values, convenient when working with different color themes. Just as with Components, Styles can also contain descriptions, which provides even more context on when and how they should be used. I've even seen teams include accessibility contrast guidance within descriptions, which is really pretty clever!

The Code Panel

Inside of a file, developers have access to the code panel, where helpful information about the designs they're inspecting can be found. Developers can choose to switch between viewing code for CSS, iOS (Swift), and Android (XML) and any descriptions that are added to components will also appear here. Designers might choose to include actual component names from the team's codebase, relevant hyperlinks, or usage documentation to help provide even more context for developers on the team. Viewers also have the ability to export any assets within the file, created either by the designer or themselves. Read more on Figma's Code Panel.

Collaboration helps establish trust

Near the end of my conversation with Natalie, Lauren, and Ben from Expedia, I asked how it's felt for Ben, really for the first time, to have more insight into the design process and to see work in progress. It was actually funny, as at first, he didn't think it had changed things too much, but then quickly backtracked.

Ben shared with me that he has incredibly close relationships with the designers he works with, communicating often and well with them. One of the first things he mentioned, beyond communication, was how much they trust each other, in both their judgments and decisions for how designs ultimately come together. And they believe that the collaborative tool that is Figma plays a large part in that. With Figma, Ben and developers everywhere can view entire files, not just the final screens, making it possible to see how designers on his team arrived at the conclusions they did. Designers are able to easily communicate to developers which iterations worked, and which didn't, giving them more transparency into the process than ever before.

The thought of inviting developers into in-progress design files can sound intimidating, but sharing often and involving developers earlier has helped me, as a designer, in more ways than I can count. Inviting developers into the design process can help promote transparency and better, more productive workflows. With Figma, non-designers are given the chance to provide feedback and ask questions along the way, instead of at the very end.

I hope these recommendations and insights from the teams at Dropbox, Expedia, and Cash App will help you and your team think of new ways to collaborate and hand off designs. Have tips or techniques that you and your team use? Reach out to us on Twitter! We'd love to hear.

Finally, a big thank you to the teams at Dropbox, Expedia, and Cash App for all of their time and input on this post.