Dev Mode: Design-to-Development

Meet Dev Mode: the fastest way from idea to IRL. Teams of all sizes can now bring design and development closer together inFigma.

Get started

Trusted by teamsat

Minimize the back and forth between design andengineering

Dev Mode adds structure and communication channels to Figma—so design and engineering can work better together.

Add annotations and measurements

Speed up handoff prep with rich text and property annotations, plus measurements. They’ll update as designs change, so you can keepiterating.

Know when designs areready

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

Compare changes to seethelatest

Diff any two frames to see what’s changed, both visually andincode.

Keep work aligned andconnected

Stop jumping between your design libraries, codebase, and project management tools with workflow plugins from popular devtools.

Figma’s Dev Mode facilitates a streamlined collaboration between developers and designers, reducing the friction between the two — and we love it.

Scale product design and engineering quality by driving design system adoption.

Make design systems the path of least resistance by building consistency across designanddev.

More component information

See variables, component props, and documentation directly tied to objects on the canvas. No more searching or referencing external sites orlibraries.

Explore component properties

Test out component properties in a developer-safe playground, where edits to the file aren’t necessary.

Sync updates across designandcode

Automatically connect updates to variables back to your code base with theRESTAPI.

Learn how Razorpay is using Dev Mode to increase design systemadoption

Read the story

Help developers be more efficient and effective inFigma

Dev Mode makes it easy to find the details you need to start building—no design knowledge necessary.

Figma for Visual StudioCode

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 buildfaster.

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 or library you’reusing.