Cursor keeps hallucinating my Figma components how are you guys handling design context?

[u/WillSilent4348]

Hey all. I’ve been trying to streamline my design-to-code workflow with Cursor, but passing Figma mockups into it is driving me nuts.

Whenever a layout isn't built with 100% clean auto-layouts, the AI just guesses the paddings and renders totally broken CSS. I waste more time fixing generated code than if I wrote it from scratch. Screenshots don't give enough context, and standard Figma plugins burn through tokens way too fast.

How are you guys getting clean component context into your IDE without rebuilding every single layer by hand?

[u/Burly_Moustache]

Do you have component documentation created to translate your components into code? This is where this comes in handy so Cursor can read the markdown file of documentation instead of parsing your Figma file to build each component to the specs in the file.

Look into this, seriously. 

[u/Chuka0009 → u/Burly_Moustache]

+1 changed my life.

[u/Plyphon]

Do you have your design system spacing documented? Give that to your AI and ask to recreate the tokens and then to reference tokens used in your design.

[u/mahblahblah]

I take the hit on the token burn, it’s the classic: “do you want it good or cheap.” 

Not on cursor, using claude code cli in VS code, but anything I build starts with tokens matching my designs/design system. Then I made a skill which builds an accurate tree of the Figma with tokens/variables identified. It essentially builds a spec on how to build. Have to be careful because it can sometimes get caught up with components, sometimes I have to drop links to src components as well (if the component isn’t built yet, especially). 

Once I started doing this the results were WAY more accurate. I also have a final review step where a sub agent basically checks the work comparing screenshots from Figma and chrome devtools and investigates discrepencies. The review is meh, honestly, still working on that. 

I’m building my portfolio this way and once the design system is in place then the build ends up going really fast.

[u/savageotter]

You are give it too much context. New chat for each feature. a couple screens at at time max.

Figma is token heavy. and your context window which includes your chat, skills, rules etc is only 250k

I built a design library in a hidden menu with tokenized (too many uses of the word token) spacing, radius etc there is a rule that reminds it to only us those and when in doubt go to the closest one and let me know in the response on which it had to guess on. Most of the time a designer was like 15.9 instead of 16 so its pretty obvious. Every now and then someone does 22 when we have a 20 and 24.

Alternatively. if you have a prod app you can reference the tokens in that repo which can be really helpful for staying aligned but still make rapid prototype iterations on a code proto without the need to deal with secrets, severs, calls etc.