figma-console-mcp MCP工具

Choose Your Setup

First, decide what you want to do:

🚀 NPX Setup (Recommended)

Best for: Designers who want full AI-assisted design capabilities.

What you get: All 106 tools including design creation, variable management, and component instantiation.

Prerequisites

• [ ] Node.js 18+ — Check with node --version (Download)
• [ ] Figma Desktop installed (not just the web app)
• [ ] An MCP client (Claude Code, Cursor, Windsurf, Claude Desktop, etc.)

Step 1: Get Your Figma Token

1. Go to Manage personal access tokens in Figma Help
2. Follow the steps to create a new personal access token
3. Enter description: Figma Console MCP
4. Set scopes: File content (Read), File versions (Read), Variables (Read), Comments (Read and write)
5. Copy the token — you won't see it again! (starts with figd_)

Step 2: Configure Your MCP Client

Claude Code (CLI):

claude mcp add figma-console -s user -e FIGMA_ACCESS_TOKEN=figd_YOUR_TOKEN_HERE -e ENABLE_MCP_APPS=true -- npx -y figma-console-mcp@latest

Cursor / Windsurf / Claude Desktop:

Add to your MCP config file (see Where to find your config file below):

{
  "mcpServers": {
    "figma-console": {
      "command": "npx",
      "args": ["-y", "figma-console-mcp@latest"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "figd_YOUR_TOKEN_HERE",
        "ENABLE_MCP_APPS": "true"
      }
    }
  }
}

📂 Where to Find Your Config File

If you're not sure where to put the JSON configuration above, here's where each app stores its MCP config:

Tip for designers: The ~ symbol means your home folder. On macOS, that's /Users/YourName/. On Windows, it's C:\Users\YourName\. You can open these files in any text editor — even TextEdit or Notepad. Can't find the file? If it doesn't exist yet, create it. The app will pick it up on its next restart. Make sure the entire file is valid JSON (watch for missing commas or brackets). Claude Code users: You can skip manual editing entirely. Just run the claude mcp add command above and it handles everything for you.

Step 3: Connect to Figma Desktop

Desktop Bridge Plugin: 1. Open Figma Desktop normally (no special flags needed) and open a file 2. Go to Plugins → Development → Import plugin from manifest... 3. Select ~/.figma-console-mcp/plugin/manifest.json (stable path, auto-created by the MCP server) 4. Run the plugin in your Figma file — it scans ports 9223–9232 and connects automatically to your running MCP server

Heads-up on plugin updates. Figma caches plugin files (code.js and ui.html) at the application level. The MCP server refreshes the files at ~/.figma-console-mcp/plugin/ on every startup, but Figma keeps using its cached copy until you re-import the manifest. Re-importing is required only when a release notes entry says so — typically when the plugin adds a new method the server needs (e.g. v1.22.4, v1.10.0). For most upgrades the new server stays wire-compatible with the previous plugin, and re-importing is optional: you'll still get every functional change, just not the cosmetic plugin-side touches (status-pill copy, pluginVersion reporting). When you do re-import: Plugins → Manage plugins → re-import ~/.figma-console-mcp/plugin/manifest.json. The stable path never changes, so it's a one-click step.

Step 4: Restart Your MCP Client

Restart your MCP client to load the new configuration.

Step 5: Test It!

Check Figma status

Create a simple frame with a blue background

📖 Complete Setup Guide

---

Clone and build

git clone https://github.com/southleft/figma-console-mcp.git cd figma-console-mcp npm install npm run build:local

#### Configure Your MCP Client

Add to your config file (see [Where to find your config file](#-where-to-find-your-config-file)):

Then follow NPX Steps 3-5 above.

📖 Complete Setup Guide

---

Setup

1. Open Figma Desktop (normal launch — no debug flags needed)
2. Go to Plugins → Development → Import plugin from manifest...
3. Select figma-desktop-bridge/manifest.json from the figma-console-mcp directory
4. Run the plugin in your Figma file — it auto-connects via WebSocket (scans ports 9223–9232)
5. Ask your AI: "Check Figma status" to verify the connection

One-time import. Once imported, the plugin stays in your Development plugins list. Just run it whenever you want to use the MCP.

📖 Desktop Bridge Documentation

Build

npm run build ```

📖 Development Guide

---

⚡ Quick Start

📖 Example Prompts

Example Workflows

Brand New Design: > "Create a notification toast with an icon on the left, title and description text, and a dismiss button. Use our brand colors."

The AI creates custom frames, applies your design tokens, and builds the component from scratch.

Component Composition: > "Build a user profile card using the Avatar component (large size), two Button components (Edit Profile and Settings), and a Badge for the user's status."

The AI searches your library, finds the exact components, and assembles them with proper spacing and alignment.

Design Iteration: > "The spacing feels too tight. Increase the gap between sections to 24px and make the heading larger."

The AI modifies the existing design, takes a screenshot to verify, and continues iterating until you're satisfied.

Plugin Debugging

Navigate to my Figma plugin and show me any console errors
Watch the console for 30 seconds while I test my plugin
Get the last 20 console logs

🎨 Desktop Bridge Plugin (Recommended Connection)

The Figma Desktop Bridge plugin is the recommended way to connect Figma to the MCP server. It communicates via WebSocket — no special Figma launch flags needed, and it persists across Figma restarts.

📊 Installation Method Comparison

Key insight: Remote SSE is read-only. Cloud Mode adds write access for web AI clients without Node.js. NPX/Local Git give the full 106 tools.

📖 Complete Feature Comparison

---

🤝 vs. Figma Official MCP

Figma Console MCP (This Project) - Debugging, data extraction, and design creation - ✅ Real-time console logs from Figma plugins - ✅ Screenshot capture and visual debugging - ✅ Error stack traces and runtime monitoring - ✅ Raw design data extraction (JSON) - ✅ FigJam board creation and reading (stickies, flowcharts, tables) - ✅ Works remotely or locally

Figma Official Dev Mode MCP - Code generation - ✅ Generates React/HTML code from designs - ✅ Tailwind/CSS class generation - ✅ Component boilerplate scaffolding

Use both together for the complete workflow: generate code with Official MCP, then debug and extract data with Console MCP.

---