Everything you need to know about Dev Mode

Figma was never intended to be a design-only tool. Because design isn’t just about a role; it's about building great products. That’s why we built Figma on the web. With a single link, teams can collaborate on in-progress work and share early explorations in the file together. This multiplayer approach encourages teams to join forces and solve problems in a shared space, helping to realize our vision of making design accessible to all.

It’s also a vision we continue to build on. We’ve done this by listening carefully to our users and delivering features that meet teams where they are. When we see an opportunity to build new tools and experiences to push work forward, we act. That’s exactly what happened with Dev Mode.

Why we built Dev Mode

Today, developers account for a third of our weekly active users. Even though Figma wasn’t exactly optimized for their workflows, developers started working with designers, product managers, and other collaborators in the product development process. We had a lot to learn from them about the nuances of developer workflows, toolchains, and preferences, and their feedback informed our ultimate goal: to create a space in Figma that’s purpose-built for developers—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. We wanted to support a variety of teams, from idea to code.

We needed a team that lived and breathed development like we did design, so in 2021, we acquired Visly—a team of eight designers and engineers who built a tool for developing UI components in React. “We talk to tons of developers, but that’s really different than having an intuition,” says Figma Vice President of Product, Sho Kuwamoto. “You have to immerse yourself in that world.” The Visly team brought with them years of hands-on experience and months of research on developer tooling—in other words, they had the developer “intuition” we were looking for.

The Visly team immediately offered a new perspective on how developers work across a variety of environments, as well as real world examples about how their own team used Figma. Most critically, they shared a pivotal insight into what developers really want from a design tool. “Developers shouldn’t need to worry about learning all of the interactions [in design mode],” says Joel Miller, a product designer on the Visly team. “It’s more about tailoring the Figma experience to them.”

Read more about the product and design decisions we made.

With an understanding of developers’ unique needs and challenges, the team turned to another key feature of the product experience: What should Dev Mode look and feel like? “We probably spent a year and a half on that question,” says Visly co-founder Emil Sjölander. “We went through a million iterations on this, all scattered across this spectrum between isolated versus integrated files.”

The team ultimately decided on a mode that would allow developers to go between design and development spaces without needing to switch tools or files entirely. This solution was the best of both worlds—siloed enough that they could optimize for developer needs, but integrated as a space within Figma so that developers have important context from their design counterparts.

Watch Figma CTO Kris Rasmussen’s talk at Config 2023 to learn more about the thinking behind Dev Mode.

We launched an open beta at Config 2023 to solve these problems for developers, and user feedback informed many of the product decisions we’ve made along the way. (Emil had a Slackbot that notified him when a customer request came in.) In the first two months of the beta, we shipped 200+ of the most asked for updates to Dev Mode.

What Dev Mode enables

In our own product development process, we asked ourselves: How can we make Figma work better for developers? The result is a workspace in Figma that’s designed to get developers what they need, when they need it, harnessing the tools they use every day. 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.

Learn more about Dev Mode and how we got here.

Clearly communicate design intent

To date, designers have had to manually craft measurements and callouts, thoughtfully organizing their designs to give developers the context they need to build confidently. We’re introducing annotations in Dev Mode to streamline the process. With annotations that live update as designs change, designers can share additional context, specs, and measurements that are connected directly to designs, and developers can easily see designers’ notes as they work, ensuring that they don’t miss any crucial callouts during handoff.

Save time with annotations (New)

• Click and drag to measure
• Stay up to date with live changes
• Highlight important details without cluttering the canvas
• Automate and customize annotations with plugins

Designers can simply label a section as “ready for development” and send it to developers 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.

Compare changes between any two frames (New)

We’ve redesigned the diffing modal so that you can compare between any two frames to see the difference between iterations of a design. You can also compare between detached components or overrides to the main component. Plus, the diffing modal is more interactive and includes code diffs, so you can see diffs both visually and in code.

Work faster in your preferred tools

Dev Mode aims to make you more productive by connecting the tools you use and your code components to the design file. There’s no one way to work, which is why we built Dev Mode to adapt to a variety of tools, processes, and workflows. Whether you’re looking to link design and code with Storybook, ensure accessibility with Stark, or streamline project management with Jira, Linear, and GitHub, plugins allow you to extend Figma’s functionality to flex however your team works.

Access what you need in your code editor

With the Figma for 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 extension also autocompletes code based on the design you’re inspecting, helping you work that much faster.

More easily navigate design files and run plugins in VS Code (New)

We’ve redesigned the Figma for VS Code experience to improve navigation and discoverability of design files. Instead of having to pan around a large canvas, you can easily select from a grid of frames and see frames individually with focus view. We’ve also launched the ability to run plugins in VS Code, so you can leverage third party tools and customized code without leaving your code editor. Check out our docs to learn how to make your private plugin work in VS Code.

Customize codegen and drive design systems adoption

We know that generated code isn’t always 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. In Dev Mode, you’ll see a familiar box model visualization, modern syntax with a tree view, and you can toggle between dimension units (rems and pixels) to match your codebase. If you need to quickly produce working code in a specific language like HTML & CSS, React, or Tailwind, plugins like Anima or Figma to Code can help you get started quickly.

If you need to stay in lockstep with your design system, you need to build designs using the code that corresponds with your system's component library. You might extend Figma by developing your own codegen plugins, leverage the Code Snippet Editor to add dynamic code snippets that mirror your own component code, or build tools to bidirectionally sync design tokens with our Variables REST API.

Pin and set plugins to auto-run (New)

We’ve seen many teams create custom plugins to help drive adoption of a design system across Figma and code. Now Enterprise admins can pin and set plugins to run by default in Dev Mode for all files in their organization.

Read all about what's next in Dev Mode.

Breaking down silos between design and code

Today, as Dev Mode moves out of free beta, we’re pushing new features live that bring design and code closer together, including annotations in Dev Mode, along with improvements to compare changes, plugins, and the Figma for VS Code extension.

Many of these changes will make it easier to go from design to development, and we’ll continue to iterate on how we can tie code components even more closely to design components. We also hope that they help you think of handoff not as a moment, but as part of an ongoing collaboration between designers and developers. Because it’s not a handoff if you’re building together.

We’re excited to launch these updates, which were all rooted in user feedback that we heard during the beta. We’re so grateful for your input, and we’ll continue to learn and iterate as we go. As we continue building Dev Mode, we remain committed to improving the developer experience and helping you work faster in Figma.

Register for our upcoming livestream to learn about everything we launched and hear directly from the team behind our new features and improvements.