Jake Albaugh, Developer Advocate at Figma, walks through setting up Code Connect from scratch — the NPM package, the config file, and mapping design properties to production code properties. The real payoff comes when he shows the before/​after through the MCP server: without Code Connect, an agent sees a flood of raw style data; with it, it sees clean, minimal component code it can actually act on. Unfortunately, Code Connect is still not available on the Pro plan.

Code Connect keeps getting more ​“real-world design system” friendly: you can now attach multiple code files to a single Figma component, preview code across frameworks (with GitHub connected), and set framework-specific MCP instructions so agents implement the right thing. This is one of those unsexy updates that makes Code Connect actually usable across multi-framework orgs (or even just ​“web + native + marketing site”).

Tom Johnson: ​“It’s literally faster for me to build a concept inside of the actual codebase than it is to work in Figma. But the amount of versions and breadth of the final result is not up to the quality bar that I usually hold. I’m loving the speed, but the output is sloppy at times. So I’ve got this weird flow of Code → Code → Figma → Code → Figma. Repeat, reorder, etc. The issue is that the transition from Figma → code with their MCP is solid. […] But code → Figma… is a terrible flow.”

I often spend more time recreating a particular screen in Figma than actually designing the change. I’ve been beating on the Code Connect drum for a while as it has huge potential for connecting design and code components. Even though it was built to translate components from Figma to code, I don’t see why it wouldn’t work in reverse. Code Connect was announced almost two years ago (way before LLMs and MCPs got powerful), but because it’s locked behind Organization and Enterprise plans, it’s rarely discussed in the community or considered by plugin and tool makers.

“Code Connect UI lets you map design components in your Figma libraries to the corresponding code components in your repository. These mappings enhance the Figma MCP server by giving AI agents direct references to your code, enabling more accurate implementation guidance.”