A year with Dev Mode: 10 lessons from an engineering manager

When Figma announced Dev Mode at Config 2023, I was intrigued but skeptical. On one hand, as an engineering manager at Decathlon, the outdoor and sporting goods retailer, I’m an advocate for trying new tools. On the other I’ve seen many promising tools fall short of truly aligning design and development workflows. However, after a year of hands-on experience, I’ve found Dev Mode to be transformative for our team.

The standout feature has been Code Connect, which has significantly elevated our design system workflow. By linking Figma components directly to our actual component code, Code Connect addresses persistent challenges in property alignment, naming conventions, and state management between design and development. This proves especially valuable when dealing with complex components that may be structured differently in code than in design. Here are the key lessons I’ve learned:

Design tokens are the small, repeatable decisions that define your visual language. Showcasing these tokens properly through the design tool has been a real success in terms of handoff for our developer teams.

1. Start small, think big

Developers have tried and true workflows, and it can be frustrating to add yet another tool to the mix. Understandably, some team members were hesitant to try Dev Mode in earnest. Rather than trying to overhaul our workflows, we started small and focused on getting some quick wins with design tokens through Figma variables.

Tip: Use Figma’s variable aliasing to establish a clear hierarchy in your design tokens. This approach facilitates the implementation of theming through semantic structuring, making it easier for teammates to understand and apply the system’s framework.

The ability to scope variables allows for precise control, preventing misapplications like using background colors for text or spacing values for border radii. We’ve customized the code syntax so variable names align with our developer conventions across platforms. When we update a color token, our developers can immediately see the corresponding code changes.

Scoping a variable allows you to limit which properties it can be applied to.

Flexbox is a CSS layout model that allows you to create flexible and responsive one-dimensional layouts for web pages. It enables easy alignment and distribution of space among items within a container, even when their sizes are unknown or dynamic.

Dev Mode’s inspection features have significantly improved our workflow because they handle complex layouts—including Flexbox—efficiently and generate code that’s both elegant and easy to implement.

These capabilities allow our design systems team to examine UI components in depth, inspecting properties such as CSS, iOS (SwiftUI, UIKit) or Android (XML, Compose) styles directly within the development environment. In this way, designers can ensure that components are built to exact specifications. With Figma’s VSCode extension, we can use autocompletion to swiftly navigate through CSS, Compose, or SwiftUI implementation.

3. Align on a definition of done

Maintaining up-to-date design system documentation has always been challenging. It often feels like a full-time job in itself. In my experience, design intentions and specific requirements are often lost in translation between designers and developers. Dev Mode’s documentation and annotation features have transformed how we maintain and share information.

Annotations allow designers to define design properties and other essential information directly within the file. They can mix free text with defined values like alignment or sizing and quickly add measurements to help developers visualize spacing and sizing. When working with their developer counterparts, designers can link directly to annotations for clarity.

We’ve implemented a system where each component includes comprehensive documentation: links to GitHub source code, README files, and associated playgrounds. This approach ensures that every team member has consistent access to the latest information and significantly reduces the time spent searching for relevant resources. We now have a rule: If it’s not linked in Figma, it doesn’t exist.

Code Connect has been particularly impactful. By mapping our actual component code to Figma components, we’ve seen a significant increase in design system adoption across our product teams. I recommend incorporating this into your “definition of done” for each component, so that the right code documentation is linked directly to designs.

4. Enhance functionality with plugins

While Dev Mode is powerful out of the box, plugins allow us to tailor it to our specific needs. Here are a few that have significantly impacted our workflow:

• GitHub and Jira integrations: These allow us to link issues and pull requests directly to components, improving tracking and implementation accuracy.
• Figma for VS Code: This extension enables our developers to access and inspect Figma designs right from Visual Studio Code.

Don’t hesitate to develop custom solutions. I created the Variables Converter plugin to translate Figma variables into various code formats, now used by over 5,000 Figma users.

The Variables Converter plugin simplifies the process of converting Figma variables into CSS Custom Properties, JavaScript variables, Compose variables, and SwiftUI variables.

Watch this demo by Romain Dao (Senior Product Designer and founder of The Cacatorès Theory) and Laurent Thiebault (Engineering Manager and Design System Lead at Decathlon), to learn more about the impact Dev Mode has on their designer-developer collaboration. [French only]

For more advanced customization, explore the Figma REST API. It offers extensive capabilities for automation and integration, especially with the new variables-related APIs. The Figma variables GitHub Action Example repository demonstrates how to set up bi-directional syncing between Figma variables and design tokens, showcasing the power and flexibility of the API.

5. Play with the component playground

A multi-variant Chip component is like a versatile building block in design systems that can shape-shift to serve different purposes, from filtering content to tagging items, all while keeping a consistent look and feel.

The component playground in Dev Mode is an excellent tool for experimentation. It can be accessed in the inspect panel when a component or instance is selected. When we introduced a new multi-variant Chip component, using the playground allowed us to test various configurations and identify edge cases we hadn’t considered in the initial design.

Use the playground to experiment with the component’s different properties without changing the actual design.

Code Connect integrates seamlessly with the component playground, updating live as parameters are adjusted. In our case, a single Chip component in design translates into three distinct components in web development. This integration allows us to see real-time code updates when modifying properties.

6. Embrace version control and visual comparisons

The compare changes feature has been invaluable for our design systems team. We can easily track changes to components over time, compare different versions side-by-side, and revert to previous iterations if needed. This capability gives us the confidence to iterate more quickly on our design system, and plays nicely with branching by allowing teams to work on updates in parallel without disrupting the main system.

For the version that you want to compare with the latest, click … and select Compare to latest version.

When we updated our button component to improve accessibility, we used the visual comparison feature to clearly communicate the changes to our entire product organization. This transparency helped smooth the transition and increased buy-in for the update.

7. Zero in with focus view

Dev Mode’s focus view is another powerful feature we use in our workflow. The focus view is designed to help you zero in on specific designs that are ready for development. With this view, we can access all the Dev Mode tools—such as Inspect and Plugins tabs—while having a clear, isolated view of the design. This is especially useful for examining individual layers, tracking version history specific to the design, and ensuring that all necessary changes have been made before marking a design as complete.

On the canvas, for the design you want to focus on, click the dev status and select Show in focus view.

This feature proved particularly useful when finalizing our button component updates. The focus view allowed us to scrutinize the design closely, ensuring no detail was overlooked and facilitating seamless communication with developers.

8. Foster a culture of collaboration

To maximize Dev Mode’s potential, we’ve implemented collaborative sessions where designers and developers come together at every stage of the project. We begin each project with collaborative FigJam sessions, where teams can freely draft and refine component properties, variants, and behaviors. As ideas take shape, transition seamlessly to Dev Mode, using this shared space to visualize progress, align expectations, and celebrate milestones. This fluid movement between ideation and development not only breaks down silos but also ensures that every team member’s expertise is leveraged throughout the process.

Thinking about designer and developer collaboration? Figma Designer Advocate Hugo Raymond assembled this file of resources while preparing for a talk on the topic.

Example of a typical brainstorm using with Figma’s Simple Design System.

We treat Dev Mode as a dynamic component of our design process, requiring regular iteration and improvement. As our design system evolves, so does our approach to using Dev Mode.

Regularly gather feedback through methods like quarterly System Usability Scale (SUS) surveys. These assessments can provide valuable insights into how both designers and developers interact with your libraries, helping identify areas of excellence and opportunities for improvement. Use these findings to fuel your next iteration, creating a virtuous cycle of improvement.

10. Stay curious and continue learning

We consistently explore new features and updates in Dev Mode. Staying current with its evolution helps us continually improve our processes. We dedicate time to training and personal development, incorporating these elements into our regular routines.

I encourage exploring all the resources Figma offers, including documentation, webinars, and the community forum. By committing to ongoing learning and tracking our progress with key performance indicators, we continually enhance our skills and adapt to new tools and techniques.

Reflecting on a year with Dev Mode

After a year of working with Dev Mode, it’s clear that this tool has significantly improved our design system workflow. While challenges remain, particularly in handling complex components, Dev Mode’s ability to bridge the gap between design and development has brought our teams closer, resulting in more cohesive and high-quality user experiences.

For teams struggling with design system adoption and designer-developer collaboration, I recommend giving Dev Mode a try. Start small, be prepared for some initial challenges, and don’t hesitate to customize it to your needs. The potential benefits in terms of consistency, efficiency, and collaboration are significant. As we look to the future, I’m excited to see how Dev Mode will continue to shape our design system practice.