Dev Mode in Figma gives you everything you need to navigate design files and transform designs into code. With Dev Mode, designers and developers can stay on the same page, making sure important details aren’t lost in the handoff process.

Developers use Dev Mode to:

Dev Mode is a developer-focused interface for inspecting and navigating designs. You can access Dev Mode in any Figma Design file. To toggle between Design Mode and Dev Mode:



Note: You are automatically dropped into Dev Mode when you open a Figma Design file with a Dev Mode link.

In Dev Mode, the left sidebar provides an easy way to move between designs marked as ready for development.



The inspect panel displays design specs and relevant component information needed to understand a design and transform it into code.



C

Click any object on the canvas while in Dev Mode to populate the Code section in the inspect panel. Depending on what’s selected, a typographic preview or box model is displayed, followed by autogenerated code snippets for the object.

You can select the language and units to view in the canvas and generated code, as well as extend the functionality of code snippets. To change your language and unit selection:

Learn how to use code snippets in Dev Mode→

Code Connect is a tool for design systems and engineering teams to bring component code into Dev Mode. When inspecting a component with connected code snippets, developers will see design system code from their libraries instead of auto-generated code. Use Code Connect to:

Custom code snippets build on the Figma API and are fully customizable to support multiple design systems, products, and languages.

Check out the Code Connect overview to learn how to connect custom code snippets to components →

Note: Code Connect is available on Organization and Enterprise plans.



Designers can use annotations to markup designs with additional context, specs, and measurements. This makes it easy for developers to make sure they don’t miss any crucial callouts during handoff. Use annotations and measurements in Dev Mode to:

Learn how to add measurements and annotate designs in Dev Mode →

When you have sections, frames, and components that are marked ready for dev, you can take advantage of Dev Mode’s ready for dev and focus views to help manage your developer handoff process:

Ready for dev view provides an easy way to explore all designs in a file that are marked ready for dev. You can filter and see all your designs that are marked ready for dev. Learn more about ready for dev view and the handoff process →

Focus view shows only one design that’s ready for dev at a time. You can use all of your usual Dev Mode tools, explore the layers of the design, and find important info like an annotated version history. Learn more about focus view →

Statuses and notifications in Dev Mode help to manage developer handoff. Statuses are used to track when sections, frames, or components are ready for development. Notifications are based on status changes so developers can react to the state of designs.

All plans that provide Dev Mode include the Ready for dev status. You can set the Ready for dev status on components, frames, and sections, to indicate that the design is ready for development. An additional status, Completed, is available if you're on an Organization or Enterprise plan.

For more information, such as how to use statuses, see Dev Mode statuses and notifications.

If you’ve viewed a file in Dev Mode and have either a Full or Dev seat, you’ll be notified each time a design is marked ready for dev in that file. This includes the first time a design marked ready for dev, as well as when the ready for dev status is removed and then set again.

For more information, including how to turn Dev Mode notifications on and off, see Dev Mode statuses and notifications.

Dev Mode plugins help you automate tasks and connect other tools for documentation and communication. For example:

The Plugins tab in Dev Mode shows your recently used plugins, as well as recommended plugins from the Figma Community.

Learn how to use plugins in files →

Check out the Plugins for Dev Mode playground file to learn about Dev Mode plugins hands-on.

Figma for VS Code lets you navigate and inspect design files, collaborate with designers, track design changes, and speed up design implementation - all without leaving your text editor. Improve developer productivity by eliminating the context switching and busy work needed to turn designs into code.