Figma Opened Its Canvas to Agents: What use_figma Changes

Direct answer

use_figma is a tool in Figma's remote MCP server that lets a coding agent write native content, such as frames, components, variables and auto layout, into a Figma Design file. Figma announced it on March 24, 2026. It requires a Full seat, works best with a skill, and was free in beta as of October 1, 2026, with usage-based pricing planned.

What Figma changed on March 24, 2026

Until this announcement, most Figma MCP tools read from a file: they pulled design context, variables and screenshots so a coding agent could write code. On March 24, 2026, Figma announced that agents can also write to Figma files, through use_figma, as an open beta that same day.

In practice an agent such as Claude Code, Codex or Cursor can create frames, components, variables and auto layout in a Design file instead of describing them in text. Figma's launch post names these clients: Augment, Claude Code, Codex, Copilot CLI, Copilot in VS Code, Cursor, Factory, Firebender and Warp.

The announcement bundles a second idea, skills. A skill is a markdown file that tells an agent how your team works. Figma pairs the two on purpose: the tool gives agents access, and the skill gives them conventions.

How use_figma works under the hood

use_figma is not an image generator. It is a creation and editing tool for Design, FigJam and Slides files, and it exists only on the remote MCP server, per Figma's tools reference.

Figma's figma-use skill file explains the mechanism. The agent writes JavaScript that runs in the context of Figma's Plugin API, and whatever it returns comes back as JSON. The agent is calling the same API a plugin would, against a live file. The skill file reads like lessons learned from doing that:

• Colors: a 0 to 1 range, not 0 to 255.
• Pages: they load incrementally, so the agent must await a page switch.
• Layout: related children belong in auto layout frames, not absolute-positioned ones.
• Variables: set explicit scopes, because the default scope pollutes every property picker.
• Text: load the font before changing it.
• Return values: every write returns the IDs of the nodes it touched, so later calls can use them.

Figma's recommended pattern is incremental. Inspect the file for existing conventions, build a skeleton with stand-in nodes, fill it section by section, then check structure with get_metadata and appearance with get_screenshot.

Our reading: this explains why output tracks your file so closely. The code the agent writes can only reference components, variables and styles that exist and that it can find.

use_figma, generate_figma_design and the Figma agent are different tools

Three names get mixed up, and they start from different places. Figma's launch post describes the first two as a pair: when designs drift from code, generate_figma_design brings the latest UI into Figma, and use_figma then edits those designs with your components and variables.

The agent built into Figma is a separate product. In its May 20, 2026 announcement, Figma wrote that you should use its agent when working on the canvas, and use the MCP server and use_figma to pull code onto the canvas or push designs back to code.

Skills: markdown that carries your team's conventions

Figma defines skills as markdown instructions that shape how agents build on the canvas: workflow steps, their order, conventions and specialised knowledge. It also says anyone can write one without building a plugin.

The foundation is /figma-use, which teaches an agent how to use the tool properly. Figma's skills help page lists the skills it ships, including figma-use-figjam, figma-use-slides, figma-code-connect and two examples, figma-generate-library and figma-generate-design. They install through Figma's plugin in supported tools or as a download from GitHub.

The launch post also showcased nine skills, several from named teams at Uber, One North, Edenspiekermann, Rad Collab, Firebender, Warp and Augment Code. The list shows what people thought worth encoding:

1. /figma-generate-library: create components from a codebase.
2. /figma-generate-design: create designs with existing components.
3. /create-voice: screen reader specs (Ian Guisard, Uber).
4. /cc-figma-component: components from JSON (Nick Villapiano, One North).
5. /apply-design-system: connect designs to system components (Chris Goebel, Edenspiekermann).
6. /rad-spacing: hierarchical spacing (Nolan Perkins, Rad Collab).
7. /edit-figma-design: orchestrated workflows with Warp and Oz.
8. /sync-figma-token: token sync with drift detection (Firebender).
9. /multi-agent: parallel workflows (Augment Code).

Our reading: a skill is closer to a team style guide for the agent than to a program. It adds no capabilities; it narrows choices. Figma's Workflow lab page says neither /figma-generate-design nor /figma-use produces finished designs, only rough starting points.

Figma's documentation says to install /figma-use first, so treat the tool and the skill as one feature. To judge any skill file before you install it, see where skills come from and how to judge them.

What it needs and what it costs

Writing needs a Full seat and edit access to the file. Dev seats stay read-only. Figma says these terms can change, so check the linked pages before planning around any figure.

The full per-seat table, and which tools count against it, is in the rate-limits breakdown by seat type. To connect a client in the first place, use the Figma MCP setup walkthrough for Claude Code. The primary sources are Figma's rate limits page, the write to canvas guide and the MCP server FAQ.

One date is easy to misread. Figma's AI credit FAQ says the agent in Figma Design and the Weave tools move to general availability on October 6, 2026, and will then draw on the same AI credit pool as Figma Make. That page does not name use_figma, so whether the MCP write tool follows the same date or pool is an open question, not a fact.

The pages also disagree slightly: the rate limits page lists three exempt tools, while the tools page calls generate_figma_design exempt too. Neither says how many calls a typical use_figma task consumes.

What it means for design systems

For a design-system team the notable change is not that an agent can draw. It is that your system's structure now acts as the prompt. Two named practitioners tried it in the week after launch.

azukiazusa wrote on March 28, 2026 that the figma-generate-library skill extracted tokens from a codebase, created Figma variables and built a component library with 18 Button variants. figma-generate-design then assembled a settings screen from those components. Problems appeared too: an alert frame was too small and clipped content, and the agent first used spacer frames instead of auto layout until the author corrected it.

Katharina Pilz wrote on March 31, 2026 that importing code components produced 24 button variants with variables from color tokens, and the pricing section she requested used auto layout throughout. She also saw generic stand-in icons, uneven card heights across tiers, invented copy, and token usage that burned faster than normal chat. Her summary:

Both are single-author, small-scale accounts, not benchmarks. They show what is possible and where it slipped, and say nothing about reliability across a large system.

From those accounts and the skill file's rules, here is a readiness checklist. It is our inference, not a Figma requirement.

• Names: components have descriptive names, so the agent can find the right one instead of guessing.
• Variables: color, spacing and type exist as variables with scopes set, because the skill itself warns about unscoped ones.
• Layout: existing frames use auto layout, giving the agent a pattern to copy.
• Library: components are published; Figma notes they must be published manually before Code Connect completes.
• Team skill: it states the rules a reviewer would otherwise repeat, such as spacing steps and which component is the button.
• Duplicate file: experiments run there; Figma's FAQ recommends testing on duplicates before changing production libraries.

Two decisions sit upstream of that list. Your tokens and rules should be in a format an agent reads reliably, which the evidence on markdown versus JSON for design tokens examines. And it helps to draw the system's structure before an agent builds on it; four maps worth drawing for a design system shows which ones.

Limits and open questions

Figma lists three documented gaps: no image support (assets, imported components with images or videos, and GIFs), no custom fonts, and the 20kb response limit per call. Its launch post promises parity with the Plugin API "starting with image support and custom fonts".

The tools page, however, describes use_figma as working with images and lists an upload_assets tool for PNG, JPG, GIF and WebP files up to 10MB. The pages do not reconcile this, so test before relying on either statement.

The pages we read leave these questions open:

• What the paid price will be, and whether use_figma will use AI credits or a separate meter.
• How many tool calls a realistic task, such as a full component set, uses against the daily limits.
• How reliably output matches a large, messy production library; only small hands-on accounts exist.
• How teams should review agent edits at scale. The docs describe validating with screenshots but no diff or approval workflow for design changes (inference: none is documented).

Who should pilot it now, and a safe way to start

A good fit today is a team with a tokenised, named, published design system, a supported coding agent and Full seats for the reviewers. A poor fit is a team without a system, one that needs images or custom fonts in the output, or one that needs a known price before building a process.

A low-risk pilot looks like this:

1. Duplicate a non-critical file and confirm the person running the agent has a Full seat and edit access.
2. Install /figma-use first, then one example skill, using Figma's plugin or the GitHub download.
3. Give the agent the file URL and name the library, components and variable modes to use.
4. Ask for one small, checkable task, such as a single component set or one screen built from existing components.
5. Review for the failures reported so far: clipped content, spacers instead of auto layout, stand-in icons, invented copy.
6. Record how many tool calls the task used, to compare with your plan's daily limit and judge a future price.
7. Turn each repeated correction into a line in your team skill, then rerun.

If the file is a production library, stop at step 1 until you are sure edits are reversible with version history.

Conclusion: the file is the prompt, and the beta is a beta

use_figma gives coding agents real write access to Figma Design files through the Plugin API, and skills let a team say how that access should be used. Early independent reports show editable output that still needs a designer's review.

The lasting consequence is for design systems: the names, variables and layout rules you already maintain now steer an agent. Prepare those, pilot on a duplicate, and re-check Figma's pages for pricing and limits before you commit.