Figma and Anthropic turn AI code into editable designs to save the creative workflow

Figma is betting its future on the idea that designers should never have to play catch-up with developers again. With more than 2 million developers added to Figma teams in the last year alone, the company is launching a native integration with Anthropic’s Claude Code to solve a structural friction point that costs creative teams roughly 30% of their productive hours. By allowing the Claude Code CLI to "see" the design canvas and port production code directly back into Figma, the company is effectively ending the cycle of outdated mockups and "design debt" that has plagued software development for decades.

For most product teams, the design file is a lie. The moment a developer starts building, the code evolves, while the Figma file stays frozen in time. This creates a "translation gap" where designers are forced to manually recreate what has already been built just to keep their files accurate. Figma’s new partnership with Anthropic turns this workflow on its head. Instead of design always leading code, code can now lead design. If a developer uses Claude to build a new UI component in the terminal, they can instantly push that functional code back into Figma as a set of fully editable, auto-layout layers.

Closing the loop between terminal and canvas

The magic behind this integration lies in the Model Context Protocol (MCP), an open standard that allows Claude to understand the structure of a Figma file as easily as it understands a line of JavaScript. When a developer is working in the Claude Code command-line interface, the AI isn't just guessing what the design looks like; it is actively reading the canvas. It can identify the spacing, the hex codes, and the component names, ensuring that any code it generates is already perfectly aligned with the team’s design system.

This isn't just about moving pixels; it’s about moving intent. When code is ported into Figma via this new tool, it doesn't arrive as a flat image. It arrives as a living frame that preserves the structural logic of the code.

"Design shouldn’t be a bottleneck for code, and code shouldn’t be a black box for design," explained Gui Seiz, Design Director at Figma. The tool ensures that the "source of truth" is no longer split between two different worlds, but is shared across the entire stack.

Why this changes the day to day for designers

For designers, the most human impact of this update is the death of the "recreation tax." We have all seen the frustration of a designer spending an entire afternoon manually redrawing a dashboard that a developer already finished two days ago. By automating the "Code to Design" pipeline, Figma is freeing designers to focus on high-level strategy rather than clerical pixel-pushing.

The integration allows designers to act more like creative directors. They can allow developers to move fast with AI-generated prototypes, then "catch" those prototypes in Figma to apply the necessary brand polish and UX oversight. It turns the handoff from a one-way street into a continuous loop where the design file actually reflects the reality of the app.

Empowering developers to build with confidence

On the other side of the screen, developers are often hesitant to make quick UI changes for fear of breaking the design specs. With Claude Code to Figma, that fear evaporates. A developer can iterate on a feature using AI, see it reflected in Figma immediately, and get instant feedback from their design partners. It removes the friction of "Did I use the right padding?" because the AI is already referencing the Figma file to get the answer.

As the tech world prepares for a future where AI handles the bulk of repetitive coding tasks, Figma is positioning itself as the essential interface for human oversight. By building a bridge to Anthropic’s reasoning models, Figma is ensuring that no matter how fast the code moves, the design intent remains in the driver's seat.