Figma, Anthropic launch Code to Canvas

Design collaboration platform Figma has deepened its partnership with AI company Anthropic through the launch of “Code to Canvas,” a feature that converts AI-generated code from tools like Claude Code into fully editable design files within Figma’s canvas. The feature, announced in February 2026, transforms code generated in AI tools into designs that teams can refine, compare, and iterate on directly within Figma’s platform. The integration allows developers, designers, and product teams to capture functioning UI built with Claude Code and convert it into fully editable Figma frames.

Figma task card component showing "Optimize Landing Page" with due date, assignees, and priority badge in design system UI.

Bridging the Code-to-Design Gap

Code to Canvas creates a bridge between AI coding tools and Figma’s workflow, allowing users who have built working interfaces by prompting an AI agent to bring them directly into Figma’s canvas, where teams can refine designs, compare options side by side, and align on design decisions. The integration works by screenshotting a running Claude Code UI, then using AI to reconstruct the layout as native Figma layers, components, and auto-layout groups.

The captured screen lands on the canvas as an editable design artifact, not a flat image, but a real frame. This represents a significant shift from traditional design-to-code workflows, which have historically moved in only one direction. In Claude Code, users simply type “Send this to Figma” to convert the rendered browser interface into structured design layers.

Traditional vs Code to Canvas workflow comparison: Design to Code vs bidirectional Code and Design integration paradigm.

Strategic Partnership with Anthropic

Anthropic released Claude Sonnet 4.6 in conjunction with the Figma partnership, touting it as Anthropic’s most capable Sonnet model yet. The model demonstrates improved performance in computer use, coding, design, knowledge work tasks, and data processing, representing a full upgrade across coding, computer use, long-context reasoning, agent planning, knowledge work, and design.

Claude Sonnet 4.6 became the default for Free and Pro users within the Claude chatbot and the Claude Cowork productivity tool. Early testing showed users preferred Sonnet 4.6 over Sonnet 4.5 70 percent of the time and over Opus 4.5 59 percent of the time. In testing, users cited better consistency, improved context understanding, and enhanced visual layouts and animations.

Sonnet 4.6 preference rates vs competing AI models showing 70% preference over Sonnet 4.5 with improvements in consistency...

AI’s Growing Impact on Design Workflows

The partnership comes as AI continues to reshape design and development workflows across the industry. According to Figma’s internal research, the company’s AI impact index reached 62 out of 100 in 2026, nearly double the 2024 figure, indicating rapid adoption of AI-assisted design tools.

Figma's AI Impact Index Growth chart showing nearly doubling from 31 in 2024 to 62 in 2026, highlighting rapid AI adoption...

The focus on interoperability is notable, as Figma acknowledges that AI-generated code will come from multiple sources and needs to flow seamlessly into visual design tools, suggesting a more mature, ecosystem-oriented approach to AI integration than the all-in-one AI design tools some startups are pitching.

Expanding Integration Ecosystem

Figma has not limited its AI integrations to Anthropic. In late February 2026, Figma announced a partnership with OpenAI to integrate Codex, the AI coding tool, coming a week after the Anthropic partnership. This integration lets users start working with a design in Figma or code in Codex, and move between the two platforms easily using Figma’s Model Context Protocol (MCP) server.

The Code to Canvas feature uses the Figma Model Context Protocol to connect Claude outputs with Figma’s collaborative canvas. Once in Figma, teams can edit, rearrange, and annotate the UI as native objects, and the workflow supports both prompt-first work in Figma Make and code-first work in Claude Code.

Practical Applications and Workflow Support

The integration supports multi-step workflows, where several screens are captured in one session, keeping the sequence and context clear. The update makes it easier to compare flows side by side, spot inconsistencies, and explore variations without rewriting code.

Figma design file showing four welcome screen variations and user flow wireframes comparing different layout options for a...

The Code to Canvas feature addresses a longstanding challenge in product development: maintaining alignment between code implementations and design specifications. Figma’s partnership with Anthropic addresses the gap between coding and design, focusing on whether teams can evaluate and refine what AI builds together in a shared space.

Industry Implications

The partnership positions Anthropic deeper into the enterprise tooling market, with strategic integrations into essential developer and designer tools potentially creating significant enterprise value beyond conversational AI use cases.

The broader impact of the partnership depends on how widely development teams embrace the integration, but if Code to Canvas becomes a routine step in projects using AI-generated code, it could further solidify Figma’s place as an essential collaboration platform in the era of AI-assisted software development.

Key Facts

Figma launched Code to Canvas in February 2026, converting Claude Code output into editable Figma designs
Anthropic released Claude Sonnet 4.6 alongside the partnership, with users preferring it 70% of the time over the previous version
Figma’s AI impact index reached 62 out of 100 in 2026, nearly double the 2024 score
The integration uses Figma’s Model Context Protocol to connect AI coding tools with design workflows
Figma followed up with an OpenAI Codex integration in late February 2026
Users activate the feature by typing “Send this to Figma” within Claude Code