Getting started#

Connect Figma Desktop to an AI agent via the local MCP bridge.

Supported MCP clients (setup details): Connect AI agents — Cursor, Claude Code, Codex, Qoder, CodeBuddy, Trae.

#Requirements

• Figma Desktop (recommended; browser tabs may sleep and drop WebSockets)
• Node.js ≥ 20
• pnpm ≥ 9 (for building from source)
• An MCP-capable agent (Cursor / Claude Code / Codex / Qoder / CodeBuddy / Trae)

#Path A — published packages (fastest)

#1. Install the plugin

1. Open the GitHub Releases page
2. Download figma-agent-plugin-vX.Y.Z.zip (match the MCP version you will run)
3. Unzip
4. Figma Desktop → Plugins → Development → Import plugin from manifest…
5. Select the unzipped manifest.json
6. Run Plugins → Development → Figma Agent Kit

Confirm the bridge status indicator is green (or reconnects) once MCP is running:

Use the header minimize control for a compact selection-only window:

Gear menu (language, model, prompts, updates):

#2. Configure the MCP server

Full per-client instructions: Connect AI agents (Cursor, Claude Code, Codex, Qoder, CodeBuddy, Trae).

Cursor quick example — ~/.cursor/mcp.json or project .cursor/mcp.json:

{
  "mcpServers": {
    "figma-agent-mcp": {
      "command": "npx",
      "args": ["-y", "figma-agent-mcp"]
    }
  }
}

Custom port (must match the plugin build):

"env": { "FIGMA_AGENT_MCP_PORT": "1998" }

Restart the agent / MCP servers after editing. In Cursor’s MCP panel you should see 37 tools enabled:

#3. Smoke test

Ask the agent to:

1. list_files — should show your open file
2. get_selection — select a frame first
3. get_node / get_screenshot — verify read path
4. Optionally save_screenshots with scale: 3, compress: true

#Path B — develop from source

git clone https://github.com/ChinaCarlos/figma-agent-kit.git
cd figma-agent-kit
pnpm install
pnpm build:all

Import the plugin from:

packages/figma-agent-plugin/manifest.json

Start MCP manually (optional while iterating):

pnpm start:mcp

Or point Cursor at the built binary:

{
  "mcpServers": {
    "figma-agent-mcp": {
      "command": "node",
      "args": ["/ABS/PATH/figma-agent-kit/packages/figma-agent-mcp/dist/index.js"]
    }
  }
}

Watch mode:

pnpm dev          # plugin
pnpm dev:mcp      # MCP TypeScript watch

After UI/bridge changes: reload the plugin in Figma and restart MCP clients.

#Port sync

Default bridge port is 1998 from bridge.config.json.

pnpm sync:bridge   # also runs on predev / prebuild

If you change the port: sync → rebuild plugin → re-import / reload → restart MCP with matching FIGMA_AGENT_MCP_PORT.

#Optional: in-plugin AI

Rename and visual grouping need an OpenAI-compatible API key in the plugin settings. See AI features.
MCP bridge tools do not require that key.

#Slice export (plugin UI)

See Exporting slices for 1× preview / 3× PNG + ZIP from the plugin panel.

#Next steps