Figma ships AI-powered design-to-code with Tailwind and React output
Figma's new Dev Mode AI converts selected frames directly into production-ready React + Tailwind code, with component inference and responsive variants.
What happened
Figma released AI code generation inside Dev Mode. Select any frame, click 'Generate code,' and get React with Tailwind CSS, including component extraction, responsive breakpoints, and asset exports. It uses a fine-tuned model trained on production codebases. Output quality varies by design system consistency but handles standard UI patterns (cards, navbars, forms) well. Available to Figma Professional and above starting today.
Why it matters to you
personalizedWhy it matters to you
Design handoff just got meaningfully faster. Instead of rebuilding components from screenshots, you get a Tailwind + React starting point. The output isn't perfect — you'll still clean up spacing and extract logic — but the scaffolding work drops from 2 hours to 20 minutes on a typical component. More important: if designers learn to build cleaner component hierarchies in Figma, the AI output quality improves. Worth establishing that working norm now.
What to do about it
Try it today on your most recently redesigned component. Paste the generated code into your codebase, note what needed fixing, and share those findings with your designer. Use it to set a new handoff standard — designs that generate clean code vs designs that don't.
Tags
Sources