One of the common problems in vibe coding is unpredictable output. Often, the final coded design doesn't exactly match the original Figma design.
With MCP it has improved a lot. But still it is not 100% perfect. MCP server shares the icons and other assets and layout details but however it still the LLM takes the screenshot at the end and recreates the page by building components and style. This leads to the inconsistency and duplication of code.
Figma already had a solution for this, "Code Connect" which I learned about from a developer friend. I had missed it earlier since it's only visible in Dev Mode. I have gone through their documentation and learned about their key benefits.
In a nutshell, Code Connect links the Figma component library with the code components. This means the LLM can directly use those existing components instead of trying to "guess" or assume them. You can even add specific coding instructions and guidelines, providing context at the element level, which reduces the need for detailed prompts.
Two Methods to Incorporate Code Connect
- Link the GitHub repo link of the component library and map each component's path to the Figma library.
- Use a Code Connect CLI tool (npm package) — this is quite robust and auto-links the components using AI.
I used the second option since I don't have access to GitHub Enterprise.
To test it, I used Figma's component library "Simple Design System" from the community, which already has its "code library". I copied them locally and linked them using Code Connect CLI.
The package includes AI-assisted linking, which automatically matches components — a big time-saver compared to doing it manually.
After publishing, the code became available directly in Dev Mode.
I published it in React, but some of our projects are written in Angular. Luckily Code Connect supports multiple frameworks using web components. But those need manual linking — it is not as easy as linking a React component.
The codes are only referenced to the Figma files, not copied. So the code repo needs to be maintained and future updates will be referred from the same location.
The other interesting thing is that codes can be set with properties, platforms, and variables — which gives clear context to the LLM on how to utilise them using the MCP server.
That said, when I tried generating a few screens using Copilot after connecting the code, the results were amazing — much closer to the design and far more accurate than before.