Figma lets you turn Claude Code into editable designs

For years, the product rulebook was set in stone: designers drew pixels in Figma, handed specs to engineers, and everyone argued over line height.

AI coding flipped that on its head. With Claude Code, you can prompt a fully interactive web app into existence in minutes. But the moment you want feedback, you are back to sharing screenshots or asking teammates to run a dev server locally.

Figma launched an integration that captures live interfaces running from Claude Code and converts them into fully editable Figma frames.

Capturing the DOM into design

The tool basically reverse-engineers running frontends into native canvas elements.

Whether your app is running on localhost, a staging environment, or live production, you can capture the active UI. Instead of spitting out static screenshots, it creates proper Figma frames that you can duplicate, inspect, and tweak.

It also supports multi-screen capture during a single session, meaning you can record entire onboarding flows while preserving context and sequence.

Combined with Figma Make and its Copy design features, builders can choose to start from visual prompts or terminal prompts without getting stuck in one lane.

The full roundtrip with MCP

Turning code into layers is only half the battle. Figma is connecting the loop back to production.

Using the Figma MCP server, developers can feed a Figma frame link back into Claude Code or other MCP clients. An LLM can then read the updated visual context and generate design-informed code.

Alex Kern, who joined Figma when it acquired Dynaboard in 2024, helped lead the project alongside Figma AI design director Gui. The goal is simple: let engineers converge in code and designers diverge on canvas without breaking flow.

Why it matters

We think this is one of Figma's smartest strategic moves in the age of generative AI.

Terminal-first tools like Claude Code and Cursor have made prototyping in code so fast that many developers stopped opening Figma altogether. If creating functional software becomes cheaper than drawing mockups, pure visual design tools risk becoming obsolete.

By letting users suck live code right into the canvas, Figma stops fighting the code-first trend and turns it into a top-of-funnel funnel for its own platform.

For solo builders and product teams, this is immediately useful. Instead of prompting an agent five times to adjust card margins, you capture the UI, rearrange it visually in seconds, and pass it back through MCP.

The lingering question is how cleanly messy DOM trees translate into clean design system tokens. But closing the roundtrip between terminal and canvas is the clearest sign yet that the boundary between designer and developer is disappearing.