Design meets code: Inside Figma's Dev Mode

Figma has always been a web-native design tool, built for multiplayer collaboration from day one. Now, the company reports that on its paid plans, more developers visit Figma than designers. That shift has pushed Figma to reconsider how its product serves people whose primary job is implementation, not visual exploration.

The result is Dev Mode, a new, separate workspace within Figma aimed at developers. It is rolling out in beta alongside a set of plugin integrations, a Figma for VS Code extension, and new pricing plans tailored to engineering teams. The goal is to reduce the friction developers face when translating high-fidelity designs into production code, whether they are front-end engineers working from mature design systems, design systems engineers building components, or teams exporting assets for brand work.

A design tool that thinks like a browser inspector

One of the biggest complaints about design files is that they are not structured for implementation. Canvas objects, layers, and groups map poorly to the concepts a developer works with, such as code, icons, and tokens. Dev Mode attempts to close that gap by behaving like a browser inspector for the design file.

In this mode, developers can hover and click on the canvas to pull up measurement specs, export assets, and see contextual information from the design system. The code output has been redesigned to be a starting point, not a final answer. Console styles are echoed in a CSS box model view with modern, tree-based syntax, and units can be toggled between different dimension systems to match a team's codebase.

Token support also extends into Dev Mode. With the introduction of design tokens through variables—small bits of UI data intended to be shared across design and code—these tokens surface directly in the inspector view so it is clear what a developer needs to build a component. Teams can also attach relevant links to canvas objects to provide references to docs or plugins directly in context.

Plugins tie the workflow together

A product team's toolchain rarely stops at the design tool. To keep developers from hopping between Figma, project trackers, and code repos, Dev Mode supports a growing set of plugins. Management tools such as Jira, Linear, and GitHub let developers link issues and pull requests to specific designs, so the state of a feature is visible where the design lives. Storybook Connect brings codebase references into the context of the design itself. For teams that need custom code output, codegen plugins from AWS Amplify Studio, Google Relay, and Anima extend what Dev Mode generates, and teams can write their own plugins for unique workflows.

From design to production, with change tracking

Design files and code have historically been hard to reconcile. Even when work is in constant flux, the artifacts each side produces remain distinct, and keeping them in sync is manual. Dev Mode introduces signals that code is ready to be built. A designer can label a section as "ready for development" and send it directly to a developer—no separate page or file required.

For staying current on a moving target, diff support lets developers compare changes between different versions of a frame. This helps answer the perennial question of what changed in a design file since the last time it was open, without relying on a designer to summarize.

Context without leaving the editor

For engineers, leaving the code editor to check a design is a dealbreaker workflow-wise. The Figma for VS Code extension addresses that. With it, developers can review designs, check notifications and comments, and see what has changed while staying inside the IDE.

The extension also offers code autocompletion derived from the design currently being inspected, reducing the need to manually inspect specs and translate them into local styles or markup. The same extension, Figma for VS Code from the Dev Mode beta, supports developers who have design files open in a separate window but prefer to act from the editor.

Pricing and availability

Dev Mode and the VS Code extension/Figma for VS Code are now in beta. Both remain free for all users for the rest of 2023, but in 2024 Figma will move Dev Mode behind a paid plan. Editors on existing paid plans will have Dev Mode included. For developers who do not need the full Figma editor feature set, a Dev Mode-only license will be available starting in 2024, priced at $25 per seat per month on an Organization plan and $35 per seat per month on Enterprise.

As the beta proceeds, Figma plans to build on the feedback from those trialing Dev Mode and the VS Code extension, with the stated next steps being more refined ways to extract specs and further alignment between design and code artifacts. Teams can try Dev Mode now through a community file.