Better vibe coding with Figma Code connect and MCP

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 nut shell, this 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.

Let us see the steps to incorporate Code connect with figma component library

There are two methods

1. Link the GitHub repo link of the component library and map each component’s path to the Figma library.

   

2. Use a Code connect CLI tool, npmpackage, this is quite robust and auto link 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.

   

   “Simple design system” available free on figma community

   

   Corresponding code library written on react 

   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.

   And the codes are only referred to the figma files not copied. So the code repo needs to be maintained and the future updates will be referred from the same location. So, only the repo needs to be kept uptodate.

   The other interesting thing is codes can be set properties link platform and variables. Which gives clear context to LLM how to utilise using 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.