Figma and Anthropic Launch Code to Canvas, Turning Live UIs into Editable Designs

Figma and Anthropic have officially launched Code to Canvas, a new integration that bridges the gap between code and design by letting developers capture a functioning UI from any browser and convert it into a fully editable Figma frame.

How It Works

The integration runs on Figma's MCP (Model Context Protocol) Server, an open standard that allows AI tools to connect with external data sources and applications. It acts as a universal adapter between Claude Code and Figma's design environment.

To set it up, developers enable the MCP server in Figma desktop preferences, turn on "Dev Mode MCP Server," then run a terminal command to connect Claude Code:

claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sse

Once connected, Claude Code can grab the live browser state — whether from production, staging, or localhost — and convert it into Figma-compatible frames that designers can edit directly.

Why It Matters

For teams already building with AI coding tools, this integration removes one of the last major friction points: getting developer work back into a shared design space where everyone can contribute.

Traditionally, the handoff between code and design has been one-directional. Designers create mockups in Figma, developers implement them in code, and any visual changes in code rarely flow back to the design file. Code to Canvas reverses this, creating a two-way bridge.

Key Capabilities

• Live capture: Grab any UI from a running browser, including dynamic states that are hard to mock in design tools
• Fully editable frames: Output is native Figma — not screenshots or flattened images — so designers can modify layouts, colors, and typography
• MCP-powered: Built on the open Model Context Protocol standard, making it extensible and interoperable
• Works with Claude Code: Leverages Anthropic's Claude Sonnet 4.6 for intelligent UI understanding

Industry Reaction

The announcement drew significant attention from the developer community, with over 9,700 posts on X discussing the integration. Many developers highlighted the potential for reducing design-development friction, while designers noted the value of being able to inspect and iterate on actual production UIs.

CNBC reported that the partnership reflects a broader trend of AI tools breaking down traditional workflow silos between design and engineering teams.

What's Next

Figma and Anthropic have signaled that this is just the beginning of their partnership. The MCP-based architecture suggests future integrations could extend beyond UI capture to include automated design system synchronization and AI-assisted design reviews.

Source: Figma Blog