Figma MCP Tool

English | 简体中文

A Model Context Protocol (MCP) server that integrates with the Figma API to export images and extract style data.

Features

• 🖼️ Image export: Export node images from a Figma URL; supports PNG, JPG, SVG, PDF
• 🎨 Style extraction: Fetch detailed style data for design elements; supports CSS generation
• 📦 Batch export: Export multiple nodes in one go
• 🔄 Smart retry: Built-in retry to handle network hiccups and API limits
• 🛡️ Robust errors: Clear error handling and troubleshooting guidance
• 🧩 Design element analysis: Deeply analyze images, vectors, components in designs 🆕
• 📋 SVG extraction: Get SVG code for vector graphics directly 🆕

Install and Run

Option 1: Run via npx (recommended, no install)

npx figma-mcp-full-server figd_your_figma_token_here

Option 2: Global install

# Install globally
npm install -g figma-mcp-full-server

# Run
figma-mcp-full-server figd_your_figma_token_here

Option 3: Local project install

# Install in your project
npm install figma-mcp-full-server

# Run
npx figma-mcp-full-server figd_your_figma_token_here
# or
node_modules/.bin/figma-mcp-full-server figd_your_figma_token_here

Option 4: Run from source (for development)

git clone <repository>
cd figma-mcp
npm install
npm run build

# Run
npm start figd_your_figma_token_here
# or
node build/index.js figd_your_figma_token_here

Quick Start

1. Get a Figma access token

1. Log in to Figma
2. Open Settings
3. Find the "Personal access tokens" section
4. Click "Create new token"
5. Copy the token (starts with figd_)

2. Configure in Claude Desktop

Edit the Claude config file (pick your OS):

macOS/Linux: ~/.config/claude-desktop/config.json
Windows: %APPDATA%\Claude Desktop\config.json

Choose one of the following setups:

Setup A: Run via npx (recommended)

{
  "mcpServers": {
    "figma-mcp-full-server": {
      "command": "npx",
      "args": ["figma-mcp-full-server"],
      "env": {
        "FIGMA_TOKEN": "figd_your_figma_token_here"
      }
    }
  }
}

Setup B: Global install

npm install -g figma-mcp-full-server

{
  "mcpServers": {
    "figma-mcp-full-server": {
      "command": "figma-mcp-full-server",
      "env": {
        "FIGMA_TOKEN": "figd_your_figma_token_here"
      }
    }
  }
}

Setup C: Use from a project

npm install figma-mcp-full-server

{
  "mcpServers": {
    "figma-mcp-full-server": {
      "command": "npx",
      "args": ["figma-mcp-full-server"],
      "cwd": "/path/to/your/project",
      "env": {
        "FIGMA_TOKEN": "figd_your_figma_token_here"
      }
    }
  }
}

Setup D: Run from source

{
  "mcpServers": {
    "figma-mcp": {
      "command": "node",
      "args": [
        "/absolute/path/to/figma-mcp/build/index.js"
      ],
      "cwd": "/absolute/path/to/figma-mcp",
      "env": {
        "FIGMA_TOKEN": "figd_your_figma_token_here"
      }
    }
  }
}

⚠️ Notes:

• Recommended: Setup A (npx) — no install, always latest
• Global install: good if you use it often
• Project install: pin a version per project
• From source: for development and customization
• Replace figd_your_figma_token_here with your real Figma token

3. Restart Claude Desktop

Restart Claude Desktop to apply the config.

Usage

Once configured, use it directly in Claude:

Get Figma images

Please fetch images from this Figma URL:
https://www.figma.com/design/EXAMPLE_FILE_ID/Design-Name?node-id=123-456&t=abc123-0

Get style data and generate CSS

Please get style data from this design and generate CSS:
https://www.figma.com/design/EXAMPLE_FILE_ID/Design-Name?node-id=123-456&t=abc123-0

Get file info

Please show the basic info for this Figma file:
https://www.figma.com/design/EXAMPLE_FILE_ID/Design-Name

G

... View full README on GitHub