Claude Code to Figma: Code Becomes Editable Designs
Source: uxplanet.org
- Figma's new feature turns live UI from Claude Code into editable frames on the design canvas.
- Capture any browser-based code output - from localhost to production - and paste it directly into Figma.
- Teams can now explore, annotate, and iterate on AI-generated interfaces without needing code access.
Figma launched Claude Code to Figma, a tool that bridges coding and design by converting running web UIs made with Claude AI into fully editable Figma layers. It solves the gap where developers build fast in code but struggle to collaborate visually with designers. This speeds up workflows by letting code-first explorations flow into shared design spaces.