Dev Mode and Figma for VS Code

Dev Mode

Dev Mode in Figma design gives developers everything they need to navigate design files and transform designs into code. With Dev Mode, designers and developers stay on the same page, making sure important details aren’t lost in the handoff process.

Use Dev Mode to:

• View and copy properties, values, and code from design components
• See what’s changed since you last viewed a file by comparing frame versions
• Inspect and navigate design files with simple interactions that surface important layer information
• Quickly find designs ready for development with section statuses
• Streamline your workflow with developer-focused integrations, like Jira, Storybook, and GitHub
• Add relevant links and developer resources to components

Figma for VS Code

The Figma for VS Code extension lets you navigate and inspect design files, collaborate with designers, track changes, and speed up design implementation—all without leaving your development environment.

Learn more about using the Figma for VS Code extension ->

Dev Mode price tiers

Note: Since Dev Mode and Figma for VS Code are still in beta, the pricing and timeline mentioned here are subject to change. We’ll keep you updated so you know what to expect.

Both Dev Mode and Figma for VS Code are available now in beta and free for everyone through the end of 2023. Starting in 2024, access to Dev Mode and the Figma for VS Code extension will require a paid seat.

With the introduction of Dev Mode, we will offer different types of viewing and editing experiences to support developers working in Figma.