This guide shows you how to build a reusable design handoff checklist inside Figma — so your developers get everything they need before a single line of code is written. Most teams can set this up in under two hours, and it pays off immediately on the next sprint.

What You'll Build

  • A structured Figma page that serves as a living handoff checklist for any project
  • A component-level annotation system developers can read without a walkthrough call
  • A design token audit embedded directly in the file so nothing undocumented ships
  • A reusable checklist template you can duplicate across projects in your Figma workspace

What You'll Need

  • Figma Professional or Organisation plan (Dev Mode required for step 5)
  • A working design file with at least one completed screen or component set
  • The Figma Tokens plugin (by six7) or native Figma Variables (available since Figma 2024)
  • The Redlines or Handoff Notes community plugin (both free)
  • Basic familiarity with Figma components and Auto Layout

Step 1: Create a Dedicated Handoff Page in Your Figma File

Open your Figma project file. Add a new page and name it exactly 🚢 Handoff. The emoji prefix forces this page to sort visually and signals its purpose to any collaborator at a glance.

Inside that page, create three top-level frames using the following names:

  • 01 — Checklist
  • 02 — Annotations
  • 03 — Token Audit

Set each frame to a fixed width of 1440px with Auto Layout set to vertical, 40px padding, and 24px gap. This keeps the page readable for developers viewing it in a browser via the Figma share link.

Why does a separate page matter?

Mixing handoff documentation with design work creates confusion. Developers end up scrolling through explorations to find the final specs. A dedicated page gives them a single entry point — no questions, no back-and-forth Slack threads.

Step 2: Build the Master Checklist Component

In the 01 — Checklist frame, create a reusable checklist item component. Use this structure inside a single Auto Layout frame:

  • A 20×20px checkbox shape (rectangle, 4px corner radius)
  • A text field labelled Item label using your body text style
  • A status badge component with three variants: To Do, In Review, Done

Convert this group to a component named Handoff/ChecklistItem. Then create a component variant for each status. Use component properties (introduced in Figma 2023 and refined in 2024) to expose the label as an editable text property and the status as a dropdown.

What checklist items should you include?

Use these 14 items as your baseline. They cover the most common developer complaints as of 2026:

  1. All screens exported at correct resolutions (1x, 2x, 3x)
  2. Component names match the codebase naming convention
  3. Design tokens applied — no hardcoded hex values
  4. Spacing uses 4pt or 8pt grid consistently
  5. All interactive states documented (default, hover, focus, disabled, error)
  6. Typography styles linked to a named text style, not overridden locally
  7. All icon assets exported as SVG from the asset panel
  8. Breakpoints defined: 375px mobile, 768px tablet, 1280px desktop minimum
  9. Motion specs annotated (duration, easing, delay) for any animated element
  10. Accessibility notes added — colour contrast ratios above 4.5:1 (WCAG 2.2 AA)
  11. Copy finalised — no Lorem Ipsum remaining in final screens
  12. Edge cases documented — empty states, loading states, error states
  13. Linked prototype flow shared with correct starting frame
  14. Dev Mode link added to the handoff page description

Duplicate the Handoff/ChecklistItem component 14 times and fill in each label. Set all statuses to To Do to start.

Step 3: Build the Annotations Layer

Switch to the 02 — Annotations frame. For each screen you are handing off, paste a flattened screenshot of the final design at the top of this frame. Then create annotation callouts pointing to specific elements.

Use the free Handoff Notes Figma plugin to generate numbered callout markers. These create a numbered circle attached to a connector line. Below the screenshot, create a matching numbered list in a text frame explaining each callout.

What should each annotation explain?

Each annotation should answer one of three questions for the developer:

  • Behaviour: What happens when a user interacts with this element?
  • Constraint: Is there a max character count, a min height, or a conditional display rule?
  • Reference: Which component in the design system does this map to?

Annotations that answer all three are rare but eliminate nearly all clarification questions during development. Teams at Lenka Studio use this three-question model as a QA filter before marking any annotation as complete.

How detailed should the motion specs be?

For any animated element, include: transition type (e.g. ease-out), duration in milliseconds (e.g. 200ms), delay if staggered, and a reference to the CSS cubic-bezier if you are using a custom curve. Map these to your motion design system if one exists. This removes ambiguity that leads to developers defaulting to linear transitions.

Step 4: Run the Token Audit

Open the 03 — Token Audit frame. Install the Figma Tokens plugin if you have not already. Run a token scan on the final screens you are handing off.

The plugin will surface any layer that uses a raw value instead of a bound token — things like hardcoded #1A1A2E fills or font-size: 13 overrides outside your text styles. Export this list as a JSON summary and paste the findings directly into the 03 — Token Audit frame as a text block.

For each raw-value violation found:

  1. Return to the design layer and correct it before handoff
  2. Check the item off in your 01 — Checklist frame once resolved

What if you are using native Figma Variables instead of Figma Tokens?

Figma Variables (available natively since the 2024 update and improved in early 2026) work the same way. Use the Variables Inspector panel in Dev Mode to verify token bindings per layer. Any layer showing a raw value in Dev Mode is a violation. The token audit step applies identically.

Step 5: Enable and Configure Dev Mode

In Figma, toggle Dev Mode on using the </> icon in the top toolbar. This requires a Professional or Organisation plan seat. For developers with a free Figma account, share the file with a Dev Mode viewer link — they can inspect specs without editing access.

In Dev Mode, make sure the following settings are active before sharing:

  • Code language set: CSS for web, Swift for iOS, Kotlin for Android
  • Units set to: pixels (not points) for web handoffs
  • Component links active: all components link back to the main component in the library file

Copy the Dev Mode share URL and paste it into the description field of your Figma handoff page. This is checklist item 14.

Step 6: Save the File as a Reusable Template

Once the handoff page is complete and all 14 checklist items are marked Done, duplicate the Figma file and strip out all project-specific content. Leave only the three frames with blank checklist items reset to To Do.

Save this stripped version to your team's Figma Drafts or to a shared library folder labelled Templates. Name the file [Template] Design Handoff Checklist v1. Version-stamp it — your team's process will evolve, and you want to know which version was used on any given project.

When should you update the template?

Review the template after every third project sprint. If developers consistently flag the same missing information, add it as a new checklist item. If an item has never triggered a violation in six months, consider removing it to keep the checklist lean.

Pro Tips for Faster Handoffs

  • Link the checklist to your project management tool. If your team uses Linear, Jira, or Notion, create a handoff task that links directly to the Figma handoff page — not the design file root.
  • Schedule a 15-minute handoff walkthrough. Even a complete checklist benefits from a short async Loom video. Record your screen, walk through each annotation frame, and attach the link to the handoff task. This cuts back-and-forth by roughly 60% based on typical agency sprint reviews.
  • Use the checklist as a design review gate. Do not hand off any screen unless all 14 items are marked Done. Treat incomplete handoffs the same way you treat a failing CI build — block the deploy.

Common Pitfalls to Avoid

  • Handing off before edge cases are designed. Loading states and empty states are not optional — they are design work. Build them into the file before checklist item 12 can be marked complete.
  • Using the annotations frame as a dumping ground. Keep annotations scoped to the final screens only. Exploratory work belongs in a separate page labelled Explorations.
  • Skipping the token audit because you are in a hurry. A single hardcoded colour bypasses your design system and causes drift between design and code within weeks.

Frequently Asked Questions

Does this checklist work for mobile app handoffs, not just web?

Yes. For mobile, adjust the breakpoints in checklist item 8 to match iOS (375px, 390px, 430px) and Android safe area specs. Set Dev Mode to export in Swift or Kotlin units. Everything else applies identically.

How is this different from just using Figma Dev Mode on its own?

Dev Mode gives developers access to inspect specs, but it does not enforce completeness. This checklist creates a shared contract that confirms all states, tokens, and annotations are in place before inspection begins. It catches gaps that Dev Mode cannot surface automatically.

What if our team does not use design tokens yet?

You can still run the token audit step manually. In Dev Mode, scan each final screen for any fill, text, or spacing value that does not match your named styles. Flag and correct each one. This process alone often reveals undocumented one-off decisions that create technical debt in code.

How long does it take to complete the checklist for a typical feature?

For a single feature with four to six screens, a thorough checklist takes roughly 45–90 minutes. Most of that time is the annotation step. The token audit and Dev Mode configuration usually take under 15 minutes once the process is routine.

Can junior designers run this checklist without senior oversight?

Yes, with one caveat. The first time, have a senior designer review the completed checklist with them. After two or three rounds, most junior designers can run it independently. The checklist structure compensates for experience gaps by making the requirements explicit rather than assumed.

Next Steps

Once your handoff checklist is live, the next upgrade is a full design-to-code pipeline — connecting your Figma Variables directly to your codebase via a tokens sync workflow. If your team is also thinking about how content planning feeds into design delivery cycles, the free Lenka Studio social media toolkit includes a content calendar template that pairs well with sprint-based design schedules.

If your organisation is ready to build a scalable design system that supports handoffs like this across multiple teams, the Lenka Studio design team works with SMBs in Australia, Singapore, Canada, and the US to establish exactly that kind of infrastructure. Get in touch to talk through what a structured design process could look like for your product.