Dev Mode: Building a Design Tool that Works Harder for Developers | Figma Blog

Figma built Dev Mode to make developers first-class participants in product design rather than secondary users of a designer-focused tool. The team initially emphasized code generation, but real-world differences in teams, workflows, and codebases exposed its limitations. By combining developer research, the acquisition of Visly, and a broader focus on inspection and collaboration, Figma shifted toward reducing the gap between design and code.

Designing for Developers as Core Users

• Figma’s multiplayer canvas was created for entire product teams, including product managers and developers.
• Developers were already using Figma to explore work in progress, despite the tool not being optimized for their workflows.
• By 2023, developers represented roughly one-third of Figma’s users.
• The goal became a tailored developer experience that did not require developers to learn or navigate design-centric interactions.
• Proposed directions included:
  • Component playgrounds
  • Code snippets
  • GitHub and Storybook integrations
  • Developer-specific resources
  • Design inspection and change comparison

The Visly Acquisition

• Figma acquired Visly in 2021, bringing in eight designers and engineers who had built a React UI development tool.
• The Visly team contributed:
  • Extensive research into developer tooling
  • Practical experience with development workflows
  • A developer-oriented perspective and intuition
• Their involvement accelerated Figma’s efforts and helped the company understand how developers work across different environments.

Moving Beyond a Codegen-First Strategy

• Early versions of Dev Mode focused on code generation: automatically translating designs into code according to predefined rules.
• Codegen could save hours or even days when designs mapped cleanly to implementation.
• Testing showed that successful code generation in controlled scenarios did not necessarily work in production.
• Companies differ in their:
  • Team structures
  • Engineering practices
  • Toolchains
  • Codebases
  • Workflow conventions
• These variations made it difficult to generate universally useful code, prompting the team to reconsider codegen as the central solution.

Redefining Design-to-Code Handoff

• Figma’s broader objective was to break down the traditional “handoff wall” between designers and developers.
• Dev Mode was positioned as a dedicated space where developers could inspect designs, compare changes, work with VS Code, and access implementation-oriented information.
• The team continued refining the product through beta feedback, including daily customer requests collected through an internal Slackbot.
• Rather than assuming developers would live inside a design tool, Figma focused on making the parts of the design process they needed more accessible and useful.

Dev Mode’s central lesson is that developer tooling must reflect real engineering practices, not just generate code from idealized designs. A practical developer experience combines accurate design context, collaboration, integrations, and workflow flexibility with code generation where it genuinely helps.