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
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.
- Node.js 20+
- Cursor or any MCP-compatible AI client
- Figma Desktop (web version does not support local plugins)
One-click install for Cursor:
Or manually — open ~/.cursor/mcp.json and add:
{
"mcpServers": {
"figmind": {
"command": "npx",
"args": ["--yes", "figmind@latest"]
}
}
}| OS | Config path |
|---|---|
| macOS | ~/.cursor/mcp.json |
| Windows | %APPDATA%\Cursor\mcp.json |
| Linux | ~/.config/Cursor/mcp.json |
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.
- Clone this repository
- Run
yarn install && yarn build:plugin - Open any file in Figma Desktop
- Go to Plugins → Development → Import plugin from manifest
- Select
packages/figma-plugin/manifest.json - Run Figma MCP Bridge — the indicator turns green when connected
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
| Tool | Description |
|---|---|
create_frame |
Creates a new frame on the canvas |
create_text |
Creates a text node |
create_from_html |
Builds a node tree from HTML/CSS markup |
get_file_context |
Returns a summary of the current file |
get_page_components |
Lists all components on the current page |
| Tool | Description |
|---|---|
get_node |
Returns a node's full data by ID |
get_children |
Lists a node's direct children |
get_full_tree |
Returns the full subtree of a node |
find_nodes |
Searches nodes by name or type |
set_node_property |
Updates position, size, fills, strokes, opacity, and more |
move_node |
Moves a node to a different parent |
delete_node |
Removes a node |
| Tool | Description |
|---|---|
create_component_instance |
Instantiates a published component by key |
swap_component |
Swaps a component instance to a different master |
| Tool | Description |
|---|---|
get_design_system_kit |
Returns fonts, colors, and tokens from the file |
get_all_used_styles |
Lists all styles used in the document |
get_available_fonts |
Lists all available fonts |
| Tool | Description |
|---|---|
get_variable_collections |
Lists all variable collections |
get_variables |
Lists variables, optionally filtered by collection |
apply_variable_to_node |
Binds a variable to a node property |
get_library_variables |
Lists variables from connected libraries |
| Tool | Description |
|---|---|
set_reactions |
Sets prototype reactions (links, animations) on a node |
| Tool | Description |
|---|---|
export_node |
Exports a node as an image (returns base64) |
export_batch |
Exports multiple nodes at once |
export_page |
Exports the full page |
| Tool | Description |
|---|---|
create_comment |
Creates a comment on the file |
get_comments |
Lists all comments on the file |
figmind ships with three ready-to-use prompts:
| Prompt | Description |
|---|---|
create-screen |
Generate a mobile screen following the project design system |
review-screen |
Review a screen for design issues and layout problems |
create-flow |
Generate a full multi-screen user flow for a feature |
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.
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 bundlerRunning tests:
yarn test- Create your tool in
packages/mcp-server/src/tools/ - Register it in
packages/mcp-server/src/mcp.ts - Handle the command in
packages/figma-plugin/src/code.ts - Add tests in
packages/mcp-server/src/tools/__tests__/
Bump the version in packages/mcp-server/package.json, then:
git tag v1.0.1
git push --tagsGitHub Actions publishes to npm automatically on any v* tag.