Figma Integrates AI to Revolutionize Design

Figma Integrates AI Agents to Transform Design

Figma, the collaborative design platform, has recently made a significant advancement by integrating artificial intelligence (AI) agents directly into its design canvas. This innovation is based on the use_figma tool, which allows AI agents to interact with design files in a more fluid and intuitive manner. Unlike the previous tool, generate_figma_design, which merely converted HTML code into Figma layers, use_figma enables direct interaction with existing components, variables, and auto-layouts within the design system. Thus, the two tools complement each other: the first is used to import the current state of an interface, while the second allows for modification or the creation of new designs.

In an explanatory video, Figma emphasizes that agents can now create and update Figma files and components using use_figma. This capability opens new possibilities for design teams looking to automate certain tasks while maintaining a high level of quality.

Skills: Precise Instructions for AI Agents

Another key aspect of this update lies in the introduction of skills, Markdown-formatted files that serve as guides for AI agents. These files outline the steps to follow, the conventions to adhere to, and the quality standards expected for each design process. This is reminiscent of the features offered by Anthropic with its Claude tool. Nine examples of skills are already available for the Figma community, including:

• figma-generate-library: to create Figma components from a codebase,
• figma-generate-design: to design layouts from 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 code and Figma variables.

These skills include self-correction loops, allowing agents to take screenshots of their results, identify discrepancies, and iterate until achieving a compliant output. use_figma is compatible with several MCP clients such as Claude Code, Codex, Copilot CLI, Copilot in VS Code, Cursor, Augment, Factory, Firebender, and Warp.

Towards More Consistent and Aligned Designs

Until now, AI agents did not have access to design decisions made by teams, which could lead to inconsistencies in generated designs. With the introduction of use_figma and skills, agents now have the necessary context to produce elements that adhere to existing visual standards. According to Cat Wu, product lead for Claude Code at Anthropic, the skills allow Claude Code to work directly on the design canvas, respecting the intent and judgment of each team.

Figma's MCP server now enables agents to write directly into Figma files, thereby extending the standards established by teams over time. Matt Colyer, product director at Figma, summarizes that thanks to use_figma, clients like Claude Code and Codex can generate and modify design elements in relation to the existing design system.

A Race for Innovation in AI-Driven Design

This announcement from Figma comes during a period of rapid innovations for the platform. In February, Figma had already integrated Claude Code and Codex, positioning itself as a hub for AI coding tools. Opening the canvas to AI agents with use_figma extends this strategy by providing them not only read access but also the ability to write to design files.

Figma has clarified that use_figma will eventually become a paid API, billed by usage, but remains free during the beta phase. The platform plans to gradually enhance this tool, particularly with support for images and custom fonts, aiming to achieve parity with its Plugin API. Meanwhile, Google recently announced a major overhaul of Stitch, its AI-driven interface design tool, which directly targets the Figma market with an infinite canvas and a project tracking agent.