Design Handoff Checklist

WHAT'S INCLUDED

Template sections

• File organisation — layer naming, page structure, and component cleanliness
• Spec completeness — dimensions, spacing, typography, and colour values
• States & variants — all interactive states: default, hover, focus, active, disabled, error
• Edge cases — empty states, loading states, error states, maximum content lengths
• Assets & exports — icons, images, and illustrations exported at correct sizes and formats
• Annotations — developer notes for interactions, animations, and behaviour
• Accessibility notes — contrast ratios, touch targets, focus order, and ARIA labels

HOW TO USE

Best practices

1. Make it a Figma comment, not a separate doc. The checklist lives closest to the work when it's embedded in the Figma file itself — not in Notion or a PDF no one opens.
2. Run it before every review, not just before handoff. Catching issues in design review is cheaper than catching them in development.
3. Include the developer in the definition. The most useful handoff checklist is co-written with the developers who'll receive it. Add their items too.
4. Version it. When the checklist changes, update the version number. Teams evolve, and checklist drift causes confusion.
5. Track skip rate. If specific items are always skipped, either they don't apply to your context or the process isn't being followed. Audit quarterly.