Unlocking the power of Code Connect: Best practices for design systems teams

Code Connect in Practice: Lessons from Bumble, GitHub, and HP

At Framework 2024, Figma announced the beta of Code Connect, a Dev Mode capability designed to improve design system adoption by making code more accessible to developers. During the event, panelists from Bumble, GitHub, and HP joined Figma's Designer Advocate Ana Boyer to discuss how they are approaching the challenge of connecting design to code. Their conversation highlighted several practical strategies for teams looking to strengthen their design system workflows.

Building a Shared Vocabulary

A recurring theme in the discussion was the communication gap between design and development. "Designers and developers speak a little bit of a different language," noted Lukas Oppermann, Staff System Designer at GitHub. This disconnect often shows up as inconsistent naming conventions, misaligned component properties, and mismatched expectations.

The solution, according to Gilson Hoffmeister, Design System Strategist at HP, is to create a common ground. "You have to create this third language where they can communicate, and then everyone will understand each other." Design systems serve as that shared language by codifying decisions about terms, patterns, and components — but only if those decisions are easy to discover and apply.

Reducing Friction for Developers

One of the biggest challenges is determining where the source of truth lives. "Designers are always going to build the documentation, and when it comes to engineering, they might rely on a different source," said Raul Menezes, Design System and Platform Engineer at Bumble. When teams rely on different references, inconsistencies accumulate and the codebase grows harder to maintain. "If you keep repeating this pattern over and over again, your codebase starts to increase, and you can't keep track."

Code Connect is designed to address this by bringing implementation guidance directly into the developer's existing workflow. As Hoffmeister explained, "The developer doesn't have to change context. Before, they had to go to our website to take a look [at how a design was implemented]." With Code Connect, developers can see how a design was built without leaving Dev Mode.

Starting Small with High-Impact Components

The panelists offered practical advice for introducing Code Connect: start small and focus on the components that matter most. "The goal is to start small," said Hoffmeister. "Code Connect, to me, is a first step for something bigger."

Menezes echoed this approach, recommending teams begin with simpler elements. "Start with much smaller components, like a toggle, so you can understand how you map those." This incremental strategy lets teams learn how to map design to code effectively before tackling more complex parts of the system.

Separating Concerns, Not Collaboration

While bridging the gap between disciplines is important, the panelists also emphasized the value of letting each team play to its strengths. "With Code Connect, we can actually move the design and the code a little bit further apart again," Oppermann said. "We can concentrate on creating the best UX for the designers working in Figma with design libraries and, on the code side, we can have the best developer experience."

That focus on craft can itself drive adoption. "This is something that we can start working on today: making it so that working with both sides of a design system is really awesome for the people who actually do it," Oppermann added.

Treating Handoff as an Ongoing Process

Design-to-code handoff is not a single event but a continuous loop of communication and feedback. "Code Connect is just about being more efficient — not just as an engineer, but also as a designer," said Menezes. "It bridges the gap between communication between both teams."

Maintaining that loop requires ongoing effort: regular design critiques, code reviews, and open feedback channels to keep both sides aligned. For Hoffmeister, the potential extends beyond the initial implementation. "When [Code Connect] came out, it just ignited more things that you can do with Figma."