Figma MCP server

This MCP server provides a bridge between Figma's API and your projects, allowing you to interact with Figma through the Model Context Protocol for plugin and widget development.

Installation

To get started with the Figma MCP server:

git clone <repository-url>
cd figma-mcp
bun install

Configuration

Setting Up Environment Variables

Create a .env file with these variables:

FIGMA_PERSONAL_ACCESS_TOKEN=your_figma_token
PORT=3001
NODE_ENV=development

Obtaining a Figma Access Token

1. Log in to Figma
2. Navigate to Account Settings > Personal Access Tokens
3. Create a new access token
4. Copy this token to your .env file

Running the Server

Build the Project

bun run build

Start Development Server

bun run dev

Using Command Line Arguments

You can set environment variables using the -e parameter:

bun --watch src/index.ts -e FIGMA_PERSONAL_ACCESS_TOKEN=your_token -e PORT=6000

Or use the dedicated token parameter:

bun --watch src/index.ts --token your_token

Shorthand version:

bun --watch src/index.ts -t your_token

Configuring in Cursor

Add this to your .cursor/mcp.json file:

{
  "Figma MCP": {
    "command": "bun",
    "args": [
      "--watch",
      "/path/to/figma-mcp/src/index.ts",
      "-e",
      "FIGMA_PERSONAL_ACCESS_TOKEN=your_token_here",
      "-e",
      "PORT=6000"
    ]
  }
}

Available Figma Tools

The server provides several Figma operation capabilities:

• File operations: Access and manage files and versions
• Node operations: Get and manipulate Figma nodes
• Comment operations: Create and manage comments
• Image operations: Export Figma elements as images
• Search functionality: Find content within Figma files
• Component operations: Work with Figma components
• Canvas operations: Create shapes, text, and other elements
• Widget operations: Manage Figma widgets

Figma Plugin Development

Loading Your Plugin in Figma

1. In Figma, right-click to open the menu
2. Go to Plugins → Development → Import plugin from manifest...
3. Select your plugin's manifest.json file
4. Your plugin will now appear in Figma's plugin menu

Building and Testing Plugins

Build your plugin:

bun run build:plugin

Run in development mode:

bun run dev:plugin

Plugin-Server Communication

Plugins can communicate with the MCP server via WebSocket for:

• Complex data processing
• External API integration
• Cross-session data persistence
• AI functionality integration

Widget Development

Build your widget:

bun run build:widget

Run in development mode:

bun run dev:widget

How to install this MCP server

For Claude Code

To add this MCP server to Claude Code, run this command in your terminal:

claude mcp add-json "Figma-MCP" '{"command":"bun","args":["--watch","src/index.ts","-e","FIGMA_PERSONAL_ACCESS_TOKEN=your_token_here","-e","PORT=6000"]}'

See the official Claude Code MCP documentation for more details.

For Cursor

There are two ways to add an MCP server to Cursor. The most common way is to add the server globally in the ~/.cursor/mcp.json file so that it is available in all of your projects.

If you only need the server in a single project, you can add it to the project instead by creating or adding it to the .cursor/mcp.json file.

Adding an MCP server to Cursor globally

To add a global MCP server go to Cursor Settings > Tools & Integrations and click "New MCP Server".

When you click that button the ~/.cursor/mcp.json file will be opened and you can add your server like this:

{
    "mcpServers": {
        "Figma MCP": {
            "command": "bun",
            "args": [
                "--watch",
                "src/index.ts",
                "-e",
                "FIGMA_PERSONAL_ACCESS_TOKEN=your_token_here",
                "-e",
                "PORT=6000"
            ]
        }
    }
}

Adding an MCP server to a project

To add an MCP server to a project you can create a new .cursor/mcp.json file or add it to the existing one. This will look exactly the same as the global MCP server example above.

How to use the MCP server

Once the server is installed, you might need to head back to Settings > MCP and click the refresh button.

The Cursor agent will then be able to see the available tools the added MCP server has available and will call them when it needs to.

You can also explicitly ask the agent to use the tool by mentioning the tool name and describing what the function does.

For Claude Desktop

To add this MCP server to Claude Desktop:

1. Find your configuration file:

• macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
• Windows: %APPDATA%\Claude\claude_desktop_config.json
• Linux: ~/.config/Claude/claude_desktop_config.json

2. Add this to your configuration file:

{
    "mcpServers": {
        "Figma MCP": {
            "command": "bun",
            "args": [
                "--watch",
                "src/index.ts",
                "-e",
                "FIGMA_PERSONAL_ACCESS_TOKEN=your_token_here",
                "-e",
                "PORT=6000"
            ]
        }
    }
}

3. Restart Claude Desktop for the changes to take effect