Claude Figma MCP server

This MCP server enables Claude to create and manipulate designs in Figma through either a Figma plugin or via the Figma API. It provides two approaches: a plugin-based method for creating designs from scratch and an API approach for working with existing Figma files without opening the application.

Installation Options

Using NPM (Recommended)

Install the package globally:

npm install -g claude-figma-mcp

Or run it directly with npx:

npx claude-figma-mcp

Running from Local Source

# 1. Clone the repository
# 2. Install dependencies
npm install
# 3. Build the TypeScript code
npm run build
# 4. Run the server
npm start        # HTTP mode
npm run start:cli # STDIO mode

Setting Up Claude Desktop Integration

Standard Approach

Add this to your Claude Desktop configuration file:

{
  "mcpServers": {
    "figma-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "claude-figma-mcp",
        "--stdio"
      ]
    }
  }
}

Figma API Approach

For using the Figma API directly (more reliable but fewer creation capabilities):

{
  "mcpServers": {
    "figma-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "claude-figma-mcp",
        "--stdio",
        "--figma-api-key",
        "your_figma_api_key_here"
      ]
    }
  }
}

Simplified Server Option

For environments where the standard server has issues:

{
  "mcpServers": {
    "figma-mcp": {
      "command": "node",
      "args": [
        "/path/to/claude-figma-mcp/simple-mcp-server.js"
      ]
    }
  }
}

Setting up the Figma Plugin

If using the Plugin Approach:

1. Open Figma and navigate to Menu → Plugins → Development → Import plugin from manifest...
2. Select the figma-plugin/manifest.json file from the repository
3. The plugin will now be available in your Figma plugins menu

Usage Instructions

Plugin Approach

1. Start the MCP server in HTTP mode
2. Open Figma and run the Claude MCP Integration plugin
3. Click "Connect to MCP Server" in the plugin UI
4. In Claude, use the Figma MCP tool to interact with Figma

API Approach

1. Start the MCP server with your Figma API key
2. In Claude, use the Figma MCP tool to interact with Figma files
3. No need to open Figma - operations happen directly via the API

Available Tools

Plugin Approach Tools

• create_project: Create a new Figma project
• create_frame: Create a new frame/artboard
• create_rectangle: Create a rectangle element
• create_text: Create a text element
• create_component: Create pre-defined UI components (buttons, inputs, etc.)
• create_layout: Create common layout patterns (headers, footers, etc.)
• create_interaction: Create interactive prototyping connections between elements
• export_frame: Export a frame as an image

API Approach Tools

• get_file: Retrieve information about a Figma file
• get_file_nodes: Get specific nodes from a Figma file
• get_comments: Retrieve comments from a Figma file
• post_comment: Add a comment to a Figma file
• get_team_components: List components from a team
• export_image: Export a frame or node as an image

Example Claude Prompts

Plugin Approach Examples

Can you create a login screen in Figma? It should have a logo at the top, email and password input fields, and a login button.

I need a dashboard layout in Figma with a header, sidebar navigation, and a main content area with 4 card components showing different statistics.

API Approach Examples

Show me the contents of my Figma file with ID abcde12345

Export the frame named 'Homepage' from my Figma file abcde12345 as a PNG

Configuration

The server can be configured using environment variables or command-line arguments:

Environment Variables

• PORT: HTTP server port (default: 3000)
• WEBSOCKET_PORT: WebSocket server port for Figma plugin communication (default: 8080)
• FIGMA_API_KEY: Figma API key (required for API approach)

Command Line Arguments

• --port: HTTP server port
• --websocket-port: WebSocket server port
• --figma-api-key: Figma API key
• --stdio: Run in stdio mode (for Claude Desktop integration)

Troubleshooting

Connection Issues with Claude Desktop

If experiencing issues with the default server, try the simplified server option:

node /path/to/claude-figma-mcp/simple-mcp-server.js

Plugin Can't Connect to Server

Make sure:

• The MCP server is running in HTTP mode
• The ports aren't blocked by a firewall
• The WebSocket port (default: 8080) matches in both server config and plugin

API Key Not Recognized

Ensure your Figma API key:

• Is valid and has the necessary permissions
• Is correctly set in either the environment variable or command-line argument

How to add this MCP server to 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 > MCP and click "Add new global MCP server".

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

{
    "mcpServers": {
        "cursor-rules-mcp": {
            "command": "npx",
            "args": [
                "-y",
                "cursor-rules-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 explictly ask the agent to use the tool by mentioning the tool name and describing what the function does.