Figma

ModelContextProtocol for Figma's REST API

typescript

210

GitHub Stars

typescript

Language

6 months ago

First Indexed

2 months ago

Catalog Refreshed

Documentation & install

Readme and setup notes from the catalogue, plus a client-ready config you can copy for your MCP host.

Installation

Add the following to your MCP client configuration file.

Configuration

View docs

{
  "mcpServers": {
    "matthewdailey-figma-mcp": {
      "command": "npx",
      "args": [
        "figma-mcp"
      ],
      "env": {
        "FIGMA_API_KEY": "<YOUR_API_KEY>"
      }
    }
  }
}

You can connect Claude to Figma and interact with your Figma files through a dedicated MCP server. This server lets you add Figma files to chat, read and post comments, and analyze designs directly from your conversations.

How to use

You can start a chat with Claude and ask questions like “What’s in this Figma file?” by providing the Figma file URL. The server exposes tools to add a file to your context, view thumbnails, read comments, post new comments, and reply to existing comments. Use these capabilities to explore designs, gather feedback, and collaboratively iterate on your work without leaving the chat.

How to install

Prerequisites: Node.js and npm or npx must be installed on your system. You will also need Claude Desktop installed for the MCP integration.

# Install the Figma MCP Server for Claude Desktop automatically via Smithery
npx -y @smithery/cli install @MatthewDailey/figma-mcp --client claude

Download and install Claude desktop app from claude.ai/download.
Get a Figma API Key (Figma: open your account settings, Security, and enable File content and Comments scopes).
Configure Claude to use the Figma MCP server. If this is your first MCP server, run the following in terminal.

{
  "mcpServers": {
    "figma-mcp": {
      "command": "npx",
      "args": ["figma-mcp"],
      "env": {
        "FIGMA_API_KEY": "<YOUR_API_KEY>"
      }
    }
  }
}

If you already have an MCP configuration, copy the figma-mcp block into your claude_desktop_config.json.

Restart Claude Desktop.
Look for the hammer icon with the number of available tools in Claude’s interface to confirm the server is running.

Additional sections

Testing locally with the MCP Inspector is supported. You can validate interactions by running the Inspector tool to test the Figma MCP setup.

npx @modelcontextprotocol/inspector npx figma-mcp

Available tools

add_figma_file

Add a Figma file to your context by providing its URL.

view_node

Get a thumbnail for a specific node in a Figma file.

read_comments

Get all comments on a Figma file.

post_comment

Post a comment on a node in a Figma file.

reply_to_comment

Reply to an existing comment in a Figma file.