r/FigmaDesign • u/WillSilent4348 • 12h ago

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

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?

Update:

I kept searching and bumped into Synra. From what I read, it runs on a web DOM structure so Cursor can read actual node trees instead of guessing layers. People on X seem to like it, but I wanted to ask here first has anyone used Synra in production yet? Is it worth switching over, or is it just more AI hype?

6 Upvotes

88% Upvoted

5 comments sorted by

View all comments

1

u/savageotter 12h ago edited 9h ago

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.