Turn design into code with Claude Code + Figma. Through MCP, Claude sees your mockup at the data level—component hierarchies, design tokens, auto-layout rules—and translates it into production-ready code.

@figma Apple, after buying their frontend devs claude packages

@figma Used this several times and that’s only if the design teams strictly abide to certain figma rules. Otherwise, you’ve got frame logic everywhere. The MCP works good 10% of the time.

I just gave it a try, it’s really close! A few details are still missing. Pricing is centered when it should be left aligned. SVGs and images don’t render at all, the spacing is a bit off, and it failed the recommended “badge.” Still, as a quick prototype it works surprisingly well. Bonus points for actually handling hover states. Here’s the Figma design compared with Claude Code.

@figma Can you train Claude not to add fake data or mock in production?

@figma google already has this and it's called stitch. it doesn't require an expensive claude subscription that suffers from heavy rate limits to use either

@figma This is great, i bet figma to cc will work better if you provide the right design and business context to cc from core memory.

@figma I'm gonna to fire all frontend engineers now

@figma SnowUI is a dashboard UI kit designed using Figma.

@figma I don’t wanna use Figma first. Can Claude do all the designs for me in Figma?

@figma okay thats fire but i don't even use figma where is sonnet/opus 4.5 :)

@figma Designers are basically coders now witout even knowing it! The boundries between design and development are completly disappearing with tools like this 🎨💻

@figma Now it seems that designers have to name layers, create components, create styles, variables and so on. I don’t think designers really like this. Or?

@figma Our designers are going to love this.

@figma This is also available in @warpdotdev now. Great to have this integration! Maybe not perfect yet, but almost perfect.

@figma If anyone is looking for a solution that actually does it well check out I’d recommend Superflex instead

@figma Amazing, I also shared about using figma via MCP in my newsletter recently

@figma The key is that the agent isn't just looking at pixels, but at the structured data—design tokens, hierarchies, auto-layout. That's the real unlock.

@figma is there a course or tutorial on how to use figma in a claude-first paradigm? like.. knowing that your figma is going to be built with claude, how can you design it so that it's easy as possible to build with claude?

@figma This is next level.

@figma if you're anyway describing the design you want to have, why even have Figma in the middle between prompt and code? I understand it may still produce better results but how long till it's over - a year?

@figma Framer MCP does it better

@figma Hey fellow web designers: You don't need to rely solely on visual website builders like Webflow anymore. Use Claude to help code your website designs and transition to modern development approaches like the JAMstack architecture.

@figma Useless in actual application. Hopefully that changes soon.

@figma when claude 4.5 ?

@figma This is about to change everything

@figma Not new. Figma MCP is token and context hungry. Plus you need the dev mode / pay more for figma. It’s not mature enough this integration.

@figma This is going to be a huge win for designers. They can deliver a frontend with light coding.

@figma “Production-ready code” is a bit of a stretch, no?

@figma Making people hype then nerfing it again huh

@figma okay this is super cool, but why is the chatbox you are talking to claude in so weird looking?

@figma Designers coding? Wild times. But yeah, just naming layers and following rules doesn't feel great. Is this really progress?

@figma Opus 4.1 problem has not been fixed, which is absolutely fine!

@figma Bro give entry level frontend guys a chance 😭😂

@figma Any tool that can go the other way? Generate a screenshot of a UI then have it generate the layout in Figma

@figma i was waiting for thissssssss, lfg