Design Handoff
Getting a design built correctly, which works better as a conversation than as a document.
Definition
Handoff is the transfer of design intent to implementation. The strongest predictor of a good outcome is whether engineers were involved before the design was finished, not the quality of the specification afterwards.
Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.
On this plate
Reach for this when
- Moving from design to implementation.
- Rework rates are high.
- Working across time zones where conversation is limited.
- Design and engineering sit in different teams or different time zones, so the corridor conversation cannot happen.
Common mistakes
- Only the default state specified.
- Placeholder content that hides length problems.
- Review against static images rather than the running product.
- No agreed decision-maker for disagreements.
- Annotating everything, which hides the four notes that mattered inside forty that did not.
What a design has to specify beyond the happy path
- Every interactive state: hover, focus, active, disabled, loading, selected, error.
- Empty, loading and error states for every data-driven region.
- Behaviour at the smallest and largest supported widths.
- What happens with the longest realistic content, and with text that has been translated.
- Keyboard behaviour and focus order for anything custom.
- Motion: what animates, for how long, and what happens under reduced motion.
- Which existing components and tokens should be used, so nothing is rebuilt.
Reducing rework
- Review the implementation in the browser, not against a screenshot.
- Agree who decides when the two disagree, before it happens.
- Design with real content and real data, so length and edge cases surface early.
- Keep the design source and the implementation referencing the same tokens.
The conversation around the file
Do
- Walk the flow together once, out loud, before anything is built.
- Name the decisions that are load-bearing and the ones that are not.
- Say what happens in the states nobody enjoys specifying: empty, loading, error, too long, offline.
- Answer questions in the ticket where the answer is findable later.
Do not
- Treat a link to a file as a handoff.
- Specify pixel values for anything the design system already names.
- Leave the engineer to guess which of three similar components was meant.
- Disappear after delivery. Most of the real decisions surface during build.
In practice
- i.
The state nobody designed
Where rework comes fromA list looked correct with eight items and broke with two hundred, and nobody had said what pagination or virtualisation was expected. The cost of that omission lands entirely on the build, and it lands late.
Local chart
FLOW·002 · Region IV · Grid H2
This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.
Continue from here
Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.
Often used with
These usually appear in the same screen or the same decision.
- Product SpecificationTPL·011 · Template
- CursorTOOL·052 · Tool
- FigmaTOOL·001 · Tool
- Figma Dev ModeTOOL·042 · Tool
- LoomTOOL·048 · Tool
- SketchTOOL·002 · Tool
- StarkTOOL·034 · Tool
- ZeplinTOOL·043 · Tool
Related concept
Connected closely enough to change how you apply this.
- Feature Idea to UX SpecificationAI·004 · AI workflow
- Specification to Working CodeAI·010 · AI workflow
- Design and Code ParitySYS·010 · Design system
- Design System DocumentationSYS·003 · Design system
- Design TokensSYS·001 · Design system
- Empty StatesPAT·010 · Pattern
- Visual StatesFND·053 · UI foundation
- InternationalizationWRT·006 · UX writing
- Design QAFLOW·003 · Workflow
- Prototyping FidelityFLOW·005 · Workflow