Design handoff

At a glance

Why it matters

Figma describes design handoff as the process of transitioning designs from designers to developers so they can build what was designed (Figma), and most of the tooling now lives inside the design file: Dev Mode shows measurements, spacing, colors, applied styles and variables, code snippets and a Ready for dev status on frames (Figma). The expensive part is what happens after the file closes. Two-thirds of respondents to Zeplin's 2024 survey said design-delivery inefficiencies eat a quarter to half of their working time (Zeplin), and the usual cause is not a missing spec but a build nobody compared with the frame before it shipped.

What does a good design handoff include?

• 1. Frames marked ready. A status on the section, frame or component (Figma's Ready for dev) so a developer never builds from a draft that is still moving.
• 2. Values, not eyeballing. Spacing, sizes, colors and type read from the inspect panel and tied to the token or style they came from, so the build uses the variable rather than a copied hex.
• 3. Every state. Hover, focus, active, disabled, loading, empty and error. A file that shows only the default state hands off half the component.
• 4. Responsive intent. Which breakpoints exist and what reflows between them. One desktop frame is a mockup, not a handoff.
• 5. Assets, copy and annotations. Exported icons and images at the sizes the build needs, final copy, and short annotations for the edge cases the frames do not show.
• 6. A definition of done with a design check in it. The handoff ends when the rendered page has been compared with the frame, not when the feature works.

Weak handoff vs strong handoff

Common mistakes

• Handing off a screenshot. A PNG carries no measurements, tokens or states, so developers reconstruct the design from pixels and get it slightly wrong everywhere.
• Treating the file as frozen. Designs keep changing after handoff. Without a status and version comparison, developers build from the frame they opened last week.
• Skipping states. Hover, focus, error and empty states are where most "that is not what I designed" comments come from, because they were never in the frame.
• Reviewing the file instead of the browser. Approving the design again in Figma catches nothing about the build. The check has to run on the rendered page.
• Leaving the gap unowned. When nobody is responsible for comparing the build with the design, the mismatch ships, and it comes back later as design debt.

Frequently asked questions

What is design handoff?

Design handoff is the step where a finished design passes from designers to developers so they can build what was designed. It includes the approved frames, measurements, colors and type styles, interaction states, assets and a status that says the frame is ready, and it should end with the build being checked against the design.

What should a design handoff include?

Frames marked ready for development, spacing and size values tied to tokens or styles, every interaction state, the responsive behavior at each breakpoint, exported assets, final copy, annotations for edge cases, and an agreed definition of done that includes comparing the build with the design.

What is Figma Dev Mode?

Dev Mode is Figma's view for developers. It shows a frame's measurements, layout and spacing, colors, applied styles and variables, and code snippets, lets designers add annotations and mark sections or frames as ready for dev, and can compare frame versions. Code Connect, which maps components to real code, is available on Organization and Enterprise plans.

How do you know a design handoff worked?

Open the built page in a browser and compare it with the frame, rather than re-reading the file. Spacing, typography, colors, responsive behavior and interaction states are what drift in translation, so check those first. OverlayQA's Visual Comparison runs that check against the linked Figma design, and Design System Audit flags values that left the tokens.

Who owns design handoff?

Both sides, with one named checker. Designers own the readiness of the frames and the annotations, developers own asking before guessing, and someone, usually the designer or a QA pass in the sprint, owns comparing the result with the design before it ships.