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

Streamline the back and forth between design and engineering

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

Add annotations and measurements

Speed up handoff prep with annotations and measurements. They’ll update as designs change, so you can keep iterating.

Bring clarity to the process

Dev Mode helps teams stay focused on moving work forward. Find and track exactly what's ready to build, what's changed, and what's completed.

Keep work connected

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

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

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

Get component information

Explore component properties and documentation directly tied to objects on the canvas.

Connect your design system and codebase

Use Code Connect to link your components in code with your design system in Figma, so code snippets are always production-ready.

Help developers be more efficient and effective in Figma

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

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.

Copy relevant code

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