Figma MCP server

This MCP server enables AI assistants like Claude to interact with Figma files directly through chat, allowing for viewing, commenting, and analyzing Figma designs without leaving your conversation.

Installation

Using Smithery (Recommended)

Install the Figma MCP Server for Claude Desktop automatically:

npx -y @smithery/cli install @MatthewDailey/figma-mcp --client claude

Manual Setup

1. Download and install the Claude desktop app from claude.ai/download

2. Obtain a Figma API Key:

   • Go to figma.com
   • Click your name in the top left
   • Navigate to Settings → Security
   • Create an API key with File content and Comments scopes

3. Configure Claude to use the Figma MCP server:

echo '{
  "mcpServers": {
    "figma-mcp": {
      "command": "npx",
      "args": ["figma-mcp"],
      "env": {
        "FIGMA_API_KEY": "<YOUR_API_KEY>"
      }
    }
  }
}' > ~/Library/Application\ Support/Claude/claude_desktop_config.json

If you already have other MCP servers configured, add only the figma-mcp block to your existing configuration file.

4. Restart Claude Desktop

5. Check for the hammer icon with the number of available tools in Claude's interface to confirm the server is running

Usage

Basic Usage

Start a new chat with Claude Desktop and share a Figma file URL:

What's in this figma file?

https://www.figma.com/design/MLkM98c1s4A9o9CMnHEyEC

Claude will analyze the file and provide information about its contents.

Available Tools

The Figma MCP server provides several tools that Claude can use to interact with your Figma files:

• add_figma_file: Add a Figma file to your conversation context
• view_node: Generate a thumbnail for a specific node in a Figma file
• read_comments: Retrieve all comments on a Figma file
• post_comment: Add a comment to a node in a Figma file
• reply_to_comment: Reply to an existing comment in a Figma file

Example Interactions

You can ask Claude to:

• "Summarize the design elements in this Figma file"
• "What comments have been left on this design?"
• "Add a comment to the login screen suggesting a different button color"
• "Reply to John's comment about the navigation"
• "Show me a thumbnail of the checkout page"

Demo

For a demonstration of how to use this tool in a realistic scenario, view this video: Figma MCP Demo

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":"npx","args":["figma-mcp"],"env":{"FIGMA_API_KEY":"<YOUR_API_KEY>"}}'

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": "npx",
            "args": [
                "figma-mcp"
            ],
            "env": {
                "FIGMA_API_KEY": "<YOUR_API_KEY>"
            }
        }
    }
}

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": "npx",
            "args": [
                "figma-mcp"
            ],
            "env": {
                "FIGMA_API_KEY": "<YOUR_API_KEY>"
            }
        }
    }
}

3. Restart Claude Desktop for the changes to take effect