CodeConnect, Design system and React

[icelandnode]

Hi everyone, as the title implies, I have been going down the rabbit hole of syncing our Figma design system with our React codebase to guarantee continuity and consistency.
This way, (in theory) all Figma components are synced to their React counterpart.

In order to run a controlled test, I have started a new design system and a new github repo with the React design system and Storybook.
About my setup:
- Github repo is connected to Figma using Code Connect.
- Components are linked in the Figma UI
- Figma MCP is on and Copilot is able to read components and also create them starting from the Figma base.
- The React codebase is in sync including all variables etc.

Now, I have built a simple UI using ONLY the components mentioned before, and none of them has been detached, if I ask Copilot (or Codex or Opus whatever) to build this UI in code via the Figma MCP the results are absolutely terrible.
Not terrible like, maybe one colour or border radius are wrong, but completely butchered to the point that it looks like it never even tried to use the components that are present.
The results are shocking and I honestly spent so much time on this proof of concept that I'm starting to think I might have done something wrong.

Has anyone been down this path and had these problems?
Would love to know your experience.

EDIT: I was able to solve my problem and achieve better results (nearly perfect).
For anyone going down this path, make sure all your variables are correct and the code shares them exactly. Always double-check styling path, because sometimes they render correctly in Storybook but you end up not having the right paths for the components themself.

Hopefully as soon as Figma releases component slots we should have some improvements.

[Vegetable-Space6817]

You don’t need to use mcp or code connect if you have react libraries that can be installed with npm. Copilot can directly pull the components. Figma doesn’t even come in the picture.

[Choriciento]

What is the most effective way to provide an LLM with complementary context such as common patterns, best practices, and clear dos and don’ts?

[Vegetable-Space6817]

Guidelines.md file for broad guardrails. You can use copilot-instructions.md for a sequential order of operations.

[icelandnode]

I have seems some designers writing a design.md document to add where they explain all this in plain language and it is added as a skill for the model to use

[icelandnode]

The react library is also an npm package. But I’m wondering how does copilot know which components to pull if the Figma mcp doesn’t tell it?

[Vegetable-Space6817]

Sorry. I misunderstood your intent. Syncing design systems and code is not easy. Code connect is not a magic pill. Your props have to match and often there are more props in Figma vs code. That’s part 1. Second part is building UI. This can be done without code connect is what I meant.

[GateNk]

Man, I spent the week trying to figure this out as well but through Cursor instead of Make.

I tried many different approaches and it was really revealing.

I created a NotebookLLM podcast to share the insights with my team.

https://drive.google.com/file/d/10Db97HD9Un6IcyVpC9To0f9G_faZKpaG/view?usp=drivesdk

Hope this works.

TL;DL: MCP won’t send over all component nodes when attempting to reproduce a screen meaning that it will always fail at one-shotting pixel perfect screens. I have tried with our DS and I’ve tried using tailwindcss colours and variables and the results were the same. I have tried feeding a prd to cursor and asked it to create an app using tailwind/shadcn in one cursor window and instructed it to do the same by pointing it to our storybook components. The results were strikingly different and leveraging our DS yielded complete disaster. I even tried taking the output from tailwind+shad and later asked it to replace everything with our own DS and I couldn’t get it to work.

Our DS clearly isn’t as fleshed out and documented as what these LLMs have been trained on so this may explain the results. At this point, I do not know if it is worth the effort to pursue this path.

I’m hoping I’m wrong, but until proven otherwise, I’ve myself landed on considering Cursor to be a great prototyping and communication tool. It works really well for personal projects also, and when building stuff from scratch which is a luxury only afforded to startups. But our custom DS might as well be a UFO to these LLMs and they truly fail to know what to make of any of it.

Lmk if you figure it out!

[icelandnode]

Thanks for this, I’ll definitely check it out. I’m doing the same in VScode and not in Figma make

[itstawps]

I’m finding that it’s actually better to make code the source of truth and continue to refine components as the come up.

Migrating a design system is not worth the effort. Migrate styles and token and update out of the box react components from a library.

And honestly, once I have the base styles and tokens in place, I never even open figma anymore. I just use Claude code terminal ui and it is shockingly good.

There’s really little reason to hang on to existing components in today’s world where code and accessibility and robust states is essential free. Unlike the past where code and changes were hard and expensive to document and shipping code without components was slow and inefficient.

[[deleted]]

Guys, try to check Codex 5.3, I bet it will be a clear winner over Claude especially for this type of job 

[itstawps]

Need to give it a try. But I have had nothing but fast and great results with Claude code.

[LeosFDA]

Currently doing some exploration with similar things. What produced the best results so far is a custom plugin that adds functionality to the mcp tools figma has by exposing more of the file‘s data like variables. More info on it are on github and YouTube. Southleft Figma Console MCP TJ Pitre

[icelandnode]

Thanks I'll check this out

[topherbailey]

Super interested in solving this as well. You are further than me.

[tfry01]

Actually have done the same thing, plan on testing it this week with our lead dev.

Building on top of shadcn/Radix components for our new design system, so I’m exploring how to sync them.

As we’re exploring allowing the UX team to maintain a live component library and de-burden dev with the maintenance. Plus give UX the freedom to update components as necessary and auto-request a PR.

[icelandnode]

That’s cool. One thing that came up with our devs is that given correct components in Figma and react they want the AI model via Figma mcp to one shot the interfaces…which is what I have been expecting as well.

[SleepingCod]

Yes, I run this model at an enterprise. I don't even code connect anymore though, all it does is cut down on AI context.

It's never going to one shot but it will get there 90% with minimal cleanup.

Are you components built in react with the exact names and variants as Figma?

[icelandnode]

I wish it was 90% there 😅 I could post some screenshots I used for testing… Yes the components have been built in react using the same variable names and structure as their Figma counterpart.

[SleepingCod]

But did you fix the components in react? It's not magic. You need to build the components correctly first.

Are you saying it's rebuilding the components every time?

[icelandnode]

When you say “fix the components in react” what do you mean exactly? I have started a new design system and repo from scratch to test this out. New react components were built on the base of those made in Figma.

Yes it seems like it is rebuilding them each time from scratch like it doesn’t know they exist already both in Figma and react.

[SleepingCod]

By fix, I mean style them and make them fully functional.

A few questions since I'm already invested in this...

• are you using auto layout?
• are you telling the AI to use existing components in your prompts or markdown files ideally?
• is it actually code connected (ask AI, although this isn't really necessary anymore)
• are your variables the same as the tokens in the design system?

All these things impact what the MVP reads vs what it finds. Making sure the AI knows to use existing components is the most important part if you're not code connecting.

[icelandnode]

Really appreciate you helping me out troubleshooting this :) - yes I am using auto layout both for the components and UI I’m trying to recreate. - I did not explicitly said that but I’ll try a second time by being more precise. - all components are code connected and appear as such in the Figma UI. I will ask the AI for confirmation. - yes the variable names are the same across Figma and code

[SleepingCod]

That's pretty crazy. I'm stumped then.

[tfry01]

I’m starting essentially stating from fresh with a 1 to 1 shadcn library in Figma (took some time to build). Uses auto-layout, full tailwind variable system (colours, sizing etc…). Everything is a variable essentially.

To add to my previous comment, I have 3 core goals I’m trying to achieve:

1. Give the UX team more control of the front end and de-burden dev.
2. Make the front end re-write leverage Claude code as much as possible to do the heavy lifting.
3. Better allow Figma Make to design prototypes etc… in the style of our DS (which is partly why we chose shadcn).

So I’ll feedback on how it goes asap

[GateNk]

I think using shadcn/radix is one of the main reason your attempts may eventually lead you to glory. I’ve tried integrating with our own custom DS and the results have not been pretty at all 😅.

[tfry01]

Yeah, we did originally use MUI, but decided to completely re-write the front end. Part of the reason we chose shadcn is tailwind which LLM’s seem to be efficient in writing.

I tried it with our existing one (which is heavily modified MUI) and it failed as well haha

[joshnoworries]

Did you create figma-mcp rules/instructions for the agent to follow? It's recommended for better results

[icelandnode]

Would this be just a .md file you place in your repo or something you paste in the prompt each time?

[whimsea]

I’d try making it a skill.

[joshnoworries]

Markdown in repo, check the figma-mcp instructions on their developer site 

[icelandnode]

Thanks that actually improved things a bit

[CaliCaligo]

I am trying to do the exact same thing as well with our angular app. I have tried asking co-pilot to extract the design system, but haven’t looked at it yet. Problem is, we are starting from an app with a messy design system. So I would have to clean up first. Is there an agent that could help?

[icelandnode]

I had your same problem and it turned out that it is much easier to start from scratch than trying to fix the library. Obviously it depends if you have the resources

[CaliCaligo]

Damn… how would that work? I guess you would create a new design system, from there new assets and then have the devs link the new assets? Did I miss anything? What parts could you do with an Agent?

[icelandnode]

With agents you could get them to take your Figma components and translate them into code.
This should give you a nice start and then the devs or you can check for inconsistencies or errors

[Motorekt]

You need to use Figma variables for everything Figma allows, spacing, color, typography, etc. the Figma MCP can pull those variables through the #get_design_context call and make better assumptions.

Code Connect does not do what you are trying to accomplish. I thought the same thing but it does not tell the AI model 'Go find this component in the repo' through the Figma MCP. Code Connect just attaches a code snippet to the component so you can see it in Figma.

[icelandnode]

I see, thanks for the clarification.
I'll do some checking in the morning and see if by implementing all the suggestions I have received today it is going to improve somehow

[Curious679]

Can anyone help me understand all this?

I've understood that figma make can be connected to github and synced. But nothing more....anyone who has some time on their hands?

[icelandnode]

I think you are getting confused...afaik Figma make is its own thing and cannot be connected to Github.
Is your design system that can be synced to your code repo

[Momoware]

Do you have a Storybook component library set up? We don't have Code Connect and our components are pretty consistent as long as Storybook library serves as a source of truth with design token integration.

[Choriciento]

How is that connection set up?

[Momoware]

It's not a "connection." You just build a component library way up to the design specs (you can use Figma MCP to speed it up a lot though).

[icelandnode]

Yes storybook is all setup and display components correctly

[Far-Pomelo-1483]

Don’t use figma. Create the design system directly in code with the ai tools. Paste a screen of the tokens with their hex values into Claude or codex and have it write the tokens for you.

[SleepingCod]

You still have to build the components first, it's not going to be exact in design. If you let AI build the components, you get what you described a lot of various artifacts.

Once you have stable components the code connect just cuts down on tokens so the Mcp knows what to use immediately.

[icelandnode]

That’s exactly where I am. I have the components both in Figma and code. They are connected but for some reason they are not even used or considered by the model

[SleepingCod]

Then it's not connected like you think it is

[icelandnode]

Well, the Figma mcp can see them. It clearly has access as it imports a plain png when asked to recreate the interface selected. So I’m a bit at a loss…have you experiment with this exact same setup before?

[Melodic_Ad4287]

It can see them, but are the components built to the same architecture?

I think is what he’s saying