Skip to main content
Get started for free

Development features
Developers, meet Dev Mode

Dev Mode is a new space in Figma for developers with features that help you translate designs into code, faster.

Now available in open beta.

Get started
Transparent shapes are layered, creating solid shapes and patterns within the negative spacesTransparent shapes are layered, creating solid shapes and patterns within the negative spaces

Get to coding faster in Dev Mode

Dev Mode makes it easy to find the details you need to start building. Jump in and get specs—no design knowledge necessary.

Inspect designs

Dev Mode is like a browser inspector for your design file—simply hover and click objects to get details like measurements, specs, and styles—all within a safe space that won’t impact the design file.

Copy relevant code

Generate production-ready CSS, iOS, or Android code snippets from your design—or use a plugin to customize code for whatever framework you’re using.

Keep work aligned and connected

Streamline your workflow and stop jumping between your design libraries, codebase, and project management tools when you bring everything together in Figma.

Close crop of a the plugin panel in Dev Mode showing various available plugins Close crop of a the plugin panel in Dev Mode showing various available plugins

Integrate your tech stack

Build your own plugins with our API, or integrate Figma with common ones—like Jira, GitHub, and Storybook.

See all

Close crop of a mobile screen showing spacing and padding in Dev ModeClose crop of a mobile screen showing spacing and padding in Dev Mode

Build consistency across design and code

Use the same language across design files and code with tokens in Figma—and view other developer resources right in your design file.

Learn more about design systems

A project workspace in Visual Studio Code A project workspace in Visual Studio Code

Figma for Visual Studio Code

Our extension for VS Code brings the design file into the text editor. Inspect Figma files, collaborate with designers, receive notifications, and get code suggestions to build faster.

See documentation

Add structure to handoff

Seamlessly transition from design to development with new ways to organize files and stay up to date on changes.

A screen shows sections ready for development in Dev ModeA screen shows sections ready for development in Dev Mode

Know when designs are ready

Use section statuses to see clearly labeled screens from designers so you always know exactly what to work on.

A side-by-side view of an old and current version of mobile UI A side-by-side view of an old and current version of mobile UI

Compare changes to see the latest

Reduce back-and-forth with your designers by comparing a frame to its previous version to see exactly what changed.

More developer tools for productivity

A cursor hovers over the export button within the assets panelA cursor hovers over the export button within the assets panel

Export assets

Download icons and assets from the design file with a single click.

A playground view of a button within a componentA playground view of a button within a component

Component playground

Test out component properties without leaving the file or making changes to the design.

Teams using Figma increase development efficiency by 35%

Get the Forrester TEI report

Explore more developer resources

Why we built Dev Mode

Explore the story behind Dev Mode and how we're making workflows more efficient in Figma.

Read the article

A Figma community menu showing a list of available pluginsA Figma community menu showing a list of available plugins

Community plugins

Explore plugins built by the community to expand the ways you work in Figma.

Explore plugins

A large Dev Mode toggle iconA large Dev Mode toggle icon

Best practice guides

Learn how to make the most of Figma's features with these deep dives.

View the guides