Dev Mode
Built for developers, Dev Mode gives you the power to easily inspect designs and translate them into code—without changing the design file. Dev Mode is included in the Full and Dev seats on all paid plans.
Trusted by teams at
Introducing the Dev Mode MCP Server
Bring Figma directly into your development workflow. The Dev Mode MCP server allows tools like VS Code, Cursor, Windsurf, and Claude Code to retrieve information directly into Figma to help agents better turn your designs into code.
Find the information you need to start building, fast
With features designed to simplify code inspection and highlight what’s ready for development, your workflow will be smoother than ever.
Compare design changes
See when a frame or component was last edited, or open version history to compare design changes side-by-side.
Dive into design specifications
Inspect component properties like color codes and token values, check spacing, and copy and paste code to speed up your development process.
Change the view for more clarity
Click into the Ready for dev view to see designs that are marked as ready for development. You can also click on specific components to isolate them in Focus view.
Build with VS Code extension
Work in an environment you already know and love with the VS Code extension—less screen switching and more coding.
Figma’s Dev Mode facilitates a streamlined collaboration between developers and designers, reducing the friction between the two — and we love it.
Sandra Schaus
Lead UX Expert, Business Development Services, Volkswagen Group Services
Connect your design system and code base for consistent builds
Dev Mode gives you the power to build consistent, reusable designs and seamlessly link them to your codebase using Code Connect.
Link your codebase with Code Connect
Code Connect lets you instantly generate ready-to-use snippets by linking your codebase with your existing design system in Figma.
See all component options
The Component playground lets you view all possible component variations, see how they behave, and even gives you the code to implement. All you have to do is choose the best option.
Access system-wide design variables
Stay on-brand and save time by using existing variables—or token values—with corresponding code syntaxes in Figma. This makes it easy to keep things consistent across your applications.
What we love about Code Connect is that it reduces so much of the context switching that developers had to do before.
Gilson Hoffmeister
Design Systems Strategist, HP
Streamline the back and forth with design partners
Features like status updates, comments, and annotations keep you on the same page with designers throughout your build.
Cut down on repeat work with better communication
Get notified of design changes in real-time so you’re never building based on outdated information. The Ready for dev view provides a clear summary of what’s ready to build, what’s changed, and what’s done.
Code with context
Scan through annotations and comments from designers to get a clear understanding of what you need to build.
Check your measurements
Designers can add measurements to help you quickly visualize spacing and sizing, so nothing gets lost in translation as you go from design to code.
Dig into more design and development resources
Everything You Need to Know About Dev Mode
We built Dev Mode to make product development more efficient, from idea to code. Learn about our product philosophy and what’s next.
5 things designers need to know for a smooth handoff
Handoff is a process, not a moment. So how do you streamline handoff when it’s a constant stream of WIP designs, communication, and collaboration? Designer Advocate Lauren Andres shares her tips.
Explore community plugins for developers
Explore thousands of plugins built by the Figma community that can expand how you work in Figma.