figma-designer-mcp

MCP server that gives AI agents full read and write access to Figma — 50+ tools for creating frames, placing components, styling, auto layout, and more.

Works with any MCP-compatible client (Claude Desktop, Cursor, Continue, etc.) and also as an OpenClaw extension.

English | 中文

• Read — powered by the Figma REST API (no plugin required).
• Write — powered by a lightweight Figma plugin that connects via WebSocket and executes Plugin API operations in real time.

vs. Figma Official MCP

Figma's official MCP server is designed for the Design → Code direction: it helps developers read existing designs and generate code. figma-designer-mcp is built for the opposite direction — Code/AI → Design: it lets AI agents create and modify designs directly on the Figma canvas.

In short: Figma's official MCP helps you turn designs into code. figma-designer-mcp helps AI turn ideas into designs. They are complementary — you can use both together in the same project.

Best Practices

Check out the Best Practices Guide for proven strategies to get the most out of this tool:

• Use a component library file (e.g. Ant Design) as your workspace — search & reuse 3–5x faster than drawing from scratch
• Create a template frame for consistent page layout across multi-page designs
• Duplicate instead of redraw — for tables, lists, and grids, create one item then copy it
• Configure variant properties instead of manually editing component internals
• Use the icon library — search and instantiate, don't draw icons by hand

These techniques compound to reduce tool calls by 60–80%, saving both time and tokens.

Quick Start

FIGMA_TOKEN=figd_xxxxxxxxxxxx npx figma-designer-mcp

Or install globally:

npm install -g figma-designer-mcp
FIGMA_TOKEN=figd_xxxxxxxxxxxx figma-designer-mcp

Environment Variables

Claude Desktop

Add to claude_desktop_config.json:

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["figma-designer-mcp"],
      "env": {
        "FIGMA_TOKEN": "figd_xxxxxxxxxxxx"
      }
    }
  }
}

Cursor

Add to .cursor/mcp.json:

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["figma-designer-mcp"],
      "env": {
        "FIGMA_TOKEN": "figd_xxxxxxxxxxxx"
      }
    }
  }
}

Other MCP Clients

Any client that supports the MCP stdio transport:

{
  "command": "npx",
  "args": ["figma-designer-mcp"],
  "env": { "FIGMA_TOKEN": "figd_xxxxxxxxxxxx" }
}

Figma Plugin Setup (for Write Tools)

Read tools work out of the box. Write tools (creating nodes, styling, auto layout, etc.) require a companion Figma plugin that acts as the execution bridge.

1. Build the plugin

cd /path/to/figma-designer-mcp   # or: npx figma-designer-mcp --help to find install location
npm run build:plugin

This compiles figma-plugin/src/plugin.ts → figma-plugin/plugin.js using esbuild.

2. Import into Figma

1. Open Figma (desktop app or browser).
2. Go to Plugins → Development → Import plugin from manifest…
3. Select figma-plugin/manifest.json from the package directory.
4. Open the Figma file you want to design in.
5. Run the plugin: Plugins → Development → AI Figma Designer.

The plugin opens a UI where you enter the MCP server address and port, then click Connect. Configuration is persisted via Figma's clientStorage. The plugin auto-reconnects on disconnection.

Tip: Duplicate a design system community file (e.g. Ant Design Open Source), open the duplicate, and run the plugin. The agent can then use figma_search_components to find components and figma_create_instance to place them.

Architecture

AI Client (Claude, Cursor, etc.)
  │  MCP stdio transport
  ▼
figma-designer-mcp
  ├── REST API client  →  Figma API (read, screenshot, components, styles, comments)
  └── WebSocket server (FigmaBridge, default port 3055)
                              ▼
               Figma Client (Desktop or Browser)
                 └── "AI Figma Designer" plugin
                     └── Executes Plugin API calls (create nodes, set styles, auto layout …)

Read path

Agent calls figma_read / figma_screenshot / etc. → MCP server makes an HTTP request to https://api.figma.com/v1/... using FIGMA_TOKEN → returns structured data.

Write path

1. MCP server starts a WebSocket server on port FIGMA_BRIDGE_PORT (default 3055).
2. The Figma plugin connects to this WebSocket server.
3. When an agent calls a write tool (e.g. figma_create_frame), the server sends a JSON message:

   { "id": "req_1", "action": "create_frame", "args": { "name": "Login Page", "width": 1440, "height": 900 } }
   

4. The plugin executes figma.createFrame() via the Plugin API and replies:

   { "replyTo": "req_1", "result": { "ok": true, "nodeId": "123:456", "type": "FRAME", "name": "Login Page" } }
   

5. The server resolves the promise and returns the result to the agent.

Each request has a 30-second timeout. If the plugin disconnects mid-operation, pending requests are rejected immediately.

Auto-positioning

All creation tools automatically place new top-level elements to the right of existing content when:

1. No parentId is specified (placed at page root level)
2. No explicit x or y is provided

This prevents overlapping. Elements placed inside a Frame (with parentId) are not affected.

Available Tools

Read Tools (REST API — no plugin needed)

Write Tools (WebSocket bridge — plugin required)

Creation

Find & Select

Page Management

Node Management

Styling

Layout

Text Editing

Components & Boolean

Component Library

Export & Utilities

Dynamic Tool Loading

Instead of exposing all 50+ tools at once (~4000 tokens in tool definitions), the server uses dynamic tool loading by default. Only a small set of core tools (~9) plus meta-tools are loaded initially. The LLM loads additional tool groups on demand as needed.

How It Works

Tools are organized into 8 categories:

Two meta-tools manage loading:

• figma_load_toolset — Load one or more tool categories (e.g. "create,style" or "all").
• figma_unload_toolset (MCP) / figma_list_toolsets (OpenClaw) — Unload categories or list their status.

The LLM sees the category descriptions in figma_load_toolset and loads what it needs. For example, when asked to "create a login page", it calls figma_load_toolset("create,style,text,layout") to load 24 relevant tools.

Token Savings

Typical savings: 60–80% of tool definition tokens.

Development

Building

npm run build           # Build everything (plugin + MCP server)
npm run build:plugin    # Build Figma plugin only
npm run build:mcp       # Build MCP server only

• build:plugin compiles figma-plugin/src/plugin.ts → figma-plugin/plugin.js (IIFE, ES2015, browser)
• build:mcp compiles mcp-server.ts → dist/mcp-server.js (ESM, Node 18+)

After modifying plugin.ts, rebuild and restart the Figma plugin to pick up changes.

Adding new tools

1. Add the tool definition in src/tool-defs.ts (single source of truth for both OpenClaw and MCP modes).
2. Bridge-based tools (write): Add a new action handler in figma-plugin/src/plugin.ts. Use the bt() helper in tool-defs.ts for the tool definition.
3. REST API tools (read): Add a client method in src/client.ts. Write a custom execute function in tool-defs.ts.

File Structure

figma-designer-mcp/
├── mcp-server.ts             # MCP server entry point
├── index.ts                  # OpenClaw plugin entry (alternative mode)
├── openclaw.plugin.json      # OpenClaw plugin manifest
├── package.json
├── LICENSE
├── src/
│   ├── tool-defs.ts          # Shared tool definitions (single source of truth)
│   ├── tool-registry.ts      # Tool categories & dynamic loading registry
│   ├── client.ts             # Figma REST API client (read operations)
│   ├── tools.ts              # OpenClaw adapter — read tools
│   ├── write-tools.ts        # OpenClaw adapter — write tools
│   └── bridge.ts             # WebSocket server — accepts Figma plugin connections
├── dist/                     # Build output
│   └── mcp-server.js         # Compiled MCP server (generated by npm run build:mcp)
├── figma-plugin/             # Figma plugin (import into Figma for write operations)
│   ├── manifest.json
│   ├── ui.html               # Plugin UI — server config & WebSocket client
│   ├── src/
│   │   └── plugin.ts         # TypeScript source (action dispatcher)
│   ├── plugin.js             # Compiled output (generated by npm run build:plugin)
│   ├── tsconfig.json
│   └── assets/
│       └── logo.jpeg
└── .gitignore

Troubleshooting

"Figma plugin not connected"

• Make sure the Figma plugin is running (Plugins → Development → AI Figma Designer).
• Check that the WebSocket address in the plugin UI matches the server IP and port.
• Verify no firewall is blocking the bridge port.

Plugin connects but operations fail

• Open the Figma plugin console (Plugins → Development → Open Console) to see error messages.
• Ensure you have a file open in Figma — the plugin operates on the current page.

Read tools work but write tools don't

• Read tools use the REST API and don't need the plugin. Write tools require the plugin to be running and connected. Check figma_bridge_status to verify connectivity.

Font errors on figma_add_text

• The font must be available in Figma. Default is Inter which is always available.
• For custom fonts, ensure they are installed or available in your Figma account.

OpenClaw Mode

This package also works as an OpenClaw extension. To use it in OpenClaw instead of as a standalone MCP server:

Prerequisites

Configuration

Add to openclaw.json:

{
  "plugins": {
    "entries": {
      "figma-designer": {
        "enabled": true,
        "config": {
          "personalAccessToken": "figd_xxxxxxxxxxxx",
          "bridgePort": 3055          // optional, default 3055
        }
      }
    }
  }
}

Restart the OpenClaw gateway after updating configuration.

License

MIT — see LICENSE.