From Claude Code to Figma: Turning Production Code into Editable Figma Designs | Figma Blog (opens in new tab)

Claude Code to Figma lets users capture working interfaces from production, staging, or localhost and convert them into editable Figma frames. The workflow combines code’s speed for building functional prototypes with Figma’s strengths in collaboration, comparison, and exploration. Its central argument is that teams can move faster without stopping at the first working implementation.

From Code to an Editable Canvas

• Developers can capture real UI screens from Claude Code workflows.
• Captured screens can be pasted into any Figma file as editable frames.
• The workflow supports interfaces running in production, staging, or locally.
• Multiple screens can be captured in one session, preserving flow sequence and context.

Start Anywhere, Then Collaborate

• Code-first exploration is fast but often isolated: one person manages the branch, server, and context.
• Sharing screenshots, recordings, or local builds creates friction when feedback is needed.
• Once imported into Figma, screens can be organized, duplicated, refined, annotated, and shared.
• Teams can discuss and explore the interface without switching environments or modifying code for every idea.

Build the Best Idea, Not Just the First One

• AI makes it easier to produce an initial prototype quickly, shifting attention toward evaluating alternatives.
• Figma Make supports a similar workflow by bringing generated prototypes onto the design canvas.
• Claude Code to Figma extends this approach to code-created interfaces.
• Both workflows aim to turn an initial tangible result into deeper design exploration.

Explore Systems and Variations Visually

• Side-by-side frames make patterns, inconsistencies, gaps, and trade-offs easier to identify.
• Teams can duplicate frames, rearrange steps, and test structural changes without reimplementing code.
• Keeping alternatives visible supports continued exploration, including previously rejected ideas.
• Designers, engineers, and product managers can make decisions using the same high-fidelity artifact.
• Shared context helps surface questions and resolve direction earlier.

Claude Code to Figma is intended as a bridge between functional prototyping and collaborative design. Teams can use code to quickly discover what works, then move the result into Figma to compare options, gather feedback, and establish shared direction.