Making Figma better for developers with Dev Mode

Figma was born on the web—an unconventional start to a design tool, but one we felt product design desperately needed. With a single link, designers could collaborate on in-progress work, sharing early explorations, rather than safeguarding designs until they felt “polished.” As more and more designers embraced Figma and this multiplayer way of working, we began to see a natural broadening of use across teams and disciplines, especially with developers.

Today, we know that on our paid plans more developers visit Figma than designers. We also know that understanding developers’ needs and their challenges is critical to making Figma a place where product development can be more efficient, collaborative, and expressive.

Developers have unique workflows and preferences. From front-end developers working with mature design systems, to design systems engineers building components, to those building content layouts and exporting assets in their work with brand designers, every team wants to work with as little friction as possible.

With Dev Mode, we see a huge opportunity to get developers what they need quickly and efficiently—just as we did with designers when we first set out to build Figma. The easier it is for teams to design, document, find, and implement high-fidelity designs without losing sight of the work and each other along the way, the better the product outcomes. We’re excited to take this first step in bridging design and development in Figma, and we can't wait to see what teams do next.

Get to coding faster

While the Figma canvas is great for freeform design exploration, it can be confusing if you’re dropped into a design file that’s missing information needed for implementation. Dev Mode is like a browser inspector for your design file, and it brings design concepts—shapes, layers, and groups—closer to developer concepts like code, icons, and tokens. By hovering and clicking around the Figma canvas, you can find and export all the information you need, like measurements, specs, and assets, and uncover additional context from your design system. Much like Chrome Dev Tools, Dev Mode takes inspiration from other development tools to create an environment that’s immediately familiar to you.

Code in Dev Mode is entirely redesigned and customizable for whichever language you’re working in. We know that code isn’t useful out of the box. Rather, it’s a jumping off point so you don’t have to go from 0 to 1 every time. You’ll now see a CSS box model, a modern syntax with a tree view, and you can toggle between dimension units to match your codebase.

Access everything you need, in one place

Building products requires a robust toolchain, but jumping between design libraries, the codebase, and other project management tools can create inefficiencies, especially when components and style names don’t match what’s in code, or the team doesn’t track and document tasks. Dev Mode aims to make you more productive by connecting the tools you use and your code components to the design file.

Plugins allow you to extend Figma’s functionality to flex however your team works. You can handle project management with Jira, Linear, and GitHub, so that you and your designer know what’s going on in your respective processes. Storybook helps you reference what’s happening in your codebase, in the context of the design itself. And codegen plugins from AWS Amplify Studio, Google Relay, and Anima help you customize code output—you can even create your own based on your unique workflow.

Design systems are getting more powerful with the introduction of design tokens through variables

. Tokens are like little bits of UI data that can be used across design and code. These now surface in Dev Mode, so it’s immediately clear what’s needed to start building. You can also add related links to objects on the canvas to reference documentation, or what’s in your plugins.

Track what needs to go to production

Even as the design and development phases of the product development process blur together

, the artifacts from each—design files and code—remain distinct. To date, it hasn’t been easy to navigate design files, select specific components and their properties, or even know what’s changed since you last looked at a file. Now, designers can simply label a section as “ready for development” and send it to you directly, without creating a separate page or file. Diff support allows you to compare changes between different versions of a frame and stay up to date.

Extend your workflow

With the VS Code extension you can bring the power of Dev Mode into your code editor to review designs, see notifications and comments, and stay on top of changes without ever having to leave your coding environment. The VS Code extension also autocompletes code based on the design you’re inspecting, helping you work that much faster.

Dev Mode and Figma for VS Code are now in beta and free for all users for the rest of 2023. Starting in 2024, you’ll need a paid plan to access Dev Mode. If you’re an editor on a paid plan today, Dev Mode will be included. We know that there are some developers who may not need the full stack of Figma features, so we’re rolling out two new plan options for them. Starting in 2024, you’ll have an option to purchase Dev Mode access only for $25 per seat per month on Organization, and $35 per seat per month on Enterprise.

This is just the first step in making Figma better for developers. With your input from the beta of Dev Mode and VS Code, we’re excited to expand functionality, including more ways to improve designer-developer collaboration, extract specs, and drive more alignment between design and code.