Figma MCP

🚀 Figma MCP Server

A ModelContextProtocol server that enables AI assistants to interact with Figma files. This server provides tools to view, annotate, and analyze Figma designs directly in chats via the ModelContextProtocol.

🚀 Quick Start

✨ Features

• Add Figma files to Claude chats by providing URLs.
• Read and post comments on Figma files.

📦 Installation

Configuration in Claude

1. Download and install the Claude desktop application from claude.ai/download.
2. Obtain a Figma API key (after accessing figma.com, click on your name in the top - left corner -> Settings -> Security). Grant the file content and comments permission scopes.
3. Configure Claude to use the Figma MCP server. If you are setting up the MCP server for the first time, run the following command in the terminal:

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 it's not your first time, copy the figma-mcp module into your claude_desktop_config.json file. 4. Restart the Claude Desktop application. 5. Look for the hammer icon (showing the number of available tools) in the Claude interface to confirm if the server is running.

💻 Usage Examples

Basic Usage

Start a new Claude chat and paste the following content:

What's in this Figma file?

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

📚 Documentation

Practical Demonstration

Watch a more practical usage example: Video Link

Development Environment Setup

Debugging with Inspector

For development and debugging purposes, you can use the MCP inspector tool. The inspector provides a visual interface for testing and monitoring MCP server interactions. Visit Inspector Documentation for detailed installation and usage instructions. Run the following command in the terminal for local testing:

npx @modelcontextprotocol/inspector npx figma-mcp

Local Development

1. Clone the repository.
2. Install dependencies:

npm install

3. Build the project:

npm run build

4. Automatically rebuild during development:

npm run watch

🔧 Technical Details

Available Tools

The tools provided by the server include:

• add_figma_file: Add a Figma file to the context by providing a URL.
• view_node: Get a thumbnail of 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.