From prompt to code
summary
Figma Make and Code in Sites claim real outcomes: paste a Figma node and it converts Figma nodes to working React code that runs in-place, with demos of a multi‑step signup, an Earworm beat maker, a 3D game and swipeable cards that actually work. The system preserves auto layout and responsiveness, generates editable UI props so designers can create editable component properties, accepts npm ESM imports, supports collaborative live code editing, uses evals to improve generations, and trades off latency versus quality during rollout.
AI-written summary · about
chapters (7)
- 0:00Welcome to Figma Make & Code Layers
- 7:49Figma Make for designers
- 17:12Code Layers in Figma Sites
- 27:24Engineering workflows with Code Layers
- 37:05Improving AI design generations
- 43:28AI-powered code conversion
- 50:16Closing remarks & future
related talks
34mFrom Figma to Quality Code: Code Connect + AI
36mElevate Your React Workflow with Figma
09mFigma To React with AI, Are We There Yet?
31mCreating a more connected design system with Code Connect
01h 14mFigma product launch keynote
12mBuilding a React App with AI
26mFigma to Code: AI Generated UI Code with Your Design System
42mCode, Creativity, and Community at Figma
