Figma Dev Mode: Everything Developers Need to Know

Dev Mode is not part of the free Starter plan. It takes a paid plan and either a Full or a Dev seat, and what you get is a read-only view of the designer’s own Figma file, with measurements, generated code, variables and downloadable assets, none of it opening the design for editing.

Specs come straight from the source file instead of a separate document.

A free View seat isn’t shut out completely, though. According to Figma’s Help Center page for admins (as of October 2026), it already covers basic inspection, so viewing properties and measurements, copying code and exporting assets all work. The paid seat adds Ready for dev statuses, Compare changes and Code Connect snippets.

What is Figma Dev Mode?

Designers build in Design mode. Developers open the same file in Dev Mode and read it, which means both roles work from one source and nobody has to keep a spec document alive on the side.

The Inspect panel gives CSS, iOS and Android code, with asset export and layer properties next to it. Compare changes shows what moved between versions of a frame. Ready for dev statuses and annotations tell a developer what’s finished and add notes where the visuals fall short. Links go out to Jira, Storybook, GitHub and the Figma for VS Code extension.

It’s a fairly young feature. Figma ran it as a free beta from Config 2023 and moved it out of beta on January 31, 2024 (Figma blog).

In that same post, Figma said developers account for a third of its weekly active users. Separately, Figma has said it bought Visly in 2021 for its developer experience, a team of eight designers and engineers who built a tool for developing UI components in React (Figma blog on how it built Dev Mode).

It is not an editor. A Dev seat has view and comment access to design files, and Figma describes the generated code as a starting point rather than finished output.

Basic inspection is a separate, lighter thing. Every seat type, including the free View seat, gets it, while full Dev Mode access needs a Full or Dev seat (Figma Help Center).

Who can use Figma Dev Mode, and what does it cost?

Figma’s Dev Mode guide lists the Professional, Education, Organization, Government and Enterprise plans. The Starter plan is not among them, and on any of the listed plans you still need a Full or a Dev seat.

Figma’s seat comparison page sets out what each seat type can do.

Dev Mode comes with the seat. There is no separate Dev Mode purchase, and Figma sends readers to its pricing page for current per-seat prices because the figure depends on plan and seat type.

In practice, engineers who only read designs need a Dev seat. A Full seat is for the people who edit Figma Design files.

Teams still on the free plan can look at how the free and Professional plans differ before they buy any seats.

The Dev seat has not always reached every plan. LogRocket’s 2024 billing breakdown described it as an Organization and Enterprise option, with Professional teams buying a Full seat for anyone who needed Dev Mode. Figma’s current guide lists Professional too.

How do you turn on Dev Mode?

Open a Figma Design file and click the Dev Mode toggle in the toolbar, or press Shift+D. The same shortcut switches back to Design mode.

A Dev Mode link works as well, and it drops anyone who opens it straight into Dev Mode (Figma Help Center).

Shift+D is one of Figma’s keyboard shortcuts, and it works in Figma Design files only.

Leaving is just as simple. Pick another mode from the toolbar toggle or press Shift+D again, and a separate guide shows how to exit Dev Mode step by step.

Code snippets appear in Dev Mode’s Inspect panel only when an object is selected on the canvas, according to Figma’s code snippets documentation. Without Dev Mode access, the nearest equivalent is right-clicking an object in Design mode and choosing Copy/Paste as, then Copy as code.

With nothing selected in Dev Mode, the right panel shows the default language and unit settings instead.

What does the inspect panel show?

Select a layer and the panel lists its name and type, layout and spacing, colors, applied styles and variables, plus a Code section with generated snippets. Components add keywords, variant details and properties on top.

• Layer details cover the name, the type (component, instance, frame, text) and when it was last updated.
• For components you also get keywords, the main component’s layout, variants and component properties.
• Layout, spacing, colors and prototype interactions show up as layer properties, in Code view by default or as a List.
• The styles and variables applied to the layer sit in their own section.

Click any value in List view to copy it. For components, Explore component behavior opens a playground where properties and variable modes can be tested without touching the design.

Layout guides, rulers and layer outlines stay available in Dev Mode too.

Switching code language and units

One rem equals 16px in CSS output by default, and the root size is adjustable (Figma Help Center).

To set defaults, deselect everything on the canvas and choose a language and unit in the Code section. With a layer selected, the same dropdown overrides them for that layer.

On Android, dp scales across screen sizes and sp also follows the user’s font size setting, which is why sp is the text unit.

Unit scale sits under Inspect settings next to the language dropdown. It sets dimensions relative to a size you choose, such as a root font size for rems or a factor that converts canvas pixels into iOS points. Settle the px versus rem question before handoff starts, because changing it later means everyone re-reads their values.

Exporting assets

Dev Mode detects icons on its own and lists them as downloadable assets. Export settings on a layer give you PNG, JPG, SVG and PDF, the Assets section handles GIF and MP4 nodes, and an image’s source file can be downloaded at full resolution.

Turn off automatic icon detection under Main menu, then View, when you need to inspect a single vector layer inside an icon. Anyone new to pulling images out of a file can follow a walkthrough on downloading an image from Figma.

How do Ready for dev, annotations and Compare changes keep a handoff current?

Designers mark finished work as ready for dev and add annotations. Developers use Compare changes to see what moved since they last looked. Together these replace hand-drawn measurements and callouts.

Figma’s own framing is that handoff is ongoing collaboration, not a single moment (Figma blog, January 2024). That is the thinking behind a continuous developer handoff in Figma rather than a one-time spec drop.

Ready for dev statuses

• To set it, select a frame, component, instance or section in Dev Mode and click Mark as ready for dev.
• The Ready for dev status comes with every plan that includes Dev Mode. The Completed status needs Organization or Enterprise.
• The ready for dev view and the single-design focus view are Organization and Enterprise features. Full, Dev and View seats can open the ready for dev view, but the focus view is limited to Full and Dev seats.
• Full and Dev seat holders who viewed a file get a notification each time a design is marked ready, including when the status was removed and set again.

Sections get priority in the left sidebar. Anything outside a section stays visible but collapsed by default.

Annotations

Annotations live on the design, not in a separate file.

They carry text notes and measurements, and they update live when the design changes (Figma blog, January 2024).

Adding annotations and saved measurements takes a Full seat with edit access to the file, while Full and Dev seat holders can view them. A developer can still hold Option (Mac) or Alt (Windows) and hover over a second layer to measure the distance between two layers, though that measurement can’t be saved. Plugins can automate and customize annotations when a team wants a fixed format.

Compare changes

If a frame or component changed since a developer last viewed it, Compare changes appears in the Inspect tab under the layer information. It opens the frame history modal, where the current version sits against earlier ones.

• Side by side and overlay views
• A code diff between the previous and current version of an edited layer
• A property diff showing old and new values
• Shift-click on two components to compare them with each other

Instances get a Compare with main component option, and a detached component can be compared with both its earlier versions and the main component it came from. The history behind it includes saved and autosaved versions, and the code diff has its own language and unit dropdown.

How do variables, styles and codegen plugins turn into code tokens?

Dev Mode lists the variables and styles applied to a layer and writes variable references straight into the code snippet. Codegen plugins add languages and frameworks that Figma does not generate natively.

Variables in the inspect panel

Click a variable name in a snippet and the Variable details modal opens with its name, host file, collection, mode, value, scope and a code snippet for using it.

Figma’s documentation follows a Background/Positive/Default variable through its alias Green/500 down to the raw value #14AE5C. Designers who want the setup side can read a guide to setting up Figma variables before handing a file over.

The modal shows the alias chain resolved to a raw value, with a mode switcher. When an inspected value is raw (a designer detached a variable, say), Dev Mode proposes variables with exactly the same value and a matching scope. And with no layer selected, Open variables table shows a read-only copy of the file’s local collections.

One spot where it breaks is string variables used for font weight, which lose their reference. A number variable named Thin-100 with the value 100 outputs font-weight: var(–Thin-100, 100), while a string variable set to Thin outputs font-weight: 100 with no variable at all.

A string that matches no valid weight for the font falls back to 400. Variable names are also normalized into valid CSS, so Figma’s example turns a name made of an emoji, a color name and a hex value into –blue-0000FF.

Codegen plugins

Codegen plugins appear in the same dropdown as CSS, SwiftUI and Compose, and the Plugins tab lists recently used and recommended ones from Figma Community.

Figma’s guidance is that codegen augments development instead of automating it (Figma blog on codegen plugins). Treat the output as a starting point.

• Anima and Figma to Code are the ones Figma names for HTML and CSS, React and Tailwind output.
• Code Snippet Editor produces dynamic snippets that mirror your own component code.
• Teams with a design system can build custom plugins around it.
• The Variables REST API is what teams use to sync design tokens between Figma and code.

A codegen plugin declares dev as its editor type, the codegen capability and at least one entry in codegenLanguages in its manifest, and its generate callback runs whenever the selection changes (Figma developer docs). Enterprise admins can pin a plugin and set it to run by default across every file in the organization.

For the wider picture of moving from a design file to working code, see this walkthrough on turning Figma into code.

Native snippets cover layout and style properties. Component logic stays with the developer.

What is Code Connect and how is it set up?

Figma’s Help Center calls Code Connect a bridge between a codebase and Dev Mode. It links components in your repositories to components in your design files, so Dev Mode shows real production code instead of autogenerated snippets.

It needs a Full or Dev seat. As of October 2026, the Help Center lists the Professional, Organization, Government and Enterprise plans, and Figma’s developer docs list Professional, Organization and Enterprise.

The README in Figma’s code-connect repository on GitHub still says Organization and Enterprise only, so the sources don’t fully agree. Treat the docs as current. They spell out the Professional limit of one active library and one active framework, while Organization and Enterprise plans can have several active frameworks.

The mappings work by tying properties on a design system’s components to properties in Figma. That is how Dev Mode can show a Button snippet with the right size and disabled state for each instance.

Code Connect UI or Code Connect CLI?

Figma offers two routes, and they can run side by side in one design system.

Code Connect UI supports one-to-many connections. Figma’s example maps one Button component to its React, SwiftUI, Jetpack Compose and Vue versions.

Connections made with the CLI show up in Code Connect UI, but only the CLI can edit them.

Setting up Code Connect CLI

1. Plan the implementation: which languages and frameworks your design system supports, and which components go into Dev Mode.
2. Install the CLI and add a Code Connect configuration file to your project.
3. Write template files that map Figma properties to the values your component API expects.
4. Review the output in Dev Mode with developers and designers.

Template files are TypeScript files, and Figma recommends them for every framework. Its developer docs show a Button file that reads the Size, Disabled and Text Content properties of the selected instance.

Older framework guides still exist for React and React Native, HTML (Web Components, Angular, Vue), SwiftUI, Jetpack Compose and Storybook. According to the Help Center, the people who own the production components should write the mappings together with designers.

How does the Figma MCP server connect Dev Mode to AI coding tools?

It gives AI coding agents structured design context (components, variables, layout) from your Figma files, so they generate code from the design instead of a screenshot. The name has shifted over time. It started as the Dev Mode MCP server, and Figma now documents it as the Figma MCP server.

It follows the Model Context Protocol, a standard interface for agents that work with data sources. Any client in the Figma MCP catalog can connect, including Claude Code, Cursor, VS Code, Codex, Gemini CLI, Xcode and Android Studio.

Connecting a client

Figma recommends the remote server, a hosted endpoint at https://mcp.figma.com/mcp that works without the Figma desktop app.

The desktop server runs locally through the Figma desktop app and needs a Dev or Full seat. You enable it from the MCP server section of the right sidebar in Dev Mode.

Prompting differs between them. Selection-based prompts work only on the desktop server, while the remote server needs a link from Copy link to selection. The client never opens that link. It extracts the node ID, which tells the server which layer to return (Figma Help Center).

Tools worth knowing

The default output of get_design_context is React with Tailwind styling, and a prompt can ask for Vue, plain HTML and CSS or iOS instead.

For component reuse, the remote server takes a clientFrameworks parameter set to your Code Connect label, such as React or SwiftUI. The desktop server uses the mapping selected in Dev Mode.

Access and rate limits

Figma’s developer docs set limits by seat and plan, as of October 2026.

• Professional plan with a Full or Dev seat gets up to 200 calls per day, 10 per minute.
• Organization with a Full or Dev seat also gets 200 per day, but 15 per minute.
• Enterprise with a Full or Dev seat goes up to 600 per day and 20 per minute.
• View or Collab seats, and the Starter plan, are capped at 20 per month.
• Education plans match Professional.

The limits apply to tools that read data from Figma. Some tools are exempt, including add_code_connect_map, create_new_file, generate_figma_design and whoami, and actions that spend Figma AI credits do not count either.

For the free tier, the README in Figma’s mcp-server-guide repository and Replit’s integration docs give 6 calls per month, while Figma’s rate limits page and MCP FAQ give 20. The docs are the maintained source, so plan around 20 and recheck before depending on it. Figma can change the limits at any time.

Which integrations connect Dev Mode to Jira, Storybook, GitHub and VS Code?

Dev resources attached to layers, plugins from Figma Community and the Figma for VS Code extension each create a different kind of link.

Dev resources

A dev resource is an external link attached to a layer. Figma’s examples are a GitHub file on a component, a Jira ticket on one part of a mockup, and Storybook stories for a component.

• Add one in the inspect panel through Layer options, then Add a dev resource link
• A link on a component is inherited by every instance
• A link on one instance appears only on that instance
• If a matching plugin exists, clicking the link launches it in the Plugins tab

Dev resources work on all paid plans with a Full or Dev seat.

Plugins for Jira, Storybook and GitHub

Figma’s January 2024 post also names Linear for project management and Stark for accessibility checks.

Figma for VS Code

The extension installs from the Visual Studio Marketplace and asks for a Figma sign-in on first launch. It needs a Full or Dev seat on any paid plan.

To jump over from Dev Mode, set CSS as the preferred language, click a top-level frame, then choose Open in VS Code from Options next to the layer name.

• A Code tab for snippets, modes and styles
• A Dev resources tab, where a link with a matching file in your codebase opens that file in VS Code
• Component and Assets tabs for properties and exports
• Notifications for comments in real time

Frames appear grouped by section, status and page. A frame with no parent section or status stays hidden in the extension (Figma Help Center), so file structure decides what a developer sees there.

The extension also autocompletes code for components with no existing implementation and runs plugins inside the editor.

How should designers prepare a file for Dev Mode?

Name layers by purpose, turn repeated elements into components, bind spacing and color to variables, and build with auto layout. Figma’s MCP documentation lists the same practices because they decide how clean the generated code is.

• Replace default names like Frame1268 or Group5 with CardContainer, ProductImage or CTA_Button
• Make buttons, cards, inputs and nav items components
• Apply variables to spacing, color, corner radius and typography
• Use auto layout, then resize the frame to confirm it responds as intended
• Annotate behavior, alignment and responsive rules that are hard to show visually
• Attach dev resources so developers reach related docs, code and tickets

Figma calls Code Connect the most effective way to get an agent to reuse real components. Without it, the agent guesses which code component matches, and clean components still come first, so the best practices for Figma components are worth reading before the first handoff.

Auto layout shows how a design responds to different sizes and avoids absolute positioning, which usually leads to cleaner, more predictable code (Figma developer docs). A walkthrough on using auto layout in Figma covers the setup.

When does Figma Dev Mode fall short?

It works best on a structured file and a team with a design system. Oversized frames, Code Connect setups that nobody has time to maintain, and plans or clients missing a feature are where it stumbles.

Oversized frames in the MCP server

Large selections slow the tools, cause errors or return incomplete results when the agent gets too much context (Figma developer docs).

Generate code for a card, header or sidebar instead of a whole page. For a large design, the agent can call get_metadata for an outline first, then request design context for only the parts it needs.

Code Connect gaps

• Components connected through Code Connect UI show only a file and component name in the inspect panel, plus AI previews. Real snippets there need the CLI.
• Preview code can differ slightly from what an agent produces, because previews are generated without the conversation history.
• Framework-specific parsers are no longer actively maintained, so older setups need migrating to template files.
• Only the file owner or an organization admin can connect GitHub, and GitHub Enterprise Server is not supported (manual paths work instead).

Figma pitches Code Connect for teams with an existing design system. A team without one should start with variables, annotations and dev resources, and add Code Connect later.

Plan and client limits

Figma for Government supports the desktop MCP server only.

Writing to Figma files from an agent needs the remote server and a Full seat outside your drafts. It is free during the beta and will eventually become a usage-based paid feature (Figma Help Center).

The desktop server needs a Dev or Full seat, and Figma describes it as intended for specific organization and enterprise needs.

Figma Dev Mode FAQ

Does Zeplin still make sense next to Dev Mode?

Yes, when designs come from more than one tool. Zeplin is a standalone handoff platform that imports designs from Figma, Sketch, Adobe XD and Photoshop, according to LogRocket, while Dev Mode is a mode inside Figma and reads only Figma files.

Can the Figma REST API read Dev Mode data?

Partly. Dev resources have GET, POST, PUT and DELETE endpoints, and a node holds at most 10 dev resources, per Figma’s developer docs.

The Variables REST API is limited to Enterprise organizations.

Is Figma Make part of Dev Mode?

No, Figma Make is a separate prompt-to-code product. A Dev seat can try it in drafts, and the Figma MCP server reads Make files through get_design_context, according to Figma’s seat comparison and developer docs.

What can someone with view-only access still do in a Design file?

They can inspect in Design mode: measuring distances, viewing properties, copying generated code, exporting assets and commenting (Figma Help Center). Running plugins needs can edit access to the file.

Compare changes still needs a Full or Dev seat.

How do developers request Dev Mode access?

Anyone whose seat lacks Dev Mode can request a Full or Dev seat, and admins handle it through seat approval settings. Those can be set to manual approval, manual unless a seat is available, or auto-approve.

If no matching seat is free, approving the request adds one to the subscription.

Where to Start With Figma Dev Mode

The order matters here, because each step supplies the input the next one reads. Start with Dev seats and a structured file. Code Connect for one framework comes next, and the Figma MCP server on a Dev or Full seat goes last.

A Professional plan covers all of it for a team on one framework. An upgrade to Organization is justified by a second platform, such as React plus SwiftUI, since that plan allows several active frameworks.

The trade-off is delayed output, because the mapping work comes before any agent produces component-accurate code.

Teams with no design system should build one first, and a walkthrough on creating a design system in Figma covers that groundwork.

• 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