Figma MCP server

This Python-based Figma MCP server allows AI assistants to interact with Figma through WebSocket connections, enabling them to read, analyze, and export design elements without making any modifications to the original design files.

Installation

Prerequisites

• Python 3.6+
• Figma Desktop application

Setting Up the Environment

cd python-version
python -m venv venv
source venv/bin/activate  # Linux/Mac
# or venv\Scripts\activate  # Windows
pip install -r requirements.txt

Starting the WebSocket Server

python websocket_proxy.py --port 3055 --debug

Installing the Figma Plugin

1. Open Figma Desktop
2. Navigate to Plugins → Development → Import plugin from manifest...
3. Select src/cursor_mcp_plugin/manifest.json
4. Launch the "Cursor MCP Plugin"
5. Connect to the server on port 3055
6. Note down the Channel ID (e.g., abc123xyz)

Configuring MCP in Cursor

Add the following configuration to your Cursor MCP settings (.cursor/mcp.json):

{
  "mcpServers": {
    "figma-mcp": {
      "command": "python",
      "args": ["-m", "src.figma_mcp.server", "--server", "localhost:3055"],
      "cwd": "/path/to/your/figma_mcp"
    }
  }
}

Alternative configuration using virtual environment:

{
  "mcpServers": {
    "figma-mcp": {
      "command": "/path/to/your/figma_mcp/venv/bin/python",
      "args": ["/path/to/your/figma_mcp/src/figma_mcp/server.py", "--server", "localhost:3055"]
    }
  }
}

Replace /path/to/your/figma_mcp with the actual path to your project.

Starting the MCP Server

python -m src.figma_mcp.server --server localhost:3055

Usage

Connecting to a Channel

Use the join_channel tool with your Channel ID:

{
  "tool": "join_channel",
  "arguments": {
    "channel": "abc123xyz"
  }
}

Getting Document Information

{
  "tool": "get_document_info",
  "arguments": {}
}

Getting Node Information

{
  "tool": "get_node_info", 
  "arguments": {
    "node_id": "4472:98013"
  }
}

Retrieving Child Nodes

{
  "tool": "get_node_children",
  "arguments": {
    "node_id": "4472:98012"
  }
}

Scanning Text Nodes

{
  "tool": "scan_text_nodes",
  "arguments": {
    "node_id": "4472:98012",
    "use_chunking": true,
    "chunk_size": 50
  }
}

Exporting as an Image

{
  "tool": "export_node_as_image",
  "arguments": {
    "node_id": "4472:98013",
    "format": "PNG",
    "scale": 2.0
  }
}

Available Tools

Connection

• join_channel - Join a channel to communicate with Figma

Information Retrieval

• get_document_info - Get information about the current Figma document
• get_selection - Get information about the current selection
• read_my_design - Get detailed information about the selection including all node details
• get_node_info - Get information about a specific node by ID
• get_nodes_info - Get information about multiple nodes
• get_node_children - Get IDs of all child nodes with full recursive nesting
• get_styles - Get all styles from the document
• get_local_components - Get all local components

Components

• get_instance_overrides - Get overrides for a component instance

Search and Scan

• scan_text_nodes - Scan text nodes within a given node
• scan_nodes_by_types - Scan nodes of specific types (TEXT, RECTANGLE, FRAME)

Export

• export_node_as_image - Export a node as an image (PNG, JPG, SVG, PDF)

Annotations

• get_annotations - Get annotations for a node or the entire document

Prototyping

• get_reactions - Get reactions (interactive connections) for nodes

Configuration Options

WebSocket Server

• Port: 3055 (default)
• Host: localhost
• Debug mode: --debug

MCP Server

• Server URL: localhost:3055 (default)
• Protocol: MCP 2024-11-05
• Transport: stdio

Complete Cursor MCP Configuration

Create a .cursor/mcp.json file in your project root or home directory:

{
  "$schema": "https://schema.cursor.com/mcp.json",
  "mcpServers": {
    "figma-mcp": {
      "command": "python",
      "args": ["-m", "src.figma_mcp.server", "--server", "localhost:3055"],
      "cwd": "/absolute/path/to/figma_mcp",
      "env": {
        "PYTHONPATH": "/absolute/path/to/figma_mcp"
      }
    }
  }
}

Troubleshooting

If you encounter issues:

1. Connection problems: Check the WebSocket server status
2. Timeouts: Increase the timeout in the WebSocket client
3. Channel errors: Make sure you're using the correct Channel ID
4. Logs: Check stderr output for detailed information

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":"python","args":["-m","src.figma_mcp.server","--server","localhost:3055"],"cwd":"/path/to/your/figma_mcp","env":{"PYTHONPATH":"/path/to/your/figma_mcp"}}'

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": "python",
            "args": [
                "-m",
                "src.figma_mcp.server",
                "--server",
                "localhost:3055"
            ],
            "cwd": "/path/to/your/figma_mcp",
            "env": {
                "PYTHONPATH": "/path/to/your/figma_mcp"
            }
        }
    }
}

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": "python",
            "args": [
                "-m",
                "src.figma_mcp.server",
                "--server",
                "localhost:3055"
            ],
            "cwd": "/path/to/your/figma_mcp",
            "env": {
                "PYTHONPATH": "/path/to/your/figma_mcp"
            }
        }
    }
}

3. Restart Claude Desktop for the changes to take effect