Included
Design-to-Dev Handoff Checklist - Everything Developers Need From Designers
A pre-handoff checklist for states, breakpoints, spacing, animations, color tokens, typography, exports, and accessibility annotations.
Resource fit
Built for practical use
Included
State coverage
Included
Responsive specs
Included
Accessibility annotations
By Desisle — SaaS UI/UX Design Agency Version: 2.0 | Last Updated: April 2026 License: Free to use and share with attribution to Desisle (desisle.com)
Why Handoff Matters
Handoff is where design quality lives or dies. A beautiful Figma file means nothing if developers can't build it faithfully.
The most common sources of implementation drift:
- Missing states (hover, focus, disabled, error, empty, loading)
- Undefined breakpoints
- Inconsistent spacing values
- Missing interaction specs
- Accessibility gaps not documented
- Edge cases not addressed
This checklist catches these issues before handoff, not during it. Use it before any major design-to-dev transition.
Who this is for: Designers preparing work for developer handoff, design leads reviewing their team's work, developers requesting better handoff documentation, and product managers coordinating design-dev workflows.
Handoff Self-Assessment
Before declaring a design "ready for handoff," ask yourself:
If I disappeared tomorrow...
- Could a developer build this without needing to ask me questions?
- Are all states, edge cases, and variations covered?
- Are accessibility requirements documented?
- Are assets organized and exported?
If not, what's missing? Fix those gaps before handoff.
Interactive audit
Run The Handoff Review
Review pre-handoff foundations, screen-level details, and component completeness before engineering picks up the work.
Design System 1 checks
Design tokens defined
— colors, typography, spacing, borders, shadows reference tokens (not raw hex codes)
Figma File Structure 1 checks
Pages are organized logically
— e.g., "01 — Cover," "02 — Design System," "03 — Core Flows," etc.
Visual Completeness 1 checks
All responsive breakpoints designed
— desktop (1440px), laptop (1024px), tablet (768px), mobile (375px)
States 1 checks
Default state
— the "happy path"
Data Variations 1 checks
Short content
— minimum expected length (single character, 1 item)
Accessibility 1 checks
Color contrast passes WCAG AA
(4.5:1 normal text, 3:1 large text/UI)
Interaction Specs 1 checks
Animations defined
— duration, easing curve, what triggers
Anatomy 1 checks
Anatomy documented
— labeled parts of the component
Variants 1 checks
All visual variants
— primary, secondary, tertiary, destructive, ghost
States (each variant × each state) 1 checks
Default
Behavior 1 checks
Click/tap behavior
— what happens
Icons 1 checks
All icons exported as SVG
(preferred) or optimized PNG
Images 1 checks
Images exported at multiple resolutions
— 1x, 2x, 3x for retina
Illustrations 1 checks
SVG format preferred
for decorative illustrations
Typography 1 checks
Web fonts specified
— font files, weights, styles
Color Tokens 1 checks
Primitive colors defined
— full color palette (10 shades each for primary, gray, etc.)
Typography Tokens 1 checks
Font family tokens
— font-sans, font-mono
Spacing Tokens 1 checks
Spacing scale defined
— space-1 (4px), space-2 (8px), ... space-24 (96px)
Other Tokens 1 checks
Border radius tokens
— radius-sm, radius-md, radius-lg, radius-full
Token Export 1 checks
Tokens exportable to code
— via Tokens Studio, Style Dictionary, or similar
Breakpoints 1 checks
Breakpoints defined explicitly
— e.g., mobile (<768px), tablet (768-1023px), desktop (1024-1439px), wide (1440px+)
Layout Behavior 1 checks
Column count per breakpoint
— e.g., 4 columns desktop → 2 columns tablet → 1 column mobile
Touch-Specific 1 checks
Touch target minimums
— 44×44px on mobile
Documentation 1 checks
Animation duration
— in milliseconds (e.g., 200ms)
Common animations documented 1 checks
Modal open/close
— duration, fade + scale, backdrop fade
Content 1 checks
Actual copy provided
(not lorem ipsum)
Data Formats 1 checks
Number formatting
— decimal places, thousands separators, currency symbols
Figma Documentation 1 checks
Cover page exists
— project overview, last updated date, designer names
External Documentation (if needed) 1 checks
Flow diagrams
— for complex multi-step processes
Post-Meeting Deliverables 1 checks
Meeting notes
shared
Designer Availability 1 checks
Designer is available
for questions during implementation
Change Management 1 checks
Process for design changes
during build defined
Design QA 1 checks
Design QA before launch
— designer reviews built version
Part 12: Post-Launch 1 checks
Build documented back to design system
— update design system with any new components created during build
Common Handoff Failures
Failure 1: "Make it responsive"
Designing only desktop and handing off with "make it responsive" is the #1 source of implementation issues. Design every breakpoint.
Failure 2: Only default states designed
Hover, focus, error, loading, empty states are often missing. These are 60-80% of the actual UI work.
Failure 3: Inconsistent spacing
If designs use 14px, 16px, 18px, 22px arbitrarily, developers can't implement a consistent spacing system.
Failure 4: Missing interaction specs
"The button should feel snappy" isn't an interaction spec. Duration, easing, and behavior must be specified.
Failure 5: Lorem ipsum everywhere
Copy affects layout. Using placeholder text hides issues with real content length.
Failure 6: No dark mode (when product supports it)
Retrofitting dark mode after build is painful. Design it from the start.
Failure 7: Ignoring accessibility
Contrast failures, missing focus states, and inadequate touch targets aren't development bugs — they're design gaps.
Failure 8: Disorganized Figma files
If engineers can't find the current version of a screen, implementation suffers.
Sources and References
- Nielsen Norman Group, "Design Handoff Best Practices"
- Figma, "Dev Mode Documentation"
- Brad Frost, "Atomic Design" (design system thinking)
- Dan Mall, "Design That Scales"
- Airbnb Design blog, handoff essays
- Shopify Polaris, design system documentation approach
Created by Desisle — SaaS UI/UX Design Agency desisle.com | hello@desisle.com Free to use and share with attribution.
For design-to-dev consulting or to audit your handoff process, contact us at hello@desisle.com.
More resources
The SaaS UX Audit Checklist - 100 Points to Check Today
The same 100-point UX audit checklist our team uses when reviewing SaaS products across onboarding, navigation, dashboards, forms, accessib…
SaaS Onboarding UX Playbook - The First 60 Seconds That Matter Most
A longer playbook for designing onboarding that activates users instead of only welcoming them. It covers first-time psychology, aha moment…
UX Heuristic Evaluation Template - Nielsen's 10 Heuristics Applied to SaaS
A ready-to-use spreadsheet for heuristic evaluation with Nielsen's heuristics, severity levels, a findings log, and a priority matrix built…