Figma Unleashes AI Agents: Revolutionize Design by Creating and Modifying Components!

Following the integration of Claude Code and then Codex into its canvas in February, Figma is taking AI integration a step further. The design platform announces the opening of its canvas to AI agents via use_figma, a new tool available within its MCP server. Agents can now create and modify components relying on each team’s design system, while instruction files called “skills” guide their work.

A new MCP tool and guidelines for instructing agents on the canvas

Figma has enhanced its MCP server with use_figma, a tool that allows AI agents to write directly into design files. Unlike generate_figma_design, which converts HTML into editable Figma layers, use_figma operates on the canvas by leveraging components, variables, and auto-layouts of the existing design system. Both tools complement each other: the first imports the current state of an interface, while the second modifies it or creates new ones.

“It is now possible to ask agents to create and update Figma files and components via the use_figma tool,” the company describes in a video:

The other pillar of this update is the “skills,” Markdown files that provide instructions to agents. They outline the steps to follow, conventions to adhere to, and quality standards expected for each design workflow, similar to what Anthropic offers with Claude. Nine example skills are available on the Figma community, including:

• figma-generate-library: to create Figma components from a codebase,
• figma-generate-design: to design using existing components and variables,
• create-voice: to generate accessibility specifications for screen readers,
• apply-design-system: to connect existing designs to system components,
• sync-figma-token: to synchronize design tokens between the code and Figma variables.

“In-house skills show agents how the Figma canvas works”:

The skills include self-correction loops. The agent can take a screenshot of their result, identify discrepancies, and iterate until a compliant rendering is achieved. use_figma is compatible with multiple MCP clients: Claude Code, Codex, Copilot CLI, Copilot in VS Code, Cursor, Augment, Factory, Firebender, and Warp.

A framework for designs more aligned with the product

Until now, AI agents had no access to design decisions made by teams: color palettes, typography, padding, components… The generated designs could lack coherence with the visual identity of the products. With use_figma and the skills, agents are now supposed to have the necessary context to produce elements connected to existing standards. “The skills teach Claude Code to work directly on the design canvas, to build in a way faithful to the intention and judgment of each team,” explains Cat Wu, Product Manager of Claude Code at Anthropic.

Thanks to Figma’s MCP server, agents can now write directly into your Figma files, extending the standards you have carefully established over time. Through the use_figma tool, Claude Code, Codex, and other MCP clients can generate and modify design elements linked to your design system, summarizes Matt Colyer, Product Director at Figma.

Figma accelerates on AI agency, as does the competition

This announcement is part of a busy period for Figma. In February, the platform successively integrated Claude Code and then Codex, positioning itself as an agnostic hub for AI coding tools. The introduction of use_figma extends this logic by giving agents not just read access, but the ability to write on design files.

Figma notes that use_figma will eventually become a paid API billed based on usage, but remains free during the beta period. The platform plans to gradually enrich the tool, starting with support for images and custom fonts, with the goal of achieving parity with its Plugin API. On the other hand, Google recently unveiled a major overhaul of Stitch, its AI-driven interface design tool, which directly competes with Figma with an infinite canvas and a project tracking agent.