Figma Launches Claude Code Integration, Bridging the Gap Between AI-Built Prototypes and Design Teams

Figma has introduced a new capability that converts production code built with Anthropic's Claude Code into editable design files, a move aimed squarely at the growing tension between AI-powered solo development and collaborative team design.

Figma CEO Dylan Field announced the feature on X, simply captioning it "Claude Code to Figma Design." The integration lets developers capture any browser-rendered UI—whether from production, staging, or localhost—and convert it into fully editable Figma frames that teams can annotate, duplicate, and iterate on.

The problem it solves

As AI coding tools like Claude Code have made it trivially easy for individual developers to spin up working interfaces, a new bottleneck has emerged: getting that work into a shared space where designers, PMs, and other engineers can meaningfully contribute.

Figma's blog post framing the launch was blunt about the limitation of code-first workflows: "In a single-player environment, one person holds the whole picture—the branch, the dev server, and the context—in their head. That speed helps early on, but as soon as the UI grows beyond a single screen, that speed of solo exploration can become a constraint."

The company noted that requesting feedback on code-built UIs typically means "sharing screenshots, recordings, or asking someone to run a build locally—each option adds friction at the exact moment the team would benefit from going wider, and exploring more options together."

What it means for design engineers

The integration is particularly significant for design engineers—practitioners who work across both code and visual design tools. Rather than choosing one starting point, they can now begin in whichever environment makes sense for the problem and move fluidly between the two.

The workflow supports capturing multiple screens in a single session, preserving sequence and context for full user flows. Once on the Figma canvas, captured screens become standard Figma frames that can be organized alongside existing design work.

Figma positions this as part of a broader roundtrip workflow. Combined with the company's existing MCP server, teams can also go in the opposite direction—bringing Figma designs back into coding environments. "Sometimes work starts in code. Sometimes on the canvas. Often somewhere in between," the company wrote. "Being able to move from Claude Code directly into Figma reflects a more fluid way of building—one where fewer barriers means bigger and bolder ideas will move forward."

Shifting the design conversation

The launch reflects a broader industry shift in how AI is changing creative workflows. With AI tools capable of generating working prototypes almost immediately, Figma argues the conversation has fundamentally changed.

"This shifts the design conversation from how to make something to which version to expand on," the company stated, emphasizing that the canvas enables divergent thinking—laying out multiple options side by side—while code naturally converges on a single implementation path.

The practical implications for teams are concrete: designers can explore variations without asking engineers to re-implement anything, PMs can react to the same artifact at the same fidelity level, and structural changes can be tested by duplicating and rearranging frames rather than rewriting code.

Figma positioned the launch as complementary to its existing AI tools, including Figma Make for prompt-to-prototype generation. The Claude Code integration applies the same philosophy to code-first workflows, giving teams a consistent destination regardless of where work begins.

Detailed documentation is available through Figma's developer docs and help center for teams looking to implement the workflow.