Skip to main content Development and design, connected at every step. Add Figma context to an IDE Connect design and code components One dedicated dev view The Figma MCP server pulls design system components right into your codebase. Add Figma context to an IDE Connect design and code components One dedicated dev view Sync design and code so what’s on the canvas is what gets built—automatically. Add Figma context to an IDE Connect design and code components One dedicated dev view Inspect components and play with breakpoints—without breaking design. Go from canvas to code—and code to canvas. Move fluidly between different parts of the production process so you close the gap between design intent and code. Figma MCP server Give AI agents access to structured design context so you generate accurate, design-informed code. Get Figma MCP docs Figma MCP server Give AI agents access to structured design context so you generate accurate, design-informed code. Write to canvas Create working Figma designs right from your AI agent. They’re editable, so your team can tweak on canvas. About write to canvas Write to canvas Create working Figma designs right from your AI agent. They’re editable, so your team can tweak on canvas. Connect code and design Map design components to real production components. That way, new code uses your actual system. Get started with Code Connect Connect code and design Map design components to real production components. That way, new code uses your actual system. Code syntax in variables Represent variables in code for easier implementation. The variable’s code snippet will appear when inspecting. Use Variables in Dev Mode Code syntax in variables Represent variables in code for easier implementation. The variable’s code snippet will appear when inspecting. The products you love are designed in Figma With Dev Mode, we’ve also had a big mindset change. It’s helping designers and developers speak the same language, and helps us rethink the process of how they build products.

Director, Design Systems, HP 90% 90 % 90% of devs saw work quality improvements 90% of devs saw work quality improvements 1.5 hr 1.5 hr 1.5 hours of work saved per week 1.5 hours of work saved per week Stay in sync without having to meet. Turn code into reviewable visuals, track when designs are ready for dev, and see all updates in a feed made for developers. Dev statuses and notifications Track when designs are ready for dev. Get notified when statuses change or designs are updated. About Dev Mode statuses Dev statuses and notifications Track when designs are ready for dev. Get notified when statuses change or designs are updated. Compare changes See exactly what has changed over time by comparing side-by-side. How to compare changes Compare changes See exactly what has changed over time by comparing side-by-side. Code to canvas Turn live UI into an editable Figma file so designers can review in context. About code to canvas Turn live UI into an editable Figma file so designers can review in context. Dev resources Link GitHub files, Jira tickets, and Storybook stories directly to layers. Learn more Link GitHub files, Jira tickets, and Storybook stories directly to layers. Find the details you need to build, fast. Understand the structure behind every design. Experiment, test, and code without affecting the design file. Focus view Get an isolated view of the frames you're building, filtering out the rest of the canvas. About focus view Get an isolated view of the frames you're building, filtering out the rest of the canvas. Advanced inspection Access code snippets, component properties, and structured layer data directly from the canvas. How to inspect Advanced inspection Access code snippets, component properties, and structured layer data directly from the canvas. Component playground Explore component properties and variants interactively. Know which component to use and how to use it. Set up a playground Component playground Explore component properties and variants interactively. Know which component to use and how to use it. Annotations Developers can retrieve variable, property, and measurement information for specific layers. Developers can retrieve variable, property, and measurement information for specific layers. Work with your favorite agentic tools in Figma