Figma MCP Server Az2

🚀 Figma Model Context Protocol (MCP) Server

A server implementing the ModelContextProtocol that enables AI assistants to interact with Figma files. This server offers tools to view, comment on, and analyze designs directly within Figma files via the Model Context Protocol.

🚀 Quick Start

This server allows seamless interaction between AI assistants and Figma files, enhancing the design review and analysis process.

✨ Features

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

📦 Installation

Configuration with Claude

1. Download and install the Claude desktop application by running the following command in the terminal:

curl -L "https://desktop.claude.ai/install.sh" | bash

2. Obtain a Figma API key (visit 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 it's your first time configuring, run the following command:

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 not, copy the figma-mcp block into your claude_desktop_config.json file. 4. Restart the Claude desktop application. 5. Look for the hammer icon in the Claude interface and confirm that the server is running.

💻 Usage Examples

Basic Usage

Paste the following content into a new Claude chat window:

What's in this Figma file?
https://www.figma.com/design/MLkM98c1s4A9o9CMnHEyEC

Advanced Usage

Visit loom.com to view a full demonstration of more practical usage examples.

📚 Documentation

Local Run with Inspector

For development and debugging purposes, you can use the MCP Inspector. This inspector provides a visual interface for testing and monitoring MCP server interactions. Refer to the Inspector documentation for detailed installation instructions and usage guides. Run the following command in the terminal for local testing:

npx @modelcontextprotocol/inspector npx figma-mcp

Local Development

1. Clone the repository:

git clone <repository-url>

2. Install dependencies:

npm install

3. Build the project:

npm run build

4. Automatically rebuild in development mode:

npm run watch

🔧 Technical Details

Provided Tools

The server provides the following tools:

• 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 in a Figma file.

Each tool is designed to enable specific interactions with Figma files through the Model Context Protocol interface.