How to Hand Off Designs to Engineering with Figma Dev Mode
Design handoff breaks down in predictable ways. Engineers build from an outdated frame, miss an edge case that was only discussed in a meeting, or measure spacing by hand because the design does not use the team's tokens. Dev Mode is Figma's workspace for engineers, built to reduce these problems by making it clear what is ready, what changed, and how designs map to code.
This guide covers how designers and PMs prepare files for Dev Mode, how engineers use it to inspect designs, and how to connect designs to the tickets where work is tracked. Dev Mode access depends on your Figma plan and seat type, so confirm engineers have the right seats before you roll it out.
Have a feature in mind? Describe it and Vantage drafts the PRD.
A few sentences is enough: the problem, who has it and what you want to change. Vantage turns it into a structured PRD with requirements you can edit.
How this works
- We save what you typed. No AI runs on this page.
- You create a free account.
- Vantage builds a PRD from it inside your own workspace.
Why ask for an account? We’re a small team, and a full generation runs a multi-step AI pipeline that costs us real money. So we tie it to a free account instead of running it anonymously. You also get to keep the result and edit it.
Your text is only used to create your project, and it stays private to your account. If you don’t sign up, we delete it after 7 days. Privacy policy
Step-by-step guide
Organize the file before handoff
Group the screens for a feature into sections with clear names. Remove or move exploration frames to a separate page so engineers do not build from the wrong version. A clean file is the single biggest improvement you can make to handoff.
- Create a page or section per feature or flow
- Move explorations and discarded options to an archive page
- Name frames by screen and state, such as 'Checkout / Error'
Mark sections ready for dev
Designers can mark sections or frames as ready for development. In Dev Mode, engineers can filter to see only what is ready. This creates a clear signal of what is final, so nobody builds from a work-in-progress frame.
Add annotations and measurements
Use annotations to document behavior that a static frame cannot show: interaction details, edge cases, truncation rules, and accessibility notes. Add measurements for spacing that matters. Annotations live on the design itself, which is more reliable than a separate doc that drifts.
- Annotate interactions and state changes
- Document empty, loading, and error states
- Note accessibility requirements such as focus order
- Add measurements for critical spacing
Use variables and components consistently
When designs use your design system's variables and components, Dev Mode shows the variable names and component properties rather than raw values. Engineers can map them to code tokens and components directly. If your team uses Code Connect, Dev Mode can show the actual component code from your codebase.
Inspect in Dev Mode
Engineers switch to Dev Mode with the toggle in the toolbar. Selecting a layer shows its properties, generated code snippets in supported languages, variables, and assets to export. Engineers should treat generated code as a reference for values, not as production code.
- Toggle Dev Mode from the toolbar
- Filter to sections marked ready for dev
- Select layers to inspect properties and variables
- Export assets in the needed formats
Compare changes after updates
When a designer updates a frame after it was marked ready, Dev Mode can show what changed between versions. This helps engineers catch late changes without re-inspecting everything. Designers should still mention significant changes in the ticket.
Link designs to tickets
Dev Mode supports integrations and plugins for tools such as Jira, Linear, and GitHub, so engineers can see related tickets alongside the design. At minimum, paste the link to the specific frame or section into each ticket, not just the file link. A link to the exact section saves time on every ticket.
Common mistakes
Handing off the whole file
A file link with dozens of pages forces engineers to guess which frame is current. Link specific sections and mark them ready for dev.
Missing states
Designs that show only the happy path leave engineers to invent error and empty states. Include them before marking ready.
Silent changes after handoff
Updating a frame after work has started without telling anyone leads to rework. Communicate changes in the ticket.
Tips
Hold a short walkthrough for complex features even with good annotations.
Use consistent frame naming so links in tickets are self-explanatory.
Ask engineers which annotations were most useful and standardize on them.
Link the PRD in the Figma file's cover page so engineers can find context.
How Vantage helps
Good handoff connects three things: the spec, the design, and the ticket. Vantage can import Figma designs as project context alongside the PRD, so requirements and generated tickets reference the right screens before they are pushed to Linear or Jira.