Figma MCP Server

by planetabhi

431 downloads

Not rated

GitHub Website

Design
Media

About

A local Figma MCP server with full Figma REST API coverage.

Details

Author: planetabhi
Downloads: 431
Categories: Design, Media

Setting up with Highlight

This MCP is not yet compatible with Highlight’s one-click setup. However, you can still use it with Highlight by following these steps:

Download and install Highlight from highlightai.com/download
Navigate to the plugins tab and select "Add Custom Plugin"
Configure the plugin with the settings below

Plugin Name Figma MCP Server

Command (node, npx, python, etc.)

Please refer to the README for specific instructions on how to obtain API keys or other required environment variables.
Enable "Start Automatically" if you want the plugin to start when Highlight launches

Setting up with Cursor

Open Cursor's settings
Navigate to the MCP section
Click "Add new Global MCP server"
Copy and paste the configuration below based on your operating system

JSON

{
    "mcpServers": {
        "figma mcp server": {
            "figma": {
                "command": "bunx",
                "args": [
                    "figma-mcp-server"
                ],
                "env": {
                    "FIGMA_API_KEY": "your_figma_api_key_here"
                }
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "figma mcp server": {
            "figma": {
                "command": "bunx",
                "args": [
                    "figma-mcp-server"
                ],
                "env": {
                    "FIGMA_API_KEY": "your_figma_api_key_here"
                }
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "figma mcp server": {
            "figma": {
                "command": "bunx",
                "args": [
                    "figma-mcp-server"
                ],
                "env": {
                    "FIGMA_API_KEY": "your_figma_api_key_here"
                }
            }
        }
    }
}

Setting up with Claude Desktop

Open Claude Desktop's settings
Go to the Integrations tab
Click "Add MCP Server"
Use the configuration below based on your operating system

Note: Make sure Claude Desktop is running before attempting to connect.

JSON

{
    "mcpServers": {
        "figma mcp server": {
            "figma": {
                "command": "bunx",
                "args": [
                    "figma-mcp-server"
                ],
                "env": {
                    "FIGMA_API_KEY": "your_figma_api_key_here"
                }
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "figma mcp server": {
            "figma": {
                "command": "bunx",
                "args": [
                    "figma-mcp-server"
                ],
                "env": {
                    "FIGMA_API_KEY": "your_figma_api_key_here"
                }
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "figma mcp server": {
            "figma": {
                "command": "bunx",
                "args": [
                    "figma-mcp-server"
                ],
                "env": {
                    "FIGMA_API_KEY": "your_figma_api_key_here"
                }
            }
        }
    }
}

Setting up with Windsurf

Open Windsurf's preferences
Go to the Integrations section
Click "Add MCP Integration"
Use the configuration below based on your operating system

JSON

{
    "mcpServers": {
        "figma mcp server": {
            "figma": {
                "command": "bunx",
                "args": [
                    "figma-mcp-server"
                ],
                "env": {
                    "FIGMA_API_KEY": "your_figma_api_key_here"
                }
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "figma mcp server": {
            "figma": {
                "command": "bunx",
                "args": [
                    "figma-mcp-server"
                ],
                "env": {
                    "FIGMA_API_KEY": "your_figma_api_key_here"
                }
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "figma mcp server": {
            "figma": {
                "command": "bunx",
                "args": [
                    "figma-mcp-server"
                ],
                "env": {
                    "FIGMA_API_KEY": "your_figma_api_key_here"
                }
            }
        }
    }
}

Setting up with Cline

Open Cline's settings
Navigate to the Integrations section
Click "Add MCP Server"
Copy and paste the configuration below based on your operating system

Note: Make sure to restart Cline after adding the configuration.

JSON

{
    "mcpServers": {
        "figma mcp server": {
            "figma": {
                "command": "bunx",
                "args": [
                    "figma-mcp-server"
                ],
                "env": {
                    "FIGMA_API_KEY": "your_figma_api_key_here"
                }
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "figma mcp server": {
            "figma": {
                "command": "bunx",
                "args": [
                    "figma-mcp-server"
                ],
                "env": {
                    "FIGMA_API_KEY": "your_figma_api_key_here"
                }
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "figma mcp server": {
            "figma": {
                "command": "bunx",
                "args": [
                    "figma-mcp-server"
                ],
                "env": {
                    "FIGMA_API_KEY": "your_figma_api_key_here"
                }
            }
        }
    }
}

Setting up with Goose

Open Goose's preferences
Go to the Integrations tab
Select "MCP Servers"
Click "Add New Server"
Use the configuration below based on your operating system

JSON

{
    "mcpServers": {
        "figma mcp server": {
            "figma": {
                "command": "bunx",
                "args": [
                    "figma-mcp-server"
                ],
                "env": {
                    "FIGMA_API_KEY": "your_figma_api_key_here"
                }
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "figma mcp server": {
            "figma": {
                "command": "bunx",
                "args": [
                    "figma-mcp-server"
                ],
                "env": {
                    "FIGMA_API_KEY": "your_figma_api_key_here"
                }
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "figma mcp server": {
            "figma": {
                "command": "bunx",
                "args": [
                    "figma-mcp-server"
                ],
                "env": {
                    "FIGMA_API_KEY": "your_figma_api_key_here"
                }
            }
        }
    }
}

From the repository

Every client uses the same server. Point command at bunx, or its absolute path (which bunx) if the client cannot find it on PATH.

{
  "mcpServers": {
    "figma": {
      "command": "bunx",
      "args": ["figma-mcp-server"],
      "env": {
        "FIGMA_API_KEY": "your_figma_api_key_here"
      }
    }
  }
}

Config file locations:

- Claude Desktop: Settings > Developer > Edit Config (claude_desktop_config.json)
- Cursor: ~/.cursor/mcp.json, or .cursor/mcp.json per project
- Gemini CLI: ~/.gemini/settings.json

Restart the client after editing its config.

VS Code

Use .vscode/mcp.json (workspace) or your user mcp.json, with a servers key. Instead of hardcoding the token, define an input so VS Code prompts for it securely:

{
  "inputs": [
    {
      "type": "promptString",
      "id": "figma-api-key",
      "description": "Figma API Key",
      "password": true
    }
  ],
  "servers": {
    "figma": {
      "command": "bunx",
      "args": ["figma-mcp-server"],
      "env": {
        "FIGMA_API_KEY": "${input:figma-api-key}"
      }
    }
  }
}

- With ${input:figma-api-key}, VS Code prompts you for the key the first time the server starts, then stores it in your OS secret storage.
- To re-enter or clear it: Command Palette → MCP: List Servers → pick the server → reset/edit its inputs.

Claude Desktop / Cursor

Paste into your MCP client config file to install this server.

{
    "mcpServers": {
        "figma mcp server": {
            "figma": {
                "command": "bunx",
                "args": [
                    "figma-mcp-server"
                ],
                "env": {
                    "FIGMA_API_KEY": "your_figma_api_key_here"
                }
            }
        }
    }
}

McpServers

{
    "figma": {
        "command": "bunx",
        "args": [
            "figma-mcp-server"
        ],
        "env": {
            "FIGMA_API_KEY": "your_figma_api_key_here"
        }
    }
}

A local MCP server with full Figma REST API coverage. Works with Claude Desktop, Cursor, VS Code, the Gemini CLI, and any MCP client. Available onnpmand the official MCP Registry.

Each Figma REST endpoint is exposed as one self-describing MCP tool, auto-discovered at startup fromtools/figma/, so adding an endpoint is just adding a file. Required parameters are validated before each call. It runs over stdio.

Requires Bun≥ 1.2. It's Bun-native, so launch it withbunx, notnpx(Node isn't supported).

Create a personal access token in Figma under Settings > Security > Personal access tokens > Generate new token. Provide it asFIGMA_API_KEY, ideally in your client config'senvblock (see below).

Every client uses the same server. Pointcommandatbunx, or its absolute path (which bunx) if the client cannot find it onPATH.

{ "mcpServers": { "figma": { "command": "bunx", "args": ["figma-mcp-server"], "env": { "FIGMA_API_KEY": "your_figma_api_key_here" } } } }

- Claude Desktop: Settings > Developer > Edit Config (claude_desktop_config.json)
- Cursor:~/.cursor/mcp.json, or.cursor/mcp.jsonper project
- Gemini CLI:~/.gemini/settings.json

Restart the client after editing its config.

Use.vscode/mcp.json(workspace) or your usermcp.json, with aserverskey. Instead of hardcoding the token, define an input so VS Code prompts for it securely:

{ "inputs": [ { "type": "promptString", "id": "figma-api-key", "description": "Figma API Key", "password": true } ], "servers": { "figma": { "command": "bunx", "args": ["figma-mcp-server"], "env": { "FIGMA_API_KEY": "${input:figma-api-key}" } } } }

- With${input:figma-api-key}, VS Code prompts you for the key the first time the server starts, then stores it in your OS secret storage.
- To re-enter or clear it: Command Palette →MCP: List Servers→ pick the server → reset/edit its inputs.

Full coverage of the Figma REST API (non-deprecated endpoints), 50 tools across:

- Files and nodes (files, node trees, image rendering, image fills, metadata, version history)
- Variables / design tokens (read, published, bulk modify)
- Components, component sets, and styles (file, published, and team scopes)
- Comments and reactions
- Folders (top-level folders, subfolders, files, metadata)
- Users
- Dev resources
- Webhooks (v2)
- Library analytics (component, style, and variable actions and usages)
- Organization: activity logs, developer logs, AI usage (Enterprise)
- Embeds and payments

Check your MCP client's tool list for the full, always-current list of tool names and parameters.

Most tools work with any plan's personal access token. These need higher tiers:

- Variables (list_file_variables,get_published_variables,modify_variables): Enterprise organization.
- Library analytics (get_library_*): Organization or Enterprise plan.
- Activity logs, developer logs, AI usage: Enterprise organization with an admin or plan access token.

A lightweight MCP (Model Context Protocol) server for Blender. It offers a natural language interface with Blender’s Python API, improving access to documentation, and allowing users to explore and understand complex setups.

The Lottie Creator MCP brings your AI assistant directly into your animation workflow — giving it full access to LottieFiles Creator so it can build and edit Lottie animations on your behalf through natural language.

AI Video, Image & Audio Generation with over 150 models

Rive MCP let AI handle repetitive tasks, like creating complex View Models, State Machines with hundreds of states/layers, Layouts, Shapes, and more.

Create, edit, and export SVGator animations (SVG, Lottie, GIF, video) from your AI assistant, and keep an editable project you can open in the editor anytime.

You're agent can Chain 60+ AI image and video models on one workflow canvas

Real interaction references and motion recipes for AI coding agents.

Search 1,145 real website designs by style, font, colour, section and measured design tokens.

Render, verify, describe, and safely edit Mermaid diagrams through MCP.

MCP bridge between an AI agent and a live Aseprite session, same machine or agent-in-a-VM

No reviews yet — be the first

Use Google, GitHub, or an email account so ratings stay tied to real people.

Email sign in

No reviews posted yet.

Figma MCP Server

About

Details

Jump to

Setting up with Highlight

Setting up with Cursor

JSON

JSON

JSON

Setting up with Claude Desktop

JSON

JSON

JSON

Setting up with Windsurf

JSON

JSON

JSON

Setting up with Cline

JSON

JSON

JSON

Setting up with Goose

JSON

JSON

JSON

From the repository

VS Code

Claude Desktop / Cursor

McpServers

Install

About

Details

Jump to

Setting up with Highlight

From the repository

VS Code

Claude Desktop / Cursor

McpServers

Install

More like this

Google Maps

BlenderMCP

AWS MCP Servers

Figma Context (Framelink)

TalkToFigma

Arize Phoenix