Figma × Anthropic “Code to Canvas”A New Roundtrip from Running UI to Editable Design

1. What was announced: Figma × Anthropic “Code to Canvas”

On February 17, 2026, Figma announced “Code to Canvas” (Claude Code to Figma) in collaboration with Anthropic. It allows UIs created with Claude Code to be brought into the Figma canvas as editable layers. The key point is that this is not just a code-snippet paste feature. It converts the runtime screen state in the browser into structured design artifacts that can be edited again in Figma. In a same-day statement, Figma co-founder and CEO Dylan Field clarified that code and canvas are not an either-or choice; future production needs a workflow that can move between both.

Figma explains that teams can capture actual screens from production, staging, and localhost workflows in Claude Code, then organize, duplicate, annotate, and compare them as frames in Figma. Unlike screenshot sharing or pasted screen recordings, imported elements exist as layers, so spacing, typography, and component granularity can be adjusted with normal design-editing operations. It also emphasizes sequential multi-screen capture that preserves flow order and context on the canvas.

This launch is also a response to an AI reality: generative systems are breaking the old linear “design → implementation” path, and more prototypes now start from code. In agentic coding environments like Claude Code, working UI appears early from natural-language prompts, but those prototypes often remain trapped inside terminals and browsers. Moving them into a team review context still required manual reconstruction. Code to Canvas is intended to reduce this transfer friction and place “live prototypes” back into a shared space for alignment and refinement.

2. Not “code import” but “runtime UI capture”: how the mechanism works

The core of Code to Canvas is not static source analysis into a blueprint. It captures executed UI state from the browser and maps it into Figma’s layer structure. As Dylan Field describes it, browser-rendered state is automatically transformed into editable Figma layers—so the entry point is rendered output rather than raw source code.

Implementation-wise, it is provided via Figma’s Model Context Protocol (MCP) server and invoked from Claude Code. Developer documentation defines generate_figma_design as a tool limited to Claude Code and remote MCP server usage. In other words, even among MCP clients, “code → canvas” generation is currently Claude Code-specific, while other IDE integrations remain focused on “design → code” context retrieval, variables, and component references.

The workflow skeleton is straightforward. First, register Figma’s remote MCP server in Claude Code and authenticate via OAuth. Then give prompts such as: launch a local server, capture UI, and send to a new Figma file; send to an existing file URL; or send to clipboard. Claude can start the dev server, inject capture scripts, and open the browser as needed. The first capture happens at browser launch, after which a dedicated toolbar allows repeated full-screen or element-level captures. When sent to a file, users jump via “Open file”; when sent to clipboard, they paste into any Figma file.

This is closer to converting a running web UI (launched by Claude or already existing) from DOM/rendering data into Figma structures than to directly sending Claude-generated source code. In practice, targets can include not only Claude-generated interfaces but also existing production and staging screens. Developer docs also assume automation scenarios—for example, injecting capture scripts with Playwright for live apps and sites. That makes it an execution-connected capture experience, not a simple export.

3. MCP and roundtrip capability: Code to Canvas extends Figma’s MCP strategy

To understand Code to Canvas, we need to place it in Figma’s MCP server strategy since 2025. In June 2025, Figma’s MCP beta presented a framework to supply Figma design information directly to agentic development environments such as Copilot (VS Code), Cursor, Windsurf, and Claude Code. The goal was not image guessing from screenshots, but delivering design-intent-near data—component names, variables, styles, and layout—at the right granularity. The emphasized principle: correct code should align with design intent, not merely pixel matching; screenshots should be auxiliary.

As of February 2026, help docs describe two MCP routes: remote and desktop. The remote route connects to hosted endpoints and avoids resident desktop app requirements. The desktop route runs via Dev Mode inside the Figma desktop app and connects to local addresses. Access conditions differ: remote is available across plans/seats, but with daily/monthly tool call limits. Developer materials specify limits such as 600/day for Enterprise, 200/day for Organization or Pro Full/Dev seats, and 6/month for Starter or View/Collab seats. The numbers show that generative-AI integration is designed as a governed service with permissions and resource controls, not unlimited automation.

Code to Canvas extends MCP’s “external-tool ↔ Figma” roundtrip idea from design→implementation into implementation→design. Figma also explicitly describes “Roundtrip back to code,” where alignment work on canvas returns to coding environments via MCP. Crucially, this roundtrip does not imply perfect format equivalence. Code is for execution; canvas is for comparison and editing. MCP functions as transport between these strengths.

4. How it differs from existing HTML→Figma approaches: continuity and integration

Code to Canvas did not appear from nowhere. In September 2025, Figma introduced “Copy design” for bringing Figma Make outputs back into editable canvas structures, and also announced acquisition of technology behind <div>RIOTS html.to.design (which converted live HTML into editable frames). Figma noted around 2 million users and three years of development for html.to.design. This signals sustained investment in turning generated or executed results back into editable design structures.

Two differences are major. First, the entry point moved from generic HTML conversion to capture embedded in Claude Code workflows, directly connected to AI prototyping processes. Claude Code is not mere completion: it is an agentic environment capable of file reads and command execution, including local server launch and browser actions as one task chain. Code to Canvas automates not only AI creation but also AI-assisted transfer/structuring into collaborative design spaces.

Second, the conversion framing moved from one-off import/export to composable tools under the MCP interface. Beyond UI generation (generate_figma_design), MCP offers tools for code generation from selected frames, variable definition retrieval, and component mapping via Code Connect, which agents can invoke as needed. This means organizations with mature design systems are more likely to keep AI-generated code near existing patterns—shifting from “build faster with AI” to “build faster within existing discipline.”

5. How work changes: the decision-making “place” shifts

Code to Canvas is not only about bringing design and implementation closer; it is about moving decision-making back outside the terminal screen. Code tends to converge into one state at a time. Canvas is better for placing alternatives side by side, seeing relationships, and preserving discussion traces. Figma describes this contrast as “code is converging, canvas is diverging.”

Cognitive science supports this framing. George A. Miller (1956) described short-term memory around 7±2 chunks; Nelson Cowan (2001) argued that under attention, simultaneous maintained units are closer to 4±1. Keeping multiple screens and state transitions solely in one person’s head is structurally difficult. Edwin Hutchins’ distributed cognition framework (1995) argues cognition is distributed across external representations and collaborative arrangements, not confined to a single brain. Laying out flows, annotations, and comparisons on canvas is exactly such externalization.

Research on task interruption also shows large restart costs. For example, a 2015 CSCW paper reviewing workplace studies by Gloria Mark and others cites prior work showing roughly 23 minutes on average to return to an interrupted task. Other studies report 64% of interruptions as beneficial to recipients, yet about 40% of interrupted tasks are never resumed—showing interruptions are not a simple concentration-loss story. Converting terminal prototypes into shareable screenshots can itself become extra interruption. By handling transfer directly, Code to Canvas aims to reduce micro-overhead and expand time for actual discussion.

Larkin and Simon’s 1987 argument—“a diagram is sometimes worth ten thousand words”—also matters: representation format changes inference cost. Code diffs are line-oriented; UI diffs are often faster in spatial comparison. Code to Canvas provides that representation switch as editable artifacts, not just screenshots or verbal explanations.

Sweller’s cognitive load theory (1988) adds another caution: speed in early prototyping can create momentum in the wrong direction if exploration is insufficient. Figma’s framing—speed matters, but speed without exploration is risky—maps to this trap. Building quickly in code, exploring on canvas, then returning to code can be read as process design that separates velocity from exploration.

6. Technical tension: what remains editable, what gets lost

“Editable design” does not mean everything is perfectly preserved. Web UIs include HTML/CSS but also Canvas/WebGL, video, external widgets, shadow DOM, and runtime-generated elements. Since capture starts from rendered browser state, what maps well to Figma is mainly text, rectangles, images, vectors, and layout-constrainable structures. A key challenge is mapping CSS layout models to Figma Auto Layout/constraints. Flexbox/Grid behavior, responsive breakpoints, pseudo-elements, filters, and font rendering differences can require approximations.

In practice, business value often lies less in perfect reproduction and more in generating editable discussion material. Figma messaging emphasizes compare/annotate/restructure usage over pixel-perfect matching. This aligns with MCP philosophy: pass design-intent clues (variables, component references) so generation can stay near existing standards. If frames brought in through Code to Canvas connect to downstream “design → code,” canvas edits become easier to project back into code. Perfect equivalence is often unnecessary if decision-critical elements remain layer-editable.

This is why design-asset maturity matters. Mechanisms like Code Connect, which map Figma components to code components, improve code reuse and reduce drift. If the design side lacks componentization, variable consistency, or naming rules, roundtrips will wobble. Code to Canvas is better understood not as magic in isolation but as infrastructure that lets AI handle roundtrip operations when design-system operations are mature.

7. Security and governance: MCP is powerful, but connectivity expands attack surface

When connecting generative AI to enterprise tools, permissions and data leakage are central concerns. MCP is a standardized connection method, and Claude Code documentation warns to use only trusted external MCP servers; malicious content retrieval can increase prompt-injection risk. Figma MCP uses OAuth and existing file permissions, but deeper integration still increases the need to audit which AI accessed which files under which authority.

Code to Canvas captures runtime UI, so personal or confidential data shown on screen may persist as design artifacts. For production targets, operations should include dummy data modes, permission-controlled staging, and element-scoped capture. These issues existed with screenshots too, but editable layered artifacts can spread faster through copy/reuse if leaked. Organizations should define capture scope, storage, sharing boundaries, and deletion policies alongside technical rollout.

Claude Code MCP settings can be managed at project/user levels, with environment variables and output limits (for example, warnings when tool output exceeds certain token thresholds, adjustable by env settings). To understand what AI exported and how far, operations should correlate agent logs, tool call histories, and Figma access logs. Code to Canvas narrows design-dev distance, but it also increases paths crossing security boundaries.

8. Strategic meaning: design tools shift from “drawing” to “roundtrip traffic control”

Historically, interface production has repeatedly shifted representation forms. Douglas Engelbart’s 1968 demo made not only mouse and hypertext interaction visible but also collaborative editing concepts. 1970s Alan Kay/Smalltalk ideas strengthened executable representation as a medium for learning and building. 1980s–90s WYSIWYG and GUI builders widened creator access by hiding code, while also moving “implementation truth” elsewhere. In the 2000s web era, design/implementation separation deepened and design systems became the bridge.

Generative AI in the 2020s is reshaping this separation again. If natural language can launch working prototypes and implementation is “there from the beginning,” design-tool value cannot be explained only by static mockups. Figma’s “code ↔ canvas roundtrip” reframes design tools as infrastructure for representation switching and alignment. Converge implementation in code, diverge exploration on canvas. MCP-centered connectivity handles that traffic, and Code to Canvas is a symbolic feature of this shift.

From the Pocholab perspective, this news is more useful when read not as generic “AI boosts productivity,” but as reallocation of decision architecture—where in the process key decisions are made. As code generation accelerates, differentiation returns to design judgment. Code to Canvas provides a new transport path for bringing decision materials back from execution environments into shared, editable form.

9. What to watch next: expansion patterns and quality metrics

Help docs explicitly say Code to Canvas is under continuous improvement. At this stage, it is less a fully solved automatic conversion and more a capability-expansion phase shaped by real-use feedback. At least three observation axes matter.

First, client expansion. Developer docs currently mark generate_figma_design as Claude Code-only, but MCP is a standard interface, and equivalent tools could theoretically appear in other MCP clients. If that happens, “code → canvas” would become less dependent on a single IDE/agent vendor, potentially affecting enterprise standard-tool selection.

Second, quantifying conversion quality. Metrics like Auto Layout conversion ratio, text-style/color-variable retention, layer naming consistency, and component inference quality matter because they determine editability after import. For design-intent workflows, structural error (e.g., same conceptual component generated as separate objects, variables collapsed into hardcoded values) is often more critical than pixel error.

Third, post-roundtrip diff handling. When canvas edits return to code, adoption depends on whether updates are merged as reviewable patches or replaced by full regeneration. Figma can provide design context and Code Connect mappings through MCP, but merge strategy still depends on agent capability and project discipline. As with Git history, without transparency and reviewability of diffs, speed may rise while quality assurance becomes harder.

These points determine not just feature breadth, but whether organizations can safely embed the flow into real processes. In early adoption, limited-scope pilots—limited screens, limited data, limited sharing—remain the practical way to validate both conversion quality and governance design.