Code-first prototypes meet the shared canvas

Building real, working software is one of the fastest ways to test an idea. With agentic coding tools like Claude Code, developers can stand up live prototypes that run on actual data and show interactions in motion. But that speed often comes with a bottleneck: presenting the result usually means screenshots, recordings, or asking someone to clone a repo and run a build. That friction hits exactly when a project needs broader input.

Figma now offers a path out of that single-player loop. A new capture-to-Figma capability lets you bring a functioning UI from a browser tab—production, staging, or localhost—straight into the Figma canvas as editable frames. The captured screen becomes a normal Figma frame that can be pasted into any file, copied, duplicated, annotated, and shared without context switching.

The model fits two different modes of working. Code is for converging: running a build, clicking through a path, arriving at a single state. The canvas is for diverging: laying out the full flow, seeing the branches, finding the gaps. Claude Code workflows don't have to end when the code is written—they can open up into the design space where teams can shape direction together.

From isolated exploration to shared context

Solo code exploration has a natural limit that shows up quickly: one person holds the branch, the dev server, and the whole picture in their head. The moment a UI grows beyond a single screen, that local speed becomes a constraint. Feedback becomes an async ritual of context transfers.

Once a captured screen is on the canvas, any teammate can react to the same artifact. They can annotate what works, flag unclear spots, and try divergent ideas without editing code files or switching environments. For multi-step flows, you can capture several screens in one session, preserving the order so the full experience still makes sense. The result is a shared object that acts as the focus for conversation and iteration, not just a visual reference.

This extends Figma's broader push to support every starting point for design work. With Figma Make, prompts turn into working prototypes, and those previews can already be copied onto the canvas for editing. Claude Code to Figma applies that same idea to code-first paths: different origins, same destination—a tangible artifact ready for deeper exploration.

Four ways editable code captures help

Bringing built interfaces onto the canvas doesn't just move pixels into a design file; it changes what a team can do with them. Four benefits stand out:

  • View the full system at once. Side-by-side on a canvas, patterns and inconsistencies across multi-step flows surface immediately, which is much harder to see one screen at a time.
  • Iterate on variations without re-implementing. In code, testing an alternate path means rewrites. On the canvas, steps can be duplicated and rearranged freely; discarded branches stay visible for future reference.
  • Align decisions earlier. Designers, engineers, and PMs respond to one artifact at the same fidelity level with the same shared context, which surfaces questions while decisions are still cheap to change.
  • Convert functionality into direction. Fully editable frames turn the design process itself into a thinking tool for annotating decisions and exploring concepts.

Taking it back into the build

The flow also runs in reverse. The Figma MCP server already connects the canvas back into coding workflows, letting large language models generate UI code from a Figma frame link via prompt. With the MCP server, the round trip is complete: start in code, iterate on the canvas, then return to the build with shared context intact.

The capability reflects a simpler workflow philosophy that also defines a development direction at Figma: work can start in code or on the canvas, but barriers between the two should stay low. The new option starts from Claude Code, but the same approach looks likely to expand to other agentic tools. The MCP connections handle the rest.