Today, we’re announcing beta for Code Connect, a feature built to improve design system adoption by making code more accessible and useful for developers.
Design systems are one of our most powerful tools for bridging the gap between design and code. By creating a shared language, they enable designers and developers to efficiently collaborate across their respective workflows. We’ve been working hard to bring design systems closer to code through features like auto layout, variables, component props, and Dev Mode which we launched last year.
Despite these advancements, one major challenge still remains: adoption. As an Engineering Manager, I’ve seen this firsthand. When we talk to our customers, we hear the same thing over and over again: “We built a design system, but it’s not being used to its full potential.” Developers may use parts of the design system, but they often aren't aware of everything it contains. And when they do use it, they may unintentionally misuse components or patterns in ways that don't align with the system’s intended guidelines. This is a critical problem, as the success of a design system depends on people not only using it, but using it correctly and consistently.
This is why I’m so excited to introduce Code Connect, a new tool to help organizations boost design system adoption by making code more accessible and useful for developers. With Code Connect, you can customize the code snippets that appear in Dev Mode, so developers see your actual design system code instead of auto-generated CSS. The result is faster, more efficient development, higher adoption of your design system across the organization, and a reduction in the creation and maintenance of duplicated, one-off components.
Connecting design and code
Design system adoption at scale is something we’ve been thinking about for a long time. The barrier to adoption isn’t just a matter of individual workflows or preference; it’s a testament to the broader disconnect between design and code. As our CEO Dylan Field explains, design and code have traditionally occupied different worlds: “There’s a natural tension between design and code. In the world of design, the focus is deciding what to build—in the world of code, the focus is building it…In practice, they’re partners working to bring a product to life.”
Designers and developers work in different tools, with different constraints and considerations. Designers optimize for creativity and exploration, while developers optimize for structure and maintainability. At Figma, we imagine a world where designers and developers can move seamlessly between freeform exploration and structured, systematic implementation. Code Connect is another step in that direction.
Meeting developers where they are
Code Connect aims to bridge this gap by bringing the power of code into the design tool. Under the hood, Code Connect is a utility provided through npm for JavaScript and TypeScript projects, as well as Swift Package Manager for SwiftUI projects. This allows developers to easily install and use Code Connect in their own projects, regardless of the platform they’re working on. With more platform support coming soon, Code Connect aims to meet developers where they are, integrating seamlessly into their existing tools and workflows.
The package and setup instructions live in GitHub, and developers can install it via a simple command line interface. This maps to the tools and workflows developers already know and use.
Once installed, Code Connect allows design system teams to surface and distribute best practices and documentation for how to use the design system, contextually tied to the mockups. So when a developer clicks on a mockup, they don’t need to search through a bunch of documentation and code to figure out how to build it in the design system. Instead, they just click on it and get the approved, maintained code samples they need, published by the design systems team.
This has huge benefits: Since developers aren’t rewriting components, there’s less code to maintain. By using what’s already there—rather than creating components from scratch—developers can work more efficiently and effectively. And with better adherence to your design system, you can more easily improve accessibility and consistency across applications.
