The handoff is where most design intent is lost
The designer ships a Figma file. The developer builds. Three months later the live product is ~80 % of what was designed, with the remaining 20 % being subtle but cumulative misalignment.Design tokens — the actual handoff
The single biggest reduction in handoff drift comes from token-based design:- Colours, spacing, typography, radii defined in Figma as variables
- Tokens exported via Tokens Studio
- Style Dictionary or equivalent transforms to CSS / JS / native styles
- Code consumes tokens, not hard-coded values
Component library parity
- Figma components map to code components 1:1 where possible
- Same names, same variants, same prop structure
- Storybook entries linked from Figma component
- Mismatch documented and tracked
The hand-off file
A good Figma file ready for hand-off has:- Pages organised by feature / flow
- All artboards labelled
- States covered (default, hover, focus, active, disabled, error, loading)
- Empty states designed
- Data variations (long names, missing data, edge cases)
- Annotations on non-obvious behaviour
- Components used (not detached layers)
- Auto-layout used where the component is responsive
Specs that aren't in the comp
- Animation / motion — direction, duration, easing
- Interaction — what happens on click, hover, drag, swipe
- Validation — when does an error show, what's the message
- API behaviour — what's loaded async, what blocks
- Edge cases — long strings, empty arrays, error responses
- Accessibility — keyboard navigation order, screen reader announcements, ARIA labels
The conversation, not the document
The handoff is a conversation. The pattern:- Async: designer ships file with annotations
- Sync: 30-min walkthrough, designer + engineer + PM
- Async: engineer plans, asks follow-up
- Sync: design QA on implementation, designer reviews build
- Async: fixes, refinement
Design QA — the post-build review
- Pre-launch design review of the implementation
- Side-by-side comparison: design comp vs built
- Designer flags discrepancies
- Triage: must-fix, should-fix, accept-as-built
- Closing the loop: documented updates
Plugins that help
- Tokens Studio — for token export
- Storybook integration — links Figma components to Storybook stories
- Specify — design system asset distribution
For engineering teams new to design partnership
- Ask "what should happen if X" before assuming
- Don't add unstated UX touches because they "feel right" — flag and ask
- Pixel-pushing matters less than the system
- Surface implementation complexity early
For design teams new to engineering partnership
- Understand approximately what's expensive vs cheap to build
- The "it's just a small change" estimate is usually wrong on both sides
- Engineering iteration is faster when the design system is the foundation
- Custom components have ongoing maintenance cost
One pattern we'd warn about
"We'll just figure out the details in code". The details — focus states, loading states, edge cases — are where 30 % of front-end work lives.One pattern that always pays off
A weekly design / engineering review meeting. 30 minutes, look at what's been built that week against what was designed.What's your handoff process?
