Why Devs Should Play an Active Role in Design | Figma Blog (opens in new tab)

Developers should participate actively in design rather than treating design files as read-only specifications. Nicholas Villapiano argues that Figma’s Dev Mode reduces friction, improves confidence, and creates a shared workflow between designers and developers. Teams should advocate for these tools because they understand day-to-day collaboration problems better than management often does.

Shared Tools Create a Common Language

• Dev Mode gives developers a dedicated space within Figma instead of forcing them to work cautiously in designer-oriented files.
• It treats developers as contributors to the product process, not merely implementers of finished designs.
• Figma’s Auto Layout offered an early example of shared understanding by resembling CSS Flexbox and making designs behave more like responsive web layouts.
• Dev Mode extends that connection into a broader framework for collaboration between design and engineering.

Developers Should Advocate for Better Workflows

• Managers may not see the practical pain points developers encounter when translating designs into code.
• Developers already advocate for change through GitHub issues, pull requests, and technical discussions, so they should apply the same behavior to design and collaboration tools.
• Useful opportunities to raise these needs include one-on-ones, sprint retrospectives, and team meetings.

Exploring Designs Without Fear

• Dev Mode is read-only by default, preventing accidental edits or deleted work.
• This works much like branch protection on main: developers can investigate freely without risking the source file.
• Greater confidence encourages developers to explore designs instead of avoiding or cautiously navigating them.

Comparing Design Changes Clearly

• Dev Mode provides version history and visual comparisons similar to Git commit history and pull requests.
• Developers can see what changed, when it changed, and who made the change.
• Differences become an actionable checklist, such as updating copy, adjusting margins, or adding a component variant.

Reducing Context Switching

• Developers often lose time switching between design files, documentation, and code.
• Dev Mode and related tools such as Code Connect aim to bring implementation details closer to the design workflow.
• Centralizing relevant information can reduce the “tab-switching tax” and make design-to-code work more efficient.

Practical Recommendation

Developers should actively evaluate and promote shared design-development tools like Dev Mode. By creating safer exploration, clearer change tracking, and a common language around implementation, teams can improve productivity, collaboration, and morale.