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 de