Figma Context

🚀 Figma MCP Server

Figma MCP Server is a middleware for interacting with the Figma design tool, supporting data access to Figma files and resources through the MCP protocol. This server allows AI tools (such as Claude, ChatGPT, etc.) to directly obtain and manipulate design assets in Figma projects.

🚀 Quick Start

Figma MCP Server is a middleware designed to interact with the Figma design tool. It enables data access to Figma files and resources via the MCP protocol, allowing AI tools like Claude and ChatGPT to directly access and manipulate design assets in Figma projects.

✨ Features

1. Retrieve Figma Data: Use the get_figma_data tool to obtain metadata of Figma files and information of specific nodes.
2. Download Image Resources: Download image and icon resources from Figma files using the download_figma_images tool.
3. Command - Line Operation: Start the server via the command line and support integration with AI tools in multiple modes (e.g., HTTP and SSE).

📦 Installation

Local Development and Packaging

1. Clone this repository.
2. Install dependencies: pnpm install
3. Copy .env.example to .env and fill in your Figma API access token.
4. For local development: pnpm run dev
5. Build the project: pnpm run build
6. Package the project: pnpm run publish:local

After packaging, a .tgz file will be generated in the project root directory, such as figma-mcp-server-1.0.0.tgz.

Local Installation and Usage

There are three ways to use this service:

Method 1: Install from NPM (Recommended)

# Install globally
npm install -g @yhy2001/figma-mcp-server

# Start the service
figma-mcp --figma-api-key=<your-figma-api-key>

Method 2: Install from a Local Package

# Install the local package globally
npm install -g ./figma-mcp-server-1.0.0.tgz

# Start the service
figma-mcp --figma-api-key=<your-figma-api-key>

Method 3: Use in a Project

# Install in the project
npm install @yhy2001/figma-mcp-server --save

# Add to the scripts in package.json
{
  "start-figma-mcp": "figma-mcp --figma-api-key=<your-figma-api-key>"
}

# Or run directly
npx figma-mcp --figma-api-key=<your-figma-api-key>

Command - Line Parameters

• --version: Display the version number.
• --figma-api-key: Your Figma API access token (required).
• --port: The port on which the server runs (default: 3333).
• --stdio: Run the server in command mode instead of the default HTTP/SSE mode.
• --help: Display the help menu.

📚 Documentation

Connect with AI Tools

Use in Configuration Files

Many tools such as Cursor, Windsurf, and Claude Desktop use configuration files to start the MCP server. You can add the following content to the configuration file:

# For MCP Client
{
  "mcpServers": {
    "Figma MCP": {
      "command": "npx",
      "args": ["figma-mcp", "--figma-api-key=<your-figma-api-key>", "--stdio"]
    }
  }
}
# For local use
{
  "mcpServers": {
    "Figma MCP": {
      "url": "http://localhost:3333/sse",
      "env": {
        "API_KEY": "<your-figma-api-key>"
      }
    }
  }
}

Connect with Cursor

1. Start the server: figma-mcp --figma-api-key=<your-figma-api-key>
2. Connect to the MCP server in Cursor's Settings → Features tab: http://localhost:3333
3. After confirming the successful connection, use Composer in Agent mode.
4. Paste the Figma file link and ask Cursor to implement the design.

💻 Usage Examples

get_figma_data

Retrieve information about a Figma file or a specific node.

Parameters:

• fileKey: The key of the Figma file.
• nodeId: The node ID (highly recommended).
• depth: The depth of traversing the node tree.