Figma Integrates Claude Code: Transform Designs with AI-Generated Code!

Figma introduces “Claude Code to Figma,” a feature that allows for the conversion of interfaces created with Anthropic’s AI coding tool into fully editable Figma layers. This creates a unique bridge between coding and design.

From Claude Code to Figma: Bridging Terminal and Canvas

Figma has partnered with Anthropic to further close the gap between coding and design. Specifically, developers using the AI coding tool, Claude Code, can now send a web interface directly to Figma. The interface is then converted into editable layers, as if it had been originally designed in the design tool. This is not merely a screenshot but an actual Figma file that can be modified by the entire team.

Whether you start with a prompt in Figma Make or in Claude Code, the goal is the same: to achieve a tangible outcome and then develop it further, Figma explains.

The process is designed to be straightforward. Simply install Figma’s MCP (Model Context Protocol) server, then type “Send this to Figma” in Claude Code. The interface’s rendering is then automatically translated into Figma layers. The integration also works in reverse: once the design is refined in Figma, the changes can be sent back to the code via the same MCP protocol.

Analyze, Annotate, Explore: Design as a Decision-Making Space

According to a blog post by Gui Seiz, AI Design Director at Figma, and Alex Kern, software engineer, the integration aims to address a specific issue: how to move away from the linear context of code to explore alternatives in a shared space? Once the interface is imported into Figma, teams can collaborate by annotating what works, identifying what lacks clarity, and testing different approaches, all without needing to switch to another environment.

The feature also allows capturing multiple screens in a single session, which helps maintain the sequence and context of a complete flow (onboarding, checkout, settings, etc.). Frames can then be duplicated, rearranged, and compared side-by-side directly on the canvas.

Designers, engineers, and project managers can all respond to the same element, in the same context and with the same level of detail. Without a clear answer, a shared vision helps to raise questions earlier, at a stage where decisions are still easy to make.

Dylan Field: “Workflows Are No Longer Linear”

In an accompanying post, Dylan Field, co-founder and CEO of Figma, discusses this announcement within the broader context of evolving product workflows. “Previously, design and development workflows were often linear: brainstorm ideas with your team, design, then code. Today, you can start anywhere and go everywhere,” he writes.

For Field, the design canvas remains superior to prompting in an IDE for navigating among multiple possibilities. “With the canvas, you can think divergently and see the big picture by comparing approaches side-by-side. You can also use direct manipulation to edit details,” he argues, adding that once exploration is completed, the MCP Figma allows bringing the modifications back into the code.

Field also warns about a risk associated with the ease of creation provided by AI: “It’s so easy to get carried away by the momentum of creation… there’s a natural attraction to continue. And as a result, the first version often becomes the final version.” The integration with Claude Code is specifically designed to counter this tendency, by encouraging teams to step back and explore alternatives.

Strengthening the Figma-Anthropic Ecosystem

This announcement is part of a growing collaboration between Figma and Anthropic. In late January 2026, the two companies had already launched an integration that allowed transforming conversations with Claude into editable FigJam diagrams, from text prompts, PDFs, or screenshots.

The ambition stated by Dylan Field is clear: “Whether product creation starts in a terminal, a prompt box, a visual interface, or a hand-drawn sketch, we want Figma to be the place where everything converges.” The CEO also promises further announcements in this area.

The “Claude Code to Figma” feature is available now. It requires the Figma desktop app, a Figma Dev or Full seat, and Claude Code installed via npm.