{"id":61034,"date":"2026-03-25T09:00:00","date_gmt":"2026-03-25T00:00:00","guid":{"rendered":"https:\/\/designcompass.org\/?p=61034"},"modified":"2026-03-25T07:42:05","modified_gmt":"2026-03-24T22:42:05","slug":"ai-agents-that-work-directly-on-the-figma-canvas","status":"publish","type":"post","link":"https:\/\/designcompass.org\/en\/2026\/03\/25\/ai-agents-that-work-directly-on-the-figma-canvas\/","title":{"rendered":"AI agent working directly on Figma Canvas"},"content":{"rendered":"

Figma has released a feature that allows AI agents to work directly on the Design Canvas. MCP clients such as Claude Code and Codex can now create and modify components within Figma files using Figma's MCP Server and the use_figma tool. Figma has also added a Skills feature. Skills serve as guidelines in the form of Markdown files that inform agents of the team's design criteria and work sequence.<\/p>\n\n\n\n

The core of this change is that AI is no longer merely creating vague screens. Previously, there were many criticisms that AI-generated designs were unfamiliar and too similar. This was because they did not sufficiently understand contexts such as color schemes, button spacing, typography, and interactions. Figma explained that it has now enabled agents to work within the canvas while directly referencing design systems, variables, and component structures. This signifies an intention to allow AI to more deeply reflect the context of product design.<\/p>\n\n\n\n

The existing `generate_figma_design` tool focused on converting HTML into editable Figma layers. In contrast, the new `use_figma` tool allows agents to modify designs or create new assets directly on the Figma canvas. The strategy is to connect the workflow into a single flow, whether starting from code or Figma. OpenAI's Codex team also evaluated that leveraging the design context within Figma enables the creation of higher-quality products more efficiently.<\/p>\n\n\n\n

Figma also simultaneously unveiled nine example skills. These include the ability to create new components in a codebase, create new screens using existing components and variables, generate accessibility screen reader specifications, connect to design systems, and synchronize tokens. Users can write skills directly without creating plugins or writing code. Figma explained that this serves as a mechanism to help agents better adhere to the team's intentions and standards.<\/p>\n\n\n\n

This feature is available for free during the beta period but is scheduled to transition to a usage-based paid feature thereafter. Currently, it integrates with various MCP clients, including Augment, Claude Code, Codex, Copilot CLI, and Cursor Warp. Figma has announced plans to add image support and custom fonts in the future, aiming to achieve a functional scope approaching that of a plugin API. This is a noteworthy change, as design tools are evolving beyond simple editors into workspaces where AI agents actually perform their tasks.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n

More and Sources<\/h2>\n\n\n\n