Figma on Tuesday introduced a new integration that allows developers and designers to move work created in Claude Code directly into the Figma design environment. The feature, enabled through the Figma MCP, converts a browser’s rendered state into fully editable Figma layers, creating a direct bridge between AI-assisted coding and visual design.
The update enables users to install the Figma MCP and issue a simple command such as “Send this to Figma” from Claude Code. Once triggered, the system translates the current rendered output into native Figma components, preserving layout structure and visual hierarchy. The result is a design file that can be edited, compared, and refined using Figma’s collaborative canvas rather than remaining locked in code or static screenshots.
Claude Code is developed by Anthropic, whose Claude models are widely used for software development, debugging, and interface generation. The new integration reflects a broader trend in which AI tools increasingly blur the line between design and engineering, allowing teams to move fluidly between disciplines rather than handing work off in rigid stages.
A Shift Away From Linear Workflows
Figma has positioned the integration as part of a larger rethink of how digital products are built. Traditional workflows often followed a linear path, starting with ideation, then design, and finally implementation. According to Figma, modern AI tools allow teams to begin anywhere, whether in a terminal, a prompt interface, or a visual canvas, and iterate across all stages continuously.
The company argues that the design canvas plays a critical role in navigating a growing number of possible solutions generated by AI systems. By placing outputs from Claude Code directly into Figma, teams can compare multiple approaches side by side, evaluate tradeoffs, and make changes through direct manipulation rather than additional prompting.
This approach also addresses a common risk in AI-assisted development, where teams move quickly from an initial output to production without reassessing direction. Figma said the new workflow is intended to encourage broader exploration before committing to a single implementation.
Closing the Loop Between Design and Code
Beyond importing work into Figma, the MCP integration also supports sending design changes back into a codebase. After refining layouts or interactions on the canvas, teams can use the same connection to reflect those updates in code, reducing rework and misalignment between design and development.
Figma said the goal is to make its platform the central space where ideas, visuals, and implementation converge, regardless of how a project begins. Whether work starts with AI-generated code, a written prompt, or a rough sketch, the company wants Figma to serve as the shared environment where teams step back, assess direction, and finalize decisions.
The integration is available starting today and underscores Figma’s broader push to adapt its tools to AI-driven product development without abandoning the role of human judgment, craft, and design perspective.
