Figma: Claude Code to Figma (Code to Canvas)

Overview

On February 17, 2026, Figma launched "Code to Canvas," a deep integration between Anthropic's Claude Code and the Figma design canvas. The feature addresses a long-standing friction point in design workflows: once a developer builds a working UI using an AI coding tool, getting that interface back into a collaborative design environment typically meant starting from scratch. Code to Canvas eliminates that gap.

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. To use it, a designer or developer installs the Figma MCP, enables Dev Mode on the Figma desktop app, and connects Claude Code via a terminal command pointing to http://127.0.0.1:3845/sse. From that point, typing "Send this to Figma" in Claude Code captures the browser's live rendered state and deposits it onto the Figma canvas as a fully editable frame — not a flat screenshot, but a structured design artifact with layers.

The workflow supports any browser environment: localhost development servers, staging environments, or live production apps. Multi-screen sessions allow teams to capture an entire flow (such as an onboarding sequence, checkout flow, or settings panel) and lay all screens out on the canvas simultaneously, preserving sequence and context.

What Designers Can Do With Captured Screens

Once a coded UI lands on the Figma canvas, the entire toolkit of Figma's collaborative design environment becomes available:

• Compare variants side by side — place multiple AI-generated UI states next to each other and identify patterns, inconsistencies, and gaps across a full flow.
• Annotate directly on production-fidelity interfaces — teams can leave comments and design decisions on actual app screens rather than mocked approximations.
• Explore structural alternatives — duplicate frames, rearrange layouts, and explore options without touching the codebase.
• Align with existing design systems — verify whether captured UI components match established component libraries before shipping.

Relationship to Other Figma Tools

Code to Canvas is distinct from, but complementary to, other Figma AI features. Figma Make generates code from prompts or existing designs for less technical users. The Figma MCP Server provides the bidirectional infrastructure that connects both workflows. Code to Canvas is specifically designed for the reverse direction: bringing developer-built interfaces back into design for collaborative evaluation and refinement.

Requirements and Limitations

The integration requires a Figma Dev or Full seat and the Figma desktop app — the browser-based version of Figma is not supported. The workflow is terminal-first, which requires some command-line familiarity. Once screens are on the canvas, design changes must be reflected back manually in the codebase; there is no automatic round-trip sync for visual edits.

Strategic Significance

The launch coincides with Anthropic's release of Claude Sonnet 4.6 and occurred one day before Figma's Q4 2025 earnings announcement. The feature represents Figma's clearest statement yet that the future of design involves code-first AI workflows rather than purely visual tools — positioning the Figma canvas as the shared evaluation space for AI-generated interfaces.