Throughout this MCP collection, we’ve learned a lot about MCP and code connect, two features available in Figma’s Dev Mode. This lesson will tell you a tiny bit more about Dev Mode to fill in some of the gaps.
What is Dev Mode?
Dev mode is the gateway to Figma’s most powerful developer features like code connect, and the Figma MCP server.
Dev Mode gives you everything you need to navigate design files and transform designs into code. With Dev Mode, designers and developers can stay on the same page, making sure important details aren’t lost in the handoff process.
Developers use Dev Mode to:
- Access advanced inspection capabilities
- View component code, including real code from your codebase using code connect
- Compare changes to designs
- Set statuses like “ready for development”
- Integrate with your other tools like JIRA, Storybook and GitHub
- Explore all variants in a component set without editing the file
- Link designs to tickets, documentation, and code components
- Inspect designs and write code side-by-side using the Figma for VS Code extension
Enter Dev Mode
You can enter Dev Mode from any of your Figma Design files using the toggle or shortcut.
- Open a Figma Design file.
- Click the Dev Mode toggle or use the keyboard shortcut Shift D
Dev Mode availability
Dev mode is available on paid plans with either a Full or Dev seat.
Learn more about the different types of seats, and how to manage them →