figmind

Give your AI the ability to think in Figma.

figmind connects any MCP-compatible AI client to Figma — letting it read, create, and modify designs in real time using natural language.

Getting Started · Available Tools · Architecture · Contributing

Demo

How it works

Your AI  ←—— MCP ——→  figmind server  ←—— WebSocket ——→  Figma Plugin  ←——→  Canvas

figmind runs a local MCP server your AI can call. A companion Figma plugin bridges the WebSocket connection directly to your open file. All traffic stays on your machine — no cloud relay, no third-party API.

Getting Started

Requirements

• Node.js 20+

• Cursor or any MCP-compatible AI client

• Figma Desktop (web version does not support local plugins)

Step 1 — Configure your MCP client

One-click install for Cursor:

Or manually — open ~/.cursor/mcp.json and add:

{
  "mcpServers": {
    "figmind": {
      "command": "npx",
      "args": ["--yes", "figmind@latest"]
    }
  }
}

Restart Cursor. The first run downloads figmind automatically (~5 seconds).

Using comment tools? Add your Figma personal access token:

"env": { "FIGMA_TOKEN": "your-figma-personal-access-token" }

Generate one at Figma → Account Settings → Security → Personal access tokens.

Step 2 — Install the Figma plugin

1. Clone this repository

2. Run yarn install && yarn build:plugin

3. Open any file in Figma Desktop

4. Go to Plugins → Development → Import plugin from manifest

5. Select packages/figma-plugin/manifest.json

6. Run Figma MCP Bridge — the indicator turns green when connected

Step 3 — Start designing with AI

With the plugin running and Cursor open, just ask:

Create a frame called "Hero" — 1440×900, centered on the canvas
Add a text node "Welcome back" at x:80, y:120, 32px Inter bold
List all color variable collections in this file
Apply the variable "color/primary" to the fills of node [id]
Create a mobile login screen with email and password fields
Review the design of the screen with node id [id] and fix spacing issues
Generate a 5-screen onboarding flow for a fitness app

Available Tools

Canvas

Nodes

Components

Design

Variables

Prototype

Export

Comments (requires FIGMA_TOKEN)

Built-in Prompts

figmind ships with three ready-to-use prompts:

Architecture

packages/
├── mcp-server/      # Node.js — published to npm as figmind
│   └── src/
│       ├── index.ts        # Entry point (stdio transport)
│       ├── mcp.ts          # Server factory, registers all tools
│       ├── bridge.ts       # WebSocket bridge to Figma plugin
│       ├── prompts.ts      # Built-in prompts
│       └── tools/          # All MCP tool implementations
└── figma-plugin/    # Figma plugin — bridges commands to the canvas
    └── src/
        ├── code.ts         # Plugin main: executes all Figma API commands
        └── ui/ui.html      # Plugin UI (connection status indicator)

figmind uses the Model Context Protocol SDK over stdio, which means it works with any MCP-compatible client — not just Cursor.

Contributing

Contributions are very welcome! Here's how to get started:

git clone https://github.com/guhcostan/figma-mcp-bridge.git
cd figma-mcp-bridge
yarn install
yarn dev   # starts both the MCP server (watch mode) and plugin bundler

Running tests:

yarn test

Adding a new tool

1. Create your tool in packages/mcp-server/src/tools/

2. Register it in packages/mcp-server/src/mcp.ts

3. Handle the command in packages/figma-plugin/src/code.ts

4. Add tests in packages/mcp-server/src/tools/__tests__/

Publishing a New Version

Bump the version in packages/mcp-server/package.json, then:

git tag v1.0.1
git push --tags

GitHub Actions publishes to npm automatically on any v* tag.

License

MIT © Gustavo Costa