It’s Not a File. It’s a Conversation.
A breakdown of what makes design-to-dev handoff smooth, respectful, and scalable.
Design-to-dev handoff isn’t the end of the design process. It’s a turning point, where clarity meets code, and ambiguity becomes debt.
Too often, handoff is treated like a dropbox link: here’s the file, good luck. But the best teams know better. Great handoff isn’t a delivery, it’s a dialogue. A conversation across functions, timelines, and expectations.
This article covers how to make that conversation easier, clearer, and more collaborative using practical Figma practices: from layered page structure and design tokens to accessibility notes, Dev Mode, and platform-specific specs.
If you’ve ever heard “Where am I supposed to start?” from a developer opening your file, this is for you.
🧭 1. Use a Predictable Page Structure
Organize your Figma file like a product, not a sketchbook. The sidebar should help devs onboard instantly.
Suggested page setup:
- 🧭 Cover – Project summary, ticket links, designer info
- 🎨 Explorations – Concepts, WIP, rejected directions
- ✅ Final Designs – Locked screens grouped by feature
- 📐 Specs – Redlines, layout grids, and responsive notes
- 🧩 Components – Local or global shared elements
- 🧑💻 Dev Handoff – Final dev-ready flows
Defines the structural hierarchy of the page, outlining key regions such as navigation, main content, and footer to support accessible layout design.
🖼️ 2. Lay Out Frames Like a Flow
Screens should be aligned by flow, not scattered. Think of it like a storyboard with meaning.
Best practices:
- Align horizontally by task
- Use labels like Login > Error – Mobile
- Keep spacing consistent between frames
- Separate final vs. exploratory work clearly
Demonstrates frame sequencing and navigation paths, ensuring users understand the journey through the app’s core tasks and entry/exit points.
📌 3. Annotate What Tools Can’t Explain
Figma’s Inspect tab can’t describe logic, states, or accessibility needs. That’s your job.
Annotate:
- Motion or transitions
- Error/empty/loading states
- Dynamic copy or CMS logic
- API triggers or conditional rules
- Accessibility roles or ARIA expectations
Details the purpose and interactive behaviour of each component, helping engineers and stakeholders interpret design intent accurately.
🧱 4. Clean Up Your Layers
A messy layers panel slows down development. Use clear, functional naming.
Checklist:
- No Rectangle 99
- Name by role, not shape
- Delete hidden or unused layers
- Use Auto Layout and constraints properly
- Group intentionally
Shows organized design layers and naming conventions to streamline handoff and ensure reusability and clarity in collaboration.
🧪 5. Master Dev Mode & Inspect
Dev Mode is a bridge, but only if your file is production-ready.
Before enabling Dev Mode:
- Publish all styles and components
- Apply tokens (spacing, colour, typography)
- Check grid, padding, constraints
- Remove leftovers and overlay artifacts
- Preview spacing/logic in Inspect
Reveals how developers can extract code-ready specs and design tokens directly from Figma for efficient implementation.
🧩 6. Include Design Tokens
Design tokens reduce guesswork and create shared language between design and code.
Tips:
- Use token libraries (e.g. Tokens Studio, Figma Tokens)
- Label tokens clearly (e.g. spacing-sm, primary-500)
- Sync with dev systems if possible
- Include fallback values or overrides in annotations
Highlights the use of design tokens for consistent, scalable theming across the interface—aligned with system-wide branding and accessibility.
🔗 7. Link the Full Context
Don’t expect your Figma file to answer every question.
Link to:
- Jira/Linear tickets
- Copydocs
- API schema or integration briefs
- Design system specs
- Motion prototypes or handoff tools (Zeroheight, Storybook)
Cover slide introducing the handoff framework, setting the stage for a comprehensive, accessible, and developer-friendly design system.
🎥 8. Link to Interactive Prototypes
Static screens don’t show hover states, transitions, or gestures.
Include:
- Figma prototype links
- Lottie or AE motion previews
- ARIA or interaction role notes
- Microinteractions (e.g. “swipe to delete”, “tap to collapse”)
Visualizes motion, transitions, and touch interactions to communicate functional flow beyond static mockups.
♿ 11. Flag Accessibility & Internationalization
Don’t wait for QA to catch this.
Call out:
- Alt text
- Tap targets ≥ 44x44px
- Contrast ratios (WCAG AA+)
- RTL support
- Max string lengths for localization
Surfaces accessibility considerations like 44x44px targets, descriptive labels, and tab focus order—addressing usability for all users early in the process.
🧭 12. Note Platform-Specific Details
Designs should feel native to their platform.
Document:
- Typography & spacing differences (pt vs dp vs px)
- Capitalization, icons, button layout
- Platform-specific logic (modals, gestures)
- Tap vs click behaviours
Flags platform differences in navigation design and markup—for example, use of role=”tab” and aria attributes—to ensure native feel and compliance on both OS.
✅ Bonus: The Ultimate Handoff Checklist
Before sharing your file with devs:
▢ Pages structured and labeled
▢ Screens named and aligned by flow
▢ Layers cleaned and grouped
▢ Annotations added for logic and A11Y
▢ Tokens applied
▢ Dev Mode reviewed
▢ Prototype link included
▢ External docs linked
▢ Platform differences called out
▢ Accessibility and i18n noted
▢ Design QA scheduled
💬 Final Thought
Design-to-dev handoff isn’t a formality. It’s a continuation of your work, one that reflects your attention to detail and respect for the build.
If your Figma file answers more questions than it raises, you’re not just shipping pixels. You’re designing trust.
📄 Want the Full Checklist in One Place?
The checklist above is a solid starting point, but the full version goes deeper—with every detail from this article broken down into clear, scannable sections.
🧠 It includes:
- Layer-by-layer handoff steps
- Accessibility and internationalization notes
- Tokens, Dev Mode, performance tips, and more
- Post-handoff QA and dev feedback loops
You can duplicate it, customize it for your team, or just keep it open as a sanity check before sending a file off to engineering.
Get the Full Design-to-Dev Handoff Checklist
Beyond AAA: The Accessibility Gold Standard Checklist
For years, I treated accessibility as a finish line. Hit Level AA or AAA, check the box, move on. Bu
Agent-Aware UX: Designing for Humans and AI
🧠 A visual guide to FRAME—the 5 pillars of AI agent UX There’s a new kind of user inside your
BTS Look: Interior 360×180 Vehicle Photography
Step behind the curtain and immerse yourself in the world of automotive photography with this exclus