Registry / ai-ml / figma-console-mcp

figma-console-mcp

library1.31.0jsnpmunverified

The most comprehensive MCP server for Figma (v1.31.0, active development with weekly releases). Bridges design and development by giving AI assistants (Claude, etc.) complete access to Figma for extraction, creation, debugging, and bidirectional token sync. Key differentiators: supports 4 connection modes (NPX, Local Git, Cloud Mode, Remote SSE), provides write tools for design creation and modification, offers accessibility scanning with 14 WCAG checks, and includes real-time console monitoring via a Desktop Bridge WebSocket plugin. Replaces Style Dictionary and Tokens Studio's export pipeline with DTCG JSON + CSS custom properties sync. Cross-MCP identity tagging prevents attribution conflicts when running multiple Figma MCPs.

ai-ml devops

npm install figma-console-mcp

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · FIGMA-CONSOLE-MCP

figma-console-mcp

ai-mljavascriptv1.31.0

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

main

✓ npx figma-console-mcp

✗ npx @southleft/figma-console-mcp

Use as a CLI tool via npx, not imported as a library. The package provides an MCP server executable.

types (TypeScript)

✓ import type { FigmaConsoleMcpConfig } from 'figma-console-mcp';

✗ const { FigmaConsoleMcpConfig } = require('figma-console-mcp');

TypeScript types are exported for configuration interfaces. Use ESM import type syntax in modern TypeScript projects (v3+).

cloud pairing

✓ npx figma-console-mcp-cloud --token YOUR_CLOUD_TOKEN

✗ npx figma-console-mcp --cloud

Cloud mode uses a separate CLI entry point. The --cloud flag was removed in v1.20.0.

Shows how to start the MCP server and call a tool (extract tokens) using the @modelcontextprotocol/sdk client.

// 1. Install & run the Figma Console Desktop Bridge plugin (available in Figma Community) // 2. Start the MCP server (NPX mode recommended): npx figma-console-mcp --figma-personal-access-token="FIGMA_TOKEN" --desktop-bridge-port=5050 // 3. The server registers tools like: // - get_design_tokens: Fetch all variables/tokens from a Figma file // - create_component: Create a new component in Figma // - accessibility_audit: Run WCAG checks on a frame // - figjam_create_sticky: Add a sticky note to a FigJam board // 4. Example: Extract design tokens import { Client } from '@modelcontextprotocol/sdk/client/index.js'; import { StdioClientTransport } from '@modelcontextprotocol/sdk/client/stdio.js'; const transport = new StdioClientTransport({ command: 'npx', args: ['figma-console-mcp', '--figma-personal-access-token', process.env.FIGMA_TOKEN ?? '', '--desktop-bridge-port', '5050'] }); const client = new Client({ name: 'test-client' }, { capabilities: {} }); await client.connect(transport); const result = await client.request({ method: 'tools/call', params: { name: 'get_design_tokens', arguments: { file_key: 'abc123' } } }); console.log(result);

Debug

Known issues

breakingZombie MCP processes squatting WebSocket port range after bad shutdown – Desktop Bridge drops connection requiring manual restart

fix

Update to v1.31.0+ and re-import the Desktop Bridge plugin. The fix force-kills zombie processes (SIGTERM→SIGKILL) and adds auto-reconnect watchdog.

affects: <1.31.0

deprecatedThe --cloud flag for starting Cloud Mode was removed.

fix

Use npx figma-console-mcp-cloud --token YOUR_CLOUD_TOKEN instead.

affects: >=1.20.0

gotchaRead-only in Remote SSE mode and Cloud Mode – design creation/editing tools are not available.

fix

Use NPX or Local Git setup for write access. Check capability table in README.

affects: all

gotchaDesktop Bridge plugin must be reinstalled from Figma Community after version updates to pick up fixes (e.g., auto-reconnect).

fix

After updating the npm package, re-import the plugin in Figma via the community page.

affects: all

breakingNode.js engines requirement >=18.0.0 – fails on older versions.

fix

Upgrade Node.js to v18+ (LTS recommended).

affects: all

gotchaHardcoded path to Local Git repository – can cause 'repo not found' errors if directory structure changes.

fix

Use NPX mode or pass explicit paths via command-line arguments.

affects: all

Errors

Common errors & fixes

Error: connect ECONNREFUSED 127.0.0.1:5050

Desktop Bridge plugin is not running or the port is blocked by a zombie process.

fix

Ensure the Figma Desktop Bridge plugin is active (open Figma and check plugin is running). Run 'npx figma-console-mcp --desktop-bridge-port 5050' with a different port if 5050 is occupied.

[figma-console-mcp] Error: Invalid Figma Personal Access Token

Missing or malformed FIGMA_TOKEN environment variable or command-line argument.

fix

Set FIGMA_TOKEN or pass --figma-personal-access-token with a valid token from Figma Developer Settings. Tokens must have 'file_variables:read' and 'file_content:read' scopes.

figma-console-mcp: Command not found

The package is not installed globally or npx cannot resolve it.

fix

Run 'npx figma-console-mcp' directly (without global install). If using NPX, ensure npm >=7 and the package name is correct.

Error: spawn npx figma-console-mcp ENOENT

Node.js or npm not installed, or package not found in PATH.

fix

Confirm Node.js >=18 is installed (node --version). Run 'npm install -g figma-console-mcp' or use npx without global install.

Upgrade

Version history

1.31.0latest on npm

Audit

Dependencies

@modelcontextprotocol/sdkrequiredCore MCP protocol implementation for server communication

figma-jsrequiredFigma REST API client for reading and writing design data

Agent activity

15 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/southleft/figma-console-mcp ↗

packagefigma-console-mcp ↗

homepagehttps://github.com/southleft/figma-console-mcp#readme ↗