A Year With Dev Mode: 10 Lessons From An Engineering Manager | Figma Blog (opens in new tab)

After a year using Figma Dev Mode at Decathlon, Laurent Thiebault found it transformative for connecting design and development workflows. The biggest improvement came from Code Connect, which links Figma components to real implementation code and helps resolve mismatches in properties, naming, and states. His overall recommendation is to adopt Dev Mode incrementally, using design tokens, advanced inspection, and embedded documentation to build trust and alignment.

Start Small, Think Big

• Developers may resist adding another tool to established workflows, so the team began with small wins rather than a full process overhaul.
• Figma variables helped the team improve design-token handoff.
• Variable aliasing creates a clear token hierarchy and supports semantic theming.
• Variable scoping prevents incorrect usage, such as applying background colors to text or spacing values to corner radii.
• Customized code syntax allows token names to match developer conventions across platforms.
• Token changes can expose the corresponding implementation changes directly to developers.

Use Advanced Inspection Capabilities

• Dev Mode handles complex layouts, including Flexbox, and generates implementation-ready code.
• Teams can inspect CSS, SwiftUI, UIKit, Android XML, and Jetpack Compose properties.
• These inspection tools help designers verify that components are implemented according to specifications.
• The Figma VS Code extension adds autocompletion and makes it easier to navigate CSS, Compose, and SwiftUI implementations.

Define What “Done” Means

• Keeping design-system documentation current is difficult, and design intent can be lost during handoff.
• Dev Mode documentation and annotations keep requirements closer to the designs themselves.
• Designers can add free-text explanations, defined values, measurements, alignment details, and sizing guidance.
• Developers can be linked directly to relevant annotations for additional context.
• The team documents components with links to GitHub source code, README files, and related playgrounds.

Code Connect as the Central Improvement

• Code Connect connects Figma components directly to the components used in production code.
• It helps reconcile differences between how components are structured in design files and how they are implemented in code.
• The feature improves consistency around component properties, naming conventions, and state management.
• Combined with design tokens and inspection tools, it makes Dev Mode a more reliable bridge between design systems and engineering.

Teams adopting Dev Mode should start with focused improvements—especially token management and documentation—then expand toward deeper code integration with Code Connect.