Introduction
Design handoff is the process of translating design decisions into developer-ready specifications. A bad handoff leads to back-and-forth, pixel-pushing, and frustration. A good handoff makes implementation feel effortless — developers know exactly what to build and designers trust the output.
Modern handoff goes beyond redlines and screenshots. It includes interactive prototypes, design tokens, component specs, and async review cycles. The tools have evolved, but the fundamentals remain: clear communication and shared vocabulary.
This guide covers structuring handoffs, what to include, review processes, and tools that streamline the workflow.
Key Concepts
Handoff Checklist
markdown
## Design Handoff Checklist
### Visual Specs
- [ ] All states documented (default, hover, active, focus, disabled, loading, error, empty)
- [ ] Responsive breakpoints specified
- [ ] Spacing and sizing use design tokens
- [ ] Colors reference token names, not hex codes
### Interaction Specs
- [ ] Click/tap behavior described
- [ ] Animation/transition details (duration, easing)
- [ ] Loading states and skeleton screens
- [ ] Error states and empty states
### Content Specs
- [ ] Real content examples (not lorem ipsum)
- [ ] Character limits and truncation behavior
- [ ] Localization considerations (text expansion)
### Accessibility
- [ ] Heading hierarchy
- [ ] Focus order
- [ ] Screen reader behavior for dynamic content
- [ ] Alternative text for images
Structured Component Annotation
plain
// In Figma, annotate components with:
// 1. Component name matching code: <Button variant="primary" size="md">
// 2. Token references: color.action.primary, spacing.4
// 3. State variants: Show all interactive states
// 4. Responsive behavior: "Stack below 768px"
// 5. Accessibility notes: "Announce count to screen readers"
Practical Examples
1. Async Review Process
markdown
## Design Review Workflow
1. Designer posts PR-style review in project channel
- Link to Figma page
- Summary of changes
- Questions for developers
2. Developer reviews within 24 hours
- Feasibility check
- Token availability check
- Accessibility concerns
- Implementation questions
3. Sync discussion (if needed)
- 15-minute call for complex interactions
- Screen share for prototypes
- Document decisions in the issue
4. Implementation
- Developer builds against Figma specs
- Designer reviews PR preview deployment
- Iterate until both approve
2. Figma Dev Mode Integration
plain
// Figma Dev Mode provides:
// - CSS values for every element
// - Component prop values
// - Spacing measurements
// - Asset export
// Developers should:
// 1. Enable Dev Mode in Figma
// 2. Click elements to inspect properties
// 3. Check "Tokens" panel for design token names
// 4. Use "Compare" to see changes between versions
3. Design-Dev Sync Template
markdown
## Weekly Design-Dev Sync (15 min)
### Agenda
1. **In Progress** — Designs being implemented (quick status)
2. **Ready for Review** — New designs needing dev feasibility check
3. **Blockers** — Missing specs, unclear interactions, token gaps
4. **Upcoming** — What's coming next sprint
### Ground Rules
- Share Figma links 24h before the meeting
- Developers flag concerns early, not during implementation
- Decisions documented in project issue tracker
Best Practices
- ✅ Use design tokens in specs — not raw values
- ✅ Document all interactive states — not just the happy path
- ✅ Include real content examples — lorem ipsum hides layout issues
- ✅ Have developers review designs before finalization — catch feasibility issues early
- ✅ Use Figma Dev Mode for precise measurements and token references
- ❌ Don't hand off static screenshots — use interactive Figma prototypes
- ❌ Don't wait for perfection — iterative handoff beats big-bang handoff
Common Pitfalls
- Missing responsive specs — developers guess breakpoint behavior
- No error or empty states designed — developers improvise inconsistently
- Handing off before dev feasibility review — designs may require expensive implementation
- Using absolute pixel values instead of tokens — breaks consistency and theming
Related Guides
- Figma to Code Workflow — Technical bridge between design and code
- Design Tokens Complete Guide — Shared vocabulary for specs
- Design System Documentation — Persistent reference for handoff decisions
- Design System Governance — Review and approval processes