Figma to Code: AI Generated UI Code with Your Design System
summary
A pipeline converts a Figma link into React + TypeScript UI that imports Blade design-system components by calling the get_figma_to_code tool through an MCP server; the flow uses Figma screenshots and JSON, OpenAI LLM prompting, and a Blade AI server, all invoked from the Cursor IDE. The team reports 3x boost in productivity, scaffolds projects, generates working dashboards and validated creation flows, and ships the tooling as open source.
AI-written summary · about
chapters (12)
- 0:00Introduction and setup
- 1:53Design systems and AI potential
- 3:56Why AI failed with design systems
- 5:41Figma link to AI-generated code
- 7:28How MCP servers work
- 9:58Blade MCP server tools
- 13:10Figma to code conversion flow
- 17:27AI server process breakdown
- 19:15Combining tools for full workflow
- 22:49Impact on engineering teams
- 23:30Experimentation and evals
- 24:35Key takeaways and closing
related talks
34mFrom Figma to Quality Code: Code Connect + AI
09mFigma To React with AI, Are We There Yet?
12mThe future of design systems and AI
16mDesign Language on Autopilot: How Figma and Code Can Automate Your Workflow
31mDesign to Code in 2026: Context-First Development with Figma MCP
17mThe rise of the design engineer
20mUsing AI to turn designs into clean code
42mCode, Creativity, and Community at Figma