Figma just shipped a feature that bridges a growing gap in AI-powered product workflows: you can now capture live UI built with Claude Code and bring it directly into Figma as fully editable design frames.
Why This Matters
AI coding tools like Claude Code have made it incredibly fast to go from idea to working prototype. You describe what you want, iterate in real time, and end up with a functioning interface running in your browser. The problem? That work lives in a single-player, code-first environment. Getting feedback means sharing screenshots, screen recordings, or asking someone to pull and run the build locally. It's friction at the exact moment a team should be opening up and exploring together. This new workflow solves that by letting you capture screens from a running app — whether on localhost, staging, or production — and paste them into any Figma file as native, editable frames. No static screenshots. Actual Figma layers you can reorganize, duplicate, annotate, and hand off.
Four Key Benefits
Visual system overview. Once your UI is on the Figma canvas, you can lay screens side by side to spot patterns, inconsistencies, and gaps across multi-step flows — something that's hard to do when clicking through a running app one screen at a time. Variation exploration without re-coding. Need to try a different layout or reorder steps in a flow? Duplicate a frame and rearrange it on the canvas instead of rewriting code just to test an idea. Rejected alternatives stay visible for future reference too. Faster cross-functional decisions. Designers, engineers, and PMs can all react to the same artifact at the same level of fidelity. Shared context surfaces the right questions earlier, while decisions are still easy to shape. Shared direction from real UI. Because captured screens are fully editable, teams can annotate decisions, conceptualize options, and align on direction — turning functional code into a collaborative thinking space.
The Roundtrip: Back to Code via MCP
The workflow doesn't end on the canvas. Using Figma's MCP server, teams can bring edited designs back into a coding environment with a prompt and a link to a Figma frame. It creates a lightweight loop: build in code, refine on the canvas, then feed the updated design intent back into development — without losing context along the way.
The Bigger Picture
This sits alongside Figma Make (which turns prompts into working prototypes directly on the canvas) and the Copy Design feature as part of Figma's push to support creation no matter where it starts. Whether your entry point is a prompt in Figma Make or a build session in Claude Code, the destination is the same: something tangible that a team can push further together. For teams already using AI-assisted coding workflows, this could meaningfully change how early design exploration happens — and how quickly code-first work becomes a shared conversation.
Figma
Discussion