Figma Dev Mode: How Developers Use It, What It Costs And Handoff Best Practices
Lily Roberts
Senior Marketing Strategist
10.10.2026
Short answer: Figma Dev Mode is the developer view of a Figma Design file, where engineers inspect layers, copy code snippets, read variables and annotations, and track which designs are Ready for dev. You switch to it with Shift + D or the toggle in the toolbar. It needs a paid plan and a Full or Dev seat; on the Professional plan a Dev seat is listed at $12 per month versus $16 for a Full seat. Code Connect and some handoff views are limited to the Organization and Enterprise plans.
Figma Dev Mode exists because the old handoff routine (a designer exports redlines, a developer squints at a static file, both argue in Slack about spacing) does not scale. Dev Mode puts the inspection tools, generated code, design tokens and status tracking in the same file the designer is working in, so the developer always reads the current version. In 2026 it also feeds AI coding tools through the Figma MCP server.
This guide covers what dev mode Figma users actually get, which seats include it, the features developers touch during handoff, Code Connect, the MCP server, the limits of generated code and a handoff checklist. Plan and feature details were checked against Figma’s help center and pricing page in October 2026.
Figma Dev Mode is a separate interface inside Figma Design built for the people who implement designs rather than create them. The canvas looks the same, but the editing toolbar is replaced by an Inspect panel, the layers panel highlights what is ready to build, and everything is read only for the developer. A designer can keep editing in Design Mode while a developer inspects the same file in Dev Mode at the same time.
Since its 2023 launch the feature set has grown in three directions:
Inspection: measurements, code snippets in several languages, variables with their code syntax, component properties and asset export.
Handoff workflow: Ready for dev statuses, notifications when a marked design changes, compare changes between versions, annotations and a focus view for a single frame.
Design to code connections: Code Connect for mapping Figma components to real code, a VS Code extension, plugins for tools like Jira, GitHub and Storybook, and the Figma MCP server that passes design context to AI coding agents.
How To Turn On Dev Mode
Turning on Dev Mode takes one keystroke once your seat allows it:
Open any Figma Design file you have at least view access to.
Press Shift + D, or click the Dev Mode toggle in the toolbar at the bottom of the canvas.
Select a frame, component or layer. The right panel switches to the Inspect panel with properties, code and assets.
Press Shift + D again to return to Design Mode (if your seat lets you edit).
If the toggle is missing or opens an upgrade prompt, the cause is almost always the seat, not the file. Dev Mode is available on paid plans only and requires a Full seat or a Dev seat. A Collab seat on a paid plan gets basic inspection only, and the free Starter plan does not include Dev Mode. Ask your Figma admin to upgrade your seat, or request one from the prompt so the admin is notified.
Figma Dev Mode Pricing: Dev Seat vs Full Seat
Figma dev mode pricing is not a separate add on. Since Figma restructured its billing in March 2025, access comes through seat types on each paid plan. A Full seat includes edit access to Figma Design plus Dev Mode and Figma’s other products. A Dev seat includes full access to Dev Mode, FigJam, Figma Slides and Figma Buzz, with view and comment access to Figma Design files. A Collab seat covers FigJam, Slides and Buzz and only basic inspection in Dev Mode.
Here are the list prices per seat per month shown on Figma’s pricing page in October 2026. Organization and Enterprise are billed annually. The Professional plan offers monthly or annual billing, and the monthly option costs more, so confirm which figure applies to you on the Figma pricing page.
Plan
Full seat
Dev seat
Collab seat
Dev Mode access
Starter (free)
Free
Not offered
Not offered
Not included
Professional
$16 per month
$12 per month
$3 per month
Full and Dev seats; Collab gets basic inspection
Organization
$55 per month
$25 per month
$5 per month
Full and Dev seats; Collab gets basic inspection
Enterprise
$90 per month
$35 per month
$5 per month
Full and Dev seats; Collab gets basic inspection
Which Seat Should A Developer Get
For most engineers, the Dev seat is the right call. It costs less than a Full seat on every paid plan and covers everything in Dev Mode, including the desktop MCP server and the VS Code extension. The cases where a developer needs a Full seat are narrower:
They need to add annotations or measurements (only Full seats with edit access can add them; Dev seats can view them).
They maintain the design system in Figma, for example editing variables or component variants.
They are a design engineer who prototypes directly in Figma Design.
PMs and QA testers who only check measurements occasionally can often use a Collab seat. For a broader breakdown of every plan and the AI credit model, see our Figma pricing guide.
Core Dev Mode Features Developers Use Daily
Not every Dev Mode feature is on every plan. The table below summarizes availability for Full and Dev seats as described in Figma’s help center in October 2026. Starter is left out because it does not include Dev Mode.
Feature
Professional
Organization
Enterprise
Inspect panel and code snippets
Yes
Yes
Yes
Variables and code syntax in Inspect
Yes
Yes
Yes
Ready for dev status and notifications
Yes
Yes
Yes
Completed status
No
Yes
Yes
Ready for dev view (file wide list)
No
Yes
Yes
Compare changes
Yes
Yes
Yes
Annotations and measurements
Yes (add with Full seat)
Yes (add with Full seat)
Yes (add with Full seat)
Code Connect
No
Yes
Yes
Figma for VS Code
Yes
Yes
Yes
MCP server limit (Dev or Full seat)
200 calls per day, 10 per minute
200 calls per day, 15 per minute
600 calls per day, 20 per minute
Inspect Panel And Code Snippets
Select any layer and the Inspect panel shows its dimensions, position, layout (including auto layout gap and padding), typography, fills, strokes, effects and component properties. Distances between layers appear when you hover with a layer selected. Icons are detected automatically and can be downloaded as assets in the format you choose.
The code section generates snippets in CSS, SwiftUI, UIKit, Jetpack Compose and Android XML. You can set the unit scale (for example, rem instead of px) and pick a language per file. Codegen plugins extend this to other targets, and teams with Code Connect can replace generated snippets with their real component code.
Variables And Design Tokens
When a design uses Figma variables, Dev Mode shows the variable name rather than just the raw value, so a developer sees var(--spacing-md, 16px) instead of a bare 16px. Color, number, string and boolean variables all appear. The Variable details view shows which mode a value comes from, lets you switch modes (for example light and dark), and traces aliases back to the raw value.
Design system owners can set a code syntax for each variable per platform, so the snippet shows the exact token name your codebase uses. This stops developers from hardcoding values that should be tokens.
Ready For Dev Status
Designers mark sections, frames and components as Ready for dev when they are approved for build. If a marked design is edited afterward, Figma applies a Changed state automatically, and developers who viewed the file get notified. On Organization and Enterprise plans, developers can also mark work as Completed, and a Ready for dev view lists every marked design in one place with filters for status. On Professional, statuses work, but you browse them on the canvas.
Compare Changes
Compare changes shows what moved between two versions of a frame. You get a version timeline, layer level labels for Edited, Added and Deleted, side by side and overlay views, property value changes, and updated code snippets.
Annotations And Measurements
Designers add annotations with Shift + T and persistent measurements with Shift + M. Annotations can hold free text plus pinned properties, and come with four preset categories: Development, Interaction, Accessibility and Content. Teams can add their own categories. Only Full seat users with edit access can add them; Full and Dev seat users can view them in Dev Mode. Use them for behavior a static frame cannot show, such as truncation or focus order.
Code Connect: Real Components Instead Of Generated Snippets
Figma code connect links components in your Figma design system to the matching components in your codebase. Once connected, selecting a Button instance in Dev Mode shows your actual <Button variant="primary" size="sm"> usage instead of a block of generated CSS. That is the difference between a snippet a developer has to rewrite and one they can paste.
According to Figma’s Code Connect documentation, it is available on Organization and Enterprise plans and requires a Full or Dev seat. There are two ways to set it up:
Code Connect UI: runs inside Figma, connects to a GitHub repository or accepts component paths you enter, and supports several code mappings per component (useful if you ship React and SwiftUI from one design system). Low setup, good for mixed design and engineering teams.
Code Connect CLI: runs in your repository from the terminal, uses template files to map Figma properties to your component API, and produces accurate, dynamic snippets in the Inspect panel. More work up front, better for mature design systems.
Code Connect also feeds the MCP server, so AI coding agents reference your real components instead of inventing new ones.
The Figma MCP Server And AI Coding Tools
The Figma MCP server (first introduced as the Dev Mode MCP server) uses the Model Context Protocol to pass structured design context to AI coding agents. Instead of an agent guessing from a screenshot, it reads the frame’s layout, variables, components and Code Connect mappings, then generates code that uses your tokens and components.
Figma offers two versions. The remote server is hosted by Figma, is the recommended option, and is available on all seats and plans. The desktop server runs through the Figma desktop app and requires a Dev or Full seat on a paid plan. Figma lists support for clients including VS Code, Cursor, Claude Code, Windsurf, Android Studio, Gemini CLI, Copilot CLI and Xcode, and keeps an MCP catalog for the current list.
Usage is rate limited. Per Figma’s developer docs, Starter users and View or Collab seats get up to 20 tool calls per month, while Dev and Full seats get 200 per day on Professional and Organization and 600 per day on Enterprise, with per minute caps shown in the feature table above.
The server now works in both directions. Beyond design to code, Figma describes tools that let agents write to the canvas (frames, components, variables, auto layout) and turn a live UI back into editable Figma frames for review. For a team, the practical workflow looks like this:
Designer marks a frame Ready for dev.
Developer copies the link to that frame and asks the agent in their editor to implement it.
The agent pulls design context through the MCP server and generates code using connected components and tokens.
Developer reviews, fixes logic and edge cases, and checks the result against the frame in Dev Mode.
The quality of step 3 depends almost entirely on how clean the Figma file is. Auto layout, named layers, variables and Code Connect make agents far more accurate.
Figma For VS Code
Figma for VS Code brings Dev Mode into the editor. It is available on all paid plans with a Full or Dev seat and is installed from the Visual Studio Marketplace. With it, a developer can:
Browse frames by page, section and status, with search and a focus view for one design.
Inspect layers and copy properties without switching to the browser.
See and reply to comments and activity in real time.
Get code suggestions based on the design while typing.
Link code files to components through Dev resources and download assets.
Run Dev Mode plugins inside the editor.
A Practical Figma Handoff Checklist
Dev Mode only helps if the file is ready for it. Figma handoff breaks down in predictable places: missing states, detached components, hardcoded values and frames that were never meant for build. Use this checklist before marking anything Ready for dev.
Designer Side
Separate exploration from build. Keep work in progress on its own page or section. Only final designs get the Ready for dev status.
Use auto layout everywhere it applies. It maps to flexbox and stack layouts, and it is what makes generated code and agent output usable.
Bind values to variables. Colors, spacing, radius and type should reference variables, with code syntax set to match your token names.
Use library components, not detached copies. Detached instances break Code Connect and confuse developers about what is reusable.
Name layers and frames meaningfully. “Checkout / Payment / Error” beats “Frame 112”.
Design every state. Empty, loading, error, hover, focus, disabled and long content. If a state is not drawn, it will be invented.
Annotate behavior. Use Development, Interaction and Accessibility annotations for logic, animation, focus order and screen reader labels.
Mark exportable assets. Set export settings on images and icons so they download in the right format and size.
Developer Side
Set your code language and units in the Inspect panel before copying anything.
Check variables, not raw values. If the snippet shows a hex code where a token should be, flag it rather than hardcoding it.
Run compare changes before starting and before shipping, especially if the Changed state appears.
Link your tickets and code through Dev resources so the next person finds them.
Mark Completed (Organization and Enterprise) so designers know what shipped.
Many handoff problems start earlier in the process; our guide to the product design process walks through where validation and sign off belong.
The Limits Of Figma To Code And When To Bring In A Build Partner
Searches for “figma to code” and “figma to html” usually come from people hoping Dev Mode will export a working site. It will not, and it is not designed to. Generated snippets describe individual layers: a box with these dimensions, this padding, this font. They are reference material, not an application.
Here is what generated code (from Dev Mode snippets or an MCP powered agent) typically does not handle on its own:
Semantics and accessibility. Figma does not know a group of layers is a form, a nav landmark or a button with a keyboard handler.
Application logic and data. Validation, API calls, state management, authentication and error handling come from engineering.
Responsive rules between breakpoints. Two frames do not define what happens at every width in between.
Content management. A marketing site needs editable templates, fields and permissions in a CMS.
Performance and SEO. Image optimization, rendering strategy, structured data and metadata are build decisions.
When Teams Hand Designs To A Build Partner
In practice, companies bring in outside help at three points. The first is a marketing site designed in Figma that needs to live in a CMS the marketing team can edit. For many B2B companies that means WordPress, and specialist Figma to WordPress development agencies turn approved Figma files into custom themes or block based builds with proper templates and editing controls.
The second is a smaller site or landing page where speed matters more than a custom stack. Figma’s own publishing tool is one route (see our Figma Sites guide for what it can and cannot do), and visual builders like Framer are another; teams that want it done properly often use Framer agencies and experts who can import from Figma and finish interactions and CMS setup.
The third is earlier in the chain: the Figma files themselves are the problem. No components, no variables, inconsistent spacing, missing states. No handoff tool fixes that. Here a product design agency can rebuild the design system and file structure so internal developers (and their AI tools) get usable input. When comparing partners, ask to see a real handed off Figma file, not just finished screenshots.
Frequently Asked Questions
Is Figma Dev Mode free?
No. Dev Mode requires a paid plan and a Full or Dev seat. Collab seats on paid plans get basic inspection only, and the free Starter plan does not include Dev Mode. Anyone with view access can still see a file in Design Mode and use simple measurement on the canvas.
What is the difference between a Dev seat and a Full seat?
A Dev seat gives full Dev Mode access plus FigJam, Slides and Buzz, with view and comment access to design files. A Full seat adds editing in Figma Design and the other Figma products. On Professional, figma dev mode pricing is $12 per month for a Dev seat versus $16 for a Full seat at list price, so most developers only need a Dev seat.
How do I open dev mode in Figma?
Open a Figma Design file and press Shift + D, or click the Dev Mode toggle in the toolbar. If nothing happens or you see an upgrade prompt, your seat does not include Dev Mode and you need to request a Dev or Full seat from your admin.
What plan do I need for Figma Code Connect?
Code Connect is available on the Organization and Enterprise plans and needs a Full or Dev seat. You can set it up through Code Connect UI inside Figma or with the Code Connect CLI in your repository, and both approaches also feed the MCP server.
What is the Figma MCP server?
The Figma MCP server passes structured design context (layout, variables, components, Code Connect mappings) to AI coding tools such as Cursor, VS Code, Claude Code and Windsurf. The remote server is available on all seats and plans, while the desktop server needs a Dev or Full seat on a paid plan. Rate limits depend on plan and seat.
Can Figma convert a design to HTML?
Dev Mode generates CSS and native snippets for individual layers, not a complete HTML page or site. For figma to html at production quality you need a developer, an AI agent supervised by a developer, a publishing tool like Figma Sites, or a build partner who converts the design into a CMS theme.
The Short Version
Figma Dev Mode is the developer side of a Figma file: inspection, code snippets, variables, Ready for dev statuses, compare changes and annotations, opened with Shift + D. It needs a paid plan and a Dev or Full seat, and the Dev seat is the cheaper, usually sufficient choice for engineers. Code Connect, the Completed status and the Ready for dev view are reserved for Organization and Enterprise, while the MCP server and VS Code extension connect Dev Mode to the tools developers already use.
The tooling only works as well as the file behind it. Invest in auto layout, variables, components and annotations, follow a consistent handoff checklist, and treat generated code as a starting point. When the gap is a CMS build or a broken design system rather than a tool, that is the moment to bring in a specialist partner.
