Most design handoff problems are not about pixels. Developers can read a Figma file. What goes wrong is everything the file does not say: the empty state nobody drew, the error message nobody wrote, the reason the button is where it is. This checklist covers those gaps.
1. Every state, not just the happy path
For each screen and component, check that you have designed:
- Default, hover, focus, active and disabled.
- Loading.
- Empty. See empty state design.
- Error, including validation messages.
- Long content: the 40-character name, the 300-item list.
- Permissions: what a viewer sees versus an admin.
Missing states are the single biggest cause of handoff back and forth.
2. Components and tokens
- Use library components, not detached copies.
- Colours, type and spacing come from tokens or styles, not raw values.
- New components are flagged as new, with their variants.
- Contrast passes; check any new pair with a contrast checker.
3. Layout rules
- How each screen behaves at mobile, tablet and desktop widths.
- What stretches, what wraps, what truncates.
- Auto layout set up properly so spacing in Dev Mode is real.
4. Real content
Lorem ipsum hides problems. Use real copy, real names of realistic length and real data ranges. Mark copy that is final versus placeholder.
5. Interactions and motion
- A prototype or screen recording for anything that animates.
- Duration and easing written down.
- What triggers it and what interrupts it.
6. References that explain intent
This is the step most handoffs skip and the one that saves the most time. When an interaction or pattern is familiar from another product, link a reference: "the filter drawer works like Linear's", with a screenshot or recording. Developers understand a real example in seconds, faster than any annotation.
Keep the references you used during design in one place so you can attach them at handoff. A GetRef collection per project does this; share the collection with the developers and they see exactly what you were looking at.
7. A short written note
Half a page, linked from the Figma file:
- What changed and why.
- Known open questions.
- What is out of scope.
- Who to ask.
8. A walkthrough
Fifteen minutes on a call, going through the flow, beats an hour of comments. Record it for anyone who joins later.
For the pattern vocabulary that makes handoff easier, see UI design patterns and design system examples.
Common questions
- What should a design handoff include?
- Final screens for every state, the components and tokens they use, spacing and layout rules, real content and edge cases, interaction and motion notes, and the references that explain intent. Plus a person developers can ask.
- Does Figma Dev Mode replace a handoff document?
- It replaces most of the measuring. It does not replace explaining intent, edge cases and decisions. A short written note with links still prevents most back and forth.
- How do I hand off interactions?
- A short prototype or screen recording for anything that moves, plus a note on timing and easing. Link a reference from a real product if the interaction is familiar; it is faster than describing it.
