How to Hand Off Designs from Figma to Developers

Figma developer handoff happens in Dev Mode, the inspect workspace attached to the design file. Engineers get specs, generated code, design tokens and a readiness status there, in the same file the designers keep editing.

Designers mark sections, frames and components as Ready for dev. Developers with a Full or Dev seat inspect them on the same canvas.

The status says less than it appears to. Figma’s documentation lists four edits that do not flip a marked design to Changed. A library update to a component instance doesn’t, and neither does a new value on an applied variable, a new value on an applied style, or a temporary change such as hovering an object over an auto layout frame (Figma Help Center, as of October 2026).

What Is Figma Developer Handoff?

Developers get specs, code snippets, design tokens and readiness status inside the same file designers edit, which replaces exported PNGs, redline PDFs and spec sheets that go stale the moment a frame changes.

Pick any layer and its layout, spacing, color and type values are right there. Icons and images come with export settings already attached, variables and styles map to tokens, and components bring their details, variants and links to tickets or code. Every section, frame or component also carries a status.

Peloton’s design team used to manage designs in one tool and produce handoff specs in another. After Dev Mode launched, it replaced everything the other tools offered, according to Peloton’s customer story on Figma’s site.

There are limits, of course. Snippets describe the layout and style of a selection, while behavior, state and data handling stay with engineering.

For the step from a finished frame to working markup, this walkthrough on turning a Figma design into code picks up where Dev Mode stops.

What Do Developers Get Inside Dev Mode?

Most of it lives in the inspect panel, which holds layer specs, generated code, variables, assets and annotations. As of October 2026 Dev Mode runs on Professional, Education, Organization, Government and Enterprise plans and needs a Full or Dev seat (Figma Help Center).

It’s a separate workspace inside Figma Design files rather than a different app, and a Dev Mode link opens a file straight into it. A step-by-step Dev Mode guide covers the interface itself.

Select a layer and the panel fills in.

• Its name, type and the last time it changed
• Layout, spacing, colors and prototype interactions, switchable between Code and List views
• Applied styles and variables, with details one click away
• Component keywords, variants and properties, plus a playground for trying variations without editing the file
• Dev resources, meaning links to GitHub, Jira, Storybook or VS Code. Attach one to a component once and every instance shares it.

Time savings are easy to claim and hard to measure, so one number is worth having. HP surveyed 400 employees who use Dev Mode and found an average saving of 98 minutes per week, which the company attributes to reduced context switching (Figma customer story on HP, 2024).

Code output and units

The Code section generates CSS for web, SwiftUI or UIKit for iOS, and Compose or XML for Android. Codegen plugins extend that list, for example with Tailwind or React output.

The rem option divides by a root font size, 16px by default, and the unit scale setting changes that base. Which unit a team picks comes down to the px vs rem decision it already made in its stylesheets.

On Android, sp follows the user’s font size preference and dp does not.

Annotations and measurements

Designers pin measurements and notes to layers, and developers see them update as the design changes.

Measurements are added with the Measurement tool (Shift + M) and show spacing and sizing between layers. Holding Alt or Option measures too, but that result can’t be saved or shared. Annotations cover property callouts such as alignment direction or sizing, plus free text, all sorted into categories.

A Full seat with edit access can add either kind, and a Full or Dev seat can view them.

That last rule catches teams out. Product managers and QA on View seats see nothing. A Figma Community Forum request to change it, opened in July 2024, has passed 200 replies, and a second thread opened in April 2025 was still collecting replies in August 2026.

Asset export

Dev Mode detects icons and offers them as downloads, and automatic detection can be switched off to inspect a single vector. The Assets section also covers GIF and MP4 nodes, along with the source file of an image at full resolution. The format itself comes from the export settings on a layer, which can be PNG, JPG, SVG or PDF.

Pulling the source image beats exporting a whole frame, which drags in layers nobody asked for.

How Do You Prepare a Figma File for Handoff?

Most of the work is housekeeping, and the order matters.

1. Group finished screens into sections. Dev Mode puts section content first and collapses everything else in the left sidebar, so loose frames get buried.
2. Build with auto layout and components. Spacing and direction then exist as properties instead of hand-placed offsets, and variants appear in the component playground.
3. Bind colors, spacing and type to variables or styles. A raw hex value stays a raw hex value, and the developer has to hunt for the matching token.
4. Name layers and pages the way the code names components. One page per feature, with its states and variants on it, keeps assets easy to find.
5. Draw every state, not only the happy path. Empty, error and loading screens, plus the layout at each breakpoint.
6. Set export settings and annotate behavior. Icons go out as SVG, photos as PNG or JPG, and anything the inspect panel can’t infer (animation, conditional logic) gets an annotation.

Auto layout carries most of the weight here. A walkthrough on using auto layout in Figma covers resizing rules, gaps and padding.

Icons that leave Figma as SVG stay sharp at any pixel density.

A lot of developers hit the same failure here: a tidy-looking file full of raw values because step 3 got skipped. Dev Mode can suggest a variable for a raw value, but only on an exact value match with the right scope (Figma Help Center).

How Do Ready for Dev Status and Compare Changes Work?

The status is a label, not a lock. Designers mark sections, frames and components as Ready for dev, and Dev Mode flags any later edit with a Changed state that developers inspect through Compare changes.

The ready for dev view, available on Organization and Enterprise plans, lists every marked design in a file. Developers can filter it by All, Ready or Completed, and sort by recent activity, pages or name.

Focus view isolates one design with its version history. Developers can preview variable modes and frame sizes there without touching the real design.

Notifications go to Full or Dev seat holders who have opened the file in Dev Mode, and status updates within an hour are grouped by type into a single message. Organization and Enterprise plans add notifications for updates after a change and for Completed.

Compare changes reads from version history, so saved and autosaved versions both show up when you compare a top-level frame. Each layer change is labeled Edited, Added or Deleted. You can view the result side by side or as an overlay with a transparency slider, and the code and properties update too, including the old and new values of an edited layer.

Shift-click two components to compare them with each other. Detached components can be compared against the main component they came from.

Figma’s statuses documentation is specific about what stays quiet and does not set the Changed state.

• A component instance updated from a shared library
• A new value on a variable already applied to a layer
• A new value on an applied style
• A temporary change, such as dragging an object over an auto layout frame

The first three matter most. A library update or a token change moves what ships without raising a flag, so developers still need to check Compare changes against the version they built from.

How Do Figma Variables Become Design Tokens in Code?

A pipeline does it. It reads the variable’s name, value and modes and writes them out as CSS custom properties, Swift constants or Android resources. Dev Mode shows the variables, and a separate tool or API call produces the files.

Variables come in 4 types (color, number, string and boolean) and sit in collections with modes such as light and dark, per Figma’s Dev Mode documentation. A Figma variables guide covers the design-side setup.

For any variable, Dev Mode shows the name, the collection and the file that hosts it. It also shows the value in the current mode, along with the alias chain down to the raw value (Background/Positive/Default points to Green/500, which is #14AE5C in Figma’s example), the scope where the variable can be applied, and a code snippet for using it.

With nothing selected, a read-only Variables table lists the file’s local collections. Developers copy single values from it, so a full token file still needs a pipeline.

Customer.io standardized design properties with variables so developers read a spec instead of interpreting a mockup. One team member described new developers starting with 60 to 70 percent of the spec already in front of them (Figma customer story, 2024).

The Variables REST API reads local and published variables through GET endpoints and writes them through a POST endpoint. It needs an Enterprise plan, and writing needs a Full seat with edit access (Figma developer docs, as of October 2026).

Tokens Studio is a plugin that keeps tokens in JSON and syncs them to GitHub, GitLab, Bitbucket or Azure DevOps. Style Dictionary sits at the other end, a build system that turns token files into CSS, iOS, Android and other outputs. Version 4 reads the DTCG format natively.

The Design Tokens Community Group published the first stable Design Tokens Specification (2025.10) on October 28, 2025. The group’s own FAQ adds that the specification is not on the W3C Standards Track, so teams should build with room for changes.

Put the sources together and two routes appear. Enterprise teams read variables straight from the REST API. Teams on other plans can bring variables into Tokens Studio, sync the JSON to Git and run Style Dictionary on it, with DTCG as the shared file format.

Dev Mode also reshapes a few values to keep the code valid. A string variable for font weight does not appear as a variable reference. A matching string such as Thin becomes the number 100, and an unmatched one falls back to 400.

Variable names get normalized too, so a name with an emoji and spaces renders as –blue-0000FF. Number variables for font weight and plain names survive the trip intact.

What Does Code Connect Map, and What Does It Require?

Once a component in a Figma file is linked to its implementation in a codebase, Dev Mode shows the team’s own snippet instead of autogenerated code.

Teams that maintain a design system get the most out of it, since a button should come out as the real Button component and not a pile of CSS.

The CLI route uses template files written in TypeScript. Figma recommends it, and it works with any framework. Older parser guides still cover React and React Native, HTML (Web Components, Angular, Vue), SwiftUI and Jetpack Compose. The UI route does the mapping inside Figma with GitHub access to the repository, and one design component can point to several implementations, for example React and SwiftUI.

The two routes interact awkwardly. CLI connections show up in the UI but can only be edited in the CLI, and components connected through the UI show a file and component name in the Inspect panel instead of a snippet (Figma developer docs and Help Center, as of October 2026).

Access takes a Dev or Full seat on the Professional, Organization or Enterprise plan, and on Government according to the Help Center. Professional gets one active library and one active framework, while Organization and Enterprise allow several frameworks.

Sources disagree on the plan floor. Figma’s developer docs and Help Center list Professional. A Figma support reply on the community forum in December 2025 said custom mappings need Organization or Enterprise, and the Code Connect GitHub readme still says the same. In October 2026 forum posts, Professional users reported the API rejecting their mappings, and one traced the problem to outdated skills in an agent plugin.

The Professional limit has a sharp edge. The first publish sets the team’s active framework, and an admin can change it later, but connections for the old framework stay behind with a Deactivated badge and drop out of Figma MCP server responses.

Mozilla’s Firefox source docs show the CLI route for its Lit-based components. They warn that the command fails when the linked layer is a wrapper around components rather than a component itself.

Mappings only work as well as the components underneath them, so a pass through Figma components best practices pays off before the first publish. After that, template files live in the repository, go through code review and need updating whenever a component’s props change.

Figma also ships a figma-code-connect skill that helps an AI coding agent draft templates from a component URL. Live connections give the MCP server a direct reference to real code, which is why agents reuse components instead of inventing new ones.

Which Integrations Connect Handoff to the Rest of the Toolchain?

Handoff reaches past the canvas through Jira, GitHub, Storybook, Figma for VS Code and the Figma MCP server.

Jira, GitHub and Storybook

Each one attaches to a layer or component as a dev resource, so the ticket, the repository and the live component sit beside the design.

• The Figma for Jira app is free on the Atlassian Marketplace and co-owned by Figma and Atlassian. It links files to issues, sends notifications when a design changes or reaches Ready for dev, and supports JQL search for issues with linked designs.
• GitHub works through repository links added as dev resources, plus a Dev Mode plugin that ties designs to code.
• Storybook has a plugin that embeds stories in Figma and a design addon that embeds Figma in Storybook.

The Storybook plugin needs a Storybook published on Chromatic, edit permission in Figma and collaborator status in Chromatic. Code Connect’s own Storybook integration works only for React components.

Jira setup changed over time. The current Help Center article says linking a file uses automatic file-level webhooks with no admin setup, while earlier versions required a Jira admin to authenticate through the Dev Mode plugin with a Full or Dev seat or a trial.

Figma for VS Code

The extension lets developers inspect frames in focus view, filtered by section, status and page, and read code snippets, modes and styles in the Code tab. Auto-complete suggestions come from the selected layer, which is handy for components with no implementation yet.

• Comment notifications arrive in the editor
• Dev resources can be added, and they open the matching file in the editor

Frames without a parent section or a status do not appear in the extension, so unmarked work stays invisible there. It runs on all paid plans with a Full or Dev seat (Figma Help Center).

Figma MCP server and REST API

The Figma MCP server lets an AI agent read components, variables and layout data from a file, so generated code follows how the UI is actually built.

Only clients in the Figma MCP catalog can connect, including VS Code, Cursor and Claude Code. The feature is free during the beta and is planned to become usage-based (Figma Help Center).

Setup steps are moving. The Help Center article tells desktop-server users to click Enable desktop MCP server in the Dev Mode sidebar, while a reply on Figma’s community forum dated August 2026 says that button became Connect to AI agent and points to the command palette (Cmd+K or Ctrl+K) for the old toggle.

Teams that script their own pipeline can call Figma’s REST API for files, comments and dev resources, including attaching ticket or code links to nodes in bulk.

Rate limits scale with seat and plan, and the current limits took effect on November 17, 2025. The developer docs table gives View and Collab seats up to 20 file reads per month, while the examples on the same page and the Help Center table still say 6, so plan around the lower number.

Which Seat and Plan Does Figma Developer Handoff Require?

Full Dev Mode needs a Dev or Full seat on a paid plan, while View and Collab seats get basic inspection only. The figures below are as of October 2026.

• Dev Mode runs on a Dev or Full seat on Professional, Education, Organization, Government or Enterprise plans (Figma Help Center)
• A Dev seat on annual billing costs EUR 12 on Professional, EUR 25 on Organization and EUR 35 on Enterprise (Figma Help Center, 2025)
• A Full seat costs EUR 16, EUR 55 and EUR 90 on the same three plans (Figma Help Center, 2025)
• Code Connect needs a Dev or Full seat on Professional, Organization or Enterprise (Figma developer docs)
• REST API file reads are capped at 10, 15 and 20 requests per minute for Dev and Full seats on Professional, Organization and Enterprise (Figma developer docs)

The prices are euro list prices from Figma’s March 2025 pricing update. The Dev seat price stayed where the old Dev Mode seat was, even after seats gained FigJam and Slides access.

A Professional team with 5 designers on Full seats and 3 developers on Dev seats pays EUR 116 a month on annual billing (5 x 16 plus 3 x 12). That is the cheaper route compared with putting everyone on a Full seat.

Starter has no Dev Mode, so teams on the free tier should read how Figma free vs professional plans differ before budgeting.

One oddity: the remote MCP server is open to Starter plans. A team without Dev Mode can still point an agent at a file.

A View seat is free and still allows basic inspection, which covers a developer who only needs measurements. Dev seats can’t edit design files, so anyone who also maintains variables needs a Full seat.

Is Dev Mode Enough, or Does a Team Still Need Zeplin?

Dev Mode is enough for teams that design and build from one Figma file. Zeplin earns its place when sign-off needs locked snapshots, or when designs come from more than one tool.

Zeplin’s own August 2023 comparison concedes that small projects with soft deadlines get by fine in Dev Mode. Zeplin is a competitor, so the Zeplin column below reflects its published material.

Dev Mode has no publish step, so specs follow the file as designers edit. It comes with a Dev or Full seat, and Code Connect and the MCP server both build on it. The weak spots are that it only reads Figma, and its version history mixes autosaves with saved versions.

Zeplin works the other way around.

• Published screens stay locked while designers keep iterating, with versions tracked per screen
• Designs can come from several tools
• Styleguides and flows get documented next to the screens

The cost is a second tool to administer, and a locked screen trails the live file until someone republishes.

The dispute has moved since 2023. Zeplin argued that file-level autosaves make it hard to know which version is being compared, and Figma’s January 2024 Dev Mode update redesigned compare changes to show diffs both visually and in code (Figma blog, 2024).

Status updates on Organization and Enterprise plans can also carry a written reason that lands in the design’s version history (Figma Help Center). A named saved version at sign-off is the closest Figma equivalent to a locked snapshot.

Rule of thumb: stay on Dev Mode while one Figma file feeds one release train. Add Zeplin when an approval step needs a frozen record.

Where Does Figma Developer Handoff Break Down?

Dev Mode works only inside Figma Design files, so designs made in other tools stay outside it. Most other failures come from plan limits and mapping setups.

The Government row comes from Figma’s MCP documentation. The remote server and Code Connect UI are unavailable there, and its MCP services are not yet part of Figma’s FedRAMP audit.

Skip Code Connect when components are still being renamed or the framework is undecided. A mapping written against a moving target is rework, and Figma now recommends template files over parser setups and publishes a migration guide for older ones.

Audit trails need care too. Compare changes runs on file version history, which lists saved and autosaved versions together, so teams that must prove what was approved should save a named version at sign-off.

Figma Developer Handoff FAQ

How do you switch into Dev Mode?

Open a Figma Design file and click the Dev Mode toggle in the toolbar, or press Shift + D. A Dev Mode link opens the file in Dev Mode automatically.

The same shortcut exits it, and a short walkthrough shows how to get out of Dev Mode in Figma.

What is the difference between Dev Mode and the Inspect panel?

Dev Mode is the whole workspace. The Inspect panel is one tab inside it, the one that lists specs, code snippets, variables and assets.

Every seat type, including the free View seat, gets basic inspection, while full Dev Mode needs a Dev or Full seat (Figma Help Center).

Can developers edit the design file in Dev Mode?

No. Dev seats cannot edit Figma Design files. Developers can still comment, add dev resource links to components and change a design’s status.

Does Figma generate production-ready code?

No. Dev Mode builds snippets from the selected layer’s properties, and Figma’s developer documentation separates those autogenerated examples from the true-to-production code Code Connect displays.

Treat generated CSS, SwiftUI or Compose as a reference for layout and style, not a drop-in component.

How are prototype interactions handed off?

Interactions applied to a layer appear in its properties in the Inspect panel. Anything the panel can’t express, such as animation timing or conditional logic, belongs in an annotation on that layer.

Can developers comment on a design without a paid seat?

Yes. Every seat type, including the free View seat, can view and comment in files it has access to (Figma Help Center, as of October 2026).

Annotations are the exception, since only Full and Dev seats see them.

What to Change First in Figma Developer Handoff

Start by binding colors, spacing and type to variables, because Dev Mode token details, exported token files and MCP agent output all read the same bound values.

The order that follows from that:

1. Variables and styles in place of raw values
2. One owner for clearing the Changed state
3. Code Connect and ticket links once components stop moving

Every bound variable moves value edits out of the status system’s view. The owner in step two therefore reviews variable and style values at each sprint start, which is the price of the cleaner specs.

Verified on October 27, 2026, this order holds until Figma flags variable and style edits as Changed. Once it does, step two shrinks to clearing statuses.

Teams without a shared token set yet should begin with building a design system in Figma, since variables need a collection to live in.

• Author
• Recent Posts

Bogdan Sandu

Bogdan Sandu specializes in web and graphic design, focusing on creating user-friendly websites, innovative UI kits, and unique fonts.

Many of his resources are available on various design marketplaces. Over the years, he's worked with a range of clients and contributed to design publications like Designmodo, WebDesignerDepot, and Speckyboy, Slider Revolution among others.

Latest posts by Bogdan Sandu (see all)

• How to Insert Image in Figma With Ease - November 3, 2026
• How to Download Figma Files Fast and Free - October 30, 2026
• Figma Keyboard Shortcuts That Will 10x Your Speed - October 25, 2026