From Claude Code to Figma: Turning production code into editable Figma designs

Sometimes, the quickest way to move an idea forward is to create something real. Building in code is one way to do this. Live prototypes let you work with real data, feel interactions in motion, and get a clearer sense for technical scope. With AI-powered workflows like Claude Code, it’s even easier to spin up these types of explorations, where you can prompt, iterate, and adjust interfaces in real time. The challenge becomes: how to bring that work out of a linear context and into a shared space where you can take it further—whether working solo or alongside a team?

Moving quickly matters. But speed without exploration can turn into momentum in the wrong direction. That’s the moment when code needs to meet the canvas.

Bringing Claude Code workflows directly into Figma lets developers, designers, and even hobbyists capture a real, functioning UI from a browser—in production, staging, or localhost—and convert it into editable frames on the Figma canvas. Code is powerful for converging—running a build, clicking a path, and arriving at one state at a time. The canvas is powerful for diverging—laying out the full experience, seeing the branches, and shaping direction collectively. Going from code to canvas helps teams move fluidly, so work can narrow when it needs to and open up when it’s time to collaborate.

Start anywhere, go further

With this capture-to-Figma capability, you can start building wherever it makes the most sense. Code-first exploration has a predictable shape. It’s local. You make a change, refresh, and see what happened. 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. Requesting feedback often 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.

With Claude Code to Figma, each captured screen can be sent or copied to your clipboard and pasted into any Figma file. From there, it becomes a Figma frame you can organize, duplicate, refine, and share alongside the rest of your design work. Teams can do more than just view the UI: They can annotate what’s working, call out what’s unclear, and explore divergent ideas without needing to ask someone to context switch into a new environment or make changes that would require editing half of your code files. 

For flows, you can even capture multiple screens in a single session, preserving sequence and context so the full experience makes sense. When interfaces created in code are brought into the canvas, the conversation changes and new possibilities open up—you enter an open space for thinking and exploration.

Build the best idea, not just the first one

With AI changing what “starting” looks like, creating has become easier—there’s often a concrete prototype to react to almost immediately. This shifts the design conversation from how to make something to which version to expand on. We want to support all ways of working in Figma. With Figma Make you can turn prompts into working prototypes, and with Copy design

, you can bring any Make preview directly onto the design canvas for further iteration. Claude Code to Figma applies that same idea to code-first workflows, converting built interfaces into editable design artifacts. Different starting points, same outcome—faster creation followed by deeper exploration.

Whether you begin with a prompt in Figma Make or in Claude Code, the goal is the same: get to something tangible, then take it further. What differentiates products today is how they feel, how they guide users, and how clearly they express value.

Below are four ways Claude Code to Figma helps you get there faster.

See the whole system at once, visually

By bringing the interface into the Figma canvas, side-by-side comparisons become easier—making patterns, gaps, trade-offs, and inconsistencies easier to spot—especially in multi-step flows.

Explore variations without re-implementing

Duplicate frames, rearrange steps, and test structural changes without rewriting code just to try an idea. Comparing alternatives in parallel also keeps rejected ideas visible for future exploration.

Make better decisions, earlier

Designers, engineers, and PMs can react to the same artifact, with the same context, at the same level of fidelity. When there isn’t an obvious right answer, a shared view allows questions to surface earlier—while decisions are still easy to shape.

Turn built UI into shared direction

In the shared Figma canvas, design becomes a way of thinking through the product. Because captured screens are fully editable, teams can annotate decisions, conceptualize options, and better understand the goals of teammates to elevate the outcome. It improves products, turning functionality into meaningful experiences that users can feel.

Roundtrip back to code

With the Figma MCP server, you can bring work back into a coding environment using a prompt and a link to a Figma frame. It’s a simple, lightweight connection—helping you move from shared understanding back into the build without losing context.

Sometimes work starts in code. Sometimes on the canvas. Often somewhere in between. 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.

This marks an important step in our commitment to smoother code-to-design workflows, helping builders move faster and create better products. Read our guide to the Figma MCP server for an overview of supported clients and capabilities, and dive into our developer docs for detailed instructions on using MCP tools like Claude Code to Figma.