Canvashand
Start free trial
All guides

Run AI agents and subagents in Figma

Set up Canvashand, let one agent design a full product UI, run subagents across several files at once, and roll back what they create.

Reading a design is the easy half. You paste a link, the agent reads it, and you get code or a summary. Changing the design is usually still a human job.

Canvashand lets the agent write to the canvas too. With 99 tools, an agent can read your real frames, components, variables, and styles, and it can also create frames, set auto layout, bind tokens, build components, and wire prototype flows in the file you have open. That changes the work. An agent can draft a whole product UI, fix a style across a screen, or keep a design system in step with your code. And because writes are journaled in a change session, you can roll back what the agent created. This guide covers the setup, three prompts to start with, how a design session runs, and how to run several agents in several files at once.

Set up in five minutes

  1. Install the CLI and the plugin files:
curl -fsSL https://www.canvashand.com/install.sh | sh
  1. From your project folder, configure every project-scoped AI client Canvashand finds on your machine:
canvashand setup --all --scope project

This writes the MCP server entry and the bundled canvashand skill for each client. Windsurf and Cline read only a global config, so --all skips them. For those, run canvashand setup windsurf --scope user (or cline).

  1. In Figma desktop, open each file you want the agent to use and start the plugin from Plugins > Development > Canvashand, after importing it once (see the setup page).

The setup page has the plugin import steps and per-client details, and there are step-by-step guides for Claude Code and Cursor. Canvashand works through the plugin in a file you can edit. It needs no personal Figma access token.

Three prompts to start with

Start with a read, so you can see what your agent sees:

Read the selected frame and list its components, tokens, and text styles.

Then try a full build. This is the kind of request the full product-UI workflow is built for:

Design a mobile habit tracker called Streak: theme and tokens, shared components, and Today, Habit detail, and Add habit screens at 390 wide, wired into a flow. Use canvashand.

And a small, exact edit:

Make every primary button in the Today screen use the Brand/Primary style.

The first prompt changes nothing, so it is a safe way to check that the plugin is connected and your client can see the file. The second shows the full design session described below. The third shows how an agent edits properties on existing nodes instead of redrawing them.

How a design session works

When you ask for a product UI, the agent follows a fixed routine, so a long build does not drift or leave holes.

It opens a change session with begin_change_session and workflow="product-ui". The session saves a restore point in Figma version history and journals every write that follows.

Next it calls setup_design_document. Generated files use exactly three pages, in this order: Theme, design tokens; Shared components; and Screens, Frames and UIs. Sections and frames inside those pages organize the rest, so the file does not grow a page per screen. There is no greybox mode: every screen is built at high fidelity.

Then it creates a design plan with create_design_plan. The plan lists the routes, roles, state frames, visible actions, and viewports the product needs. As the agent works, update_design_plan moves each item through four stages: planned, built, wired, and verified. An item is wired when its actions lead to real destinations, and the screens are connected in a flow made with create_wireflow.

Before it calls the work done, the agent runs run_design_audit. The audit checks layout, typography, color and token bindings, interaction states, responsive behavior, assets, and design-stage accessibility, and it records evidence for each check.

Finally, end_change_session closes the session. It makes a fresh check, and it refuses to close while the plan has gaps or unresolved validation findings. If the agent leaves screens unbuilt, the session says so instead of passing quietly.

Roll back what the agent created

Every write inside a change session is journaled, and begin_change_session saves a checkpoint in Figma version history. If the result is not what you wanted, rollback_changes deletes every node, page, variable, and variable collection the session created, in reverse order. It does not revert edits to layers that already existed. To undo those, restore the session's checkpoint in Figma version history.

A session that starts automatically on a write saves no checkpoint, so for edits to existing layers, ask the agent to open the session first with begin_change_session. For a big build, the product-UI workflow does that for you.

Several files, several agents

One agent building a design system and another building screens should not have to wait on each other. Canvashand lets them work at the same time.

Open the plugin in each file. Every file connects to the same local server, so there is nothing extra to configure. The list_files tool shows each connected file with its fileId and name. Any tool call accepts an optional fileId, which is how each subagent targets its own file. In one session, select_file sets the default file.

Each file keeps its own change sessions, its own rollback journal, and its own credit lease. One agent's rollback never touches another file. Reopening the plugin in a file reconnects it under the same ID.

A prompt for Claude Code, or any client that supports subagents:

Use three subagents in parallel, one per open Figma file from list_files: the design system in 'Design system', the onboarding flow in 'Onboarding', and the settings screens in 'Settings'.

For the full picture, read Several Figma files, several agents, one server.

Which AI clients work

You are not tied to one editor. The same server entry works across clients, so a team can mix them, and each person keeps the client they already use.

canvashand setup configures these clients for you:

  • Claude Code
  • Codex
  • Cursor
  • VS Code
  • Gemini CLI
  • Windsurf
  • Kiro
  • Cline
  • Zed
  • Qwen Code
  • OpenCode
  • Antigravity

Any other MCP client connects with a standard MCP server entry that runs the canvashand command.

Where to go next

If your goal is code from a design, read Turn a Figma link into code that matches. If you are weighing Canvashand against Figma's own server, read Canvashand vs the official Figma MCP server. Free includes 2,000 calls a month; Pro is $6.99 a month or $69.99 a year with unlimited calls; every Pro plan starts with a 7-day free trial.