Introducing Figma’s New Dev Mode | Figma Blog (opens in new tab)

Dev Mode is Figma’s dedicated workspace for developers, designed to reduce friction between design and implementation. It provides familiar inspection tools, customizable code output, integrations with development workflows, and an extension for VS Code. Figma’s broader goal is to keep designers and developers working from the same, up-to-date source of truth.

A Developer-Focused Workspace

• Dev Mode works like a browser inspector for Figma files.
• Developers can inspect layers and designs to find:
  • Measurements and implementation specs
  • Exportable assets
  • Design-system context
  • Connections between visual elements and code concepts
• The interface is intended to feel familiar to developers who use tools such as Chrome DevTools.

Faster, More Flexible Code Handoff

• Dev Mode’s code panel includes:
  • A CSS box model
  • Modern syntax and tree views
  • Configurable dimension units
  • Customizable output for different languages and codebases
• Generated code is positioned as a starting point that reduces repetitive translation from design to implementation.

Connecting Design to the Development Toolchain

• Figma’s GitHub integration links designs and components with files, issues, and pull requests.
• Plugins connect Figma to tools including:
  • Jira, Linear, and GitHub for project tracking
  • Storybook for viewing coded components alongside designs
  • AWS Amplify Studio, Google Relay, and Anima for code generation
• Teams can also build custom plugins to match their own workflows.
• Design tokens and variables further improve consistency between design systems and code.

Tracking Work Toward Production

• Dev Mode is intended to support the increasingly blurred boundary between design and development.
• It helps teams understand what is ready for implementation and maintain context while designs continue to evolve.
• Figma emphasizes collaboration around work that remains in progress rather than waiting for designs to be fully polished.

Bringing Dev Mode into VS Code

• The Figma for VS Code extension lets developers:
  • Review designs
  • View comments and notifications
  • Track design changes
  • Inspect designs without leaving the editor
  • Use design-based code autocomplete
• This keeps design context inside the developer’s primary coding environment.

Availability and Pricing

• Dev Mode and the VS Code extension were announced as beta features, free to all users through the end of 2023.
• Beginning in 2024, Dev Mode requires a paid plan.
• Dedicated Dev Mode-only access was planned at:
  • $25 per seat per month on Organization
  • $35 per seat per month on Enterprise

Figma presents Dev Mode as an initial step toward tighter designer-developer collaboration. Teams should use it alongside integrations such as GitHub, Storybook, and VS Code to keep specifications, implementation context, and feedback in one continuously updated workflow.