figma-console

This MCP server provides a bridge to Figma via the figma-console-mcp package, enabling AI assistants to access Figma for extraction, creation, and debugging tasks. It supports three installation modes: Remote SSE for read-only exploration, NPX setup for full AI-assisted design capabilities, and Local Git for contributing to the source. When configured, you can connect your MCP client to the figma-console-mcp endpoint to pull design tokens, components, and styles, capture console logs and screenshots, and create or modify UI components directly in Figma. The NPX setup unlocks the complete toolset (design creation, token management, component instantiation), while Remote SSE offers a subset of read-only tools suitable for evaluation. For authentication, you’ll provide a Figma Personal Access Token via the FIGMA_ACCESS_TOKEN environment variable and enable MCP apps with ENABLE_MCP_APPS if you wish to enable the full app suite.

Prerequisites:

• Node.js 18+ installed on your machine
• npm (comes with Node.js) or pnpm/yarn if preferred
• Access to the internet to fetch the MCP package

Option A: NPX Setup (Recommended for quick start)

1. Ensure Node.js 18+ is installed and you have a valid Figma Personal Access Token.
2. Run the MCP command directly in your environment when prompted by your MCP client: npx -y figma-console-mcp@latest
3. If prompted to provide environment variables, set FIGMA_ACCESS_TOKEN to your token and ENABLE_MCP_APPS to true.

Option B: Local Git (Contribute to the project)

1. Clone the repository: git clone https://github.com/southleft/figma-console-mcp.git
2. Install dependencies: cd figma-console-mcp npm install
3. Build for local use: npm run build:local
4. Run a local server entry (example path shown in config): node /absolute/path/to/figma-console-mcp/dist/local.js
5. Configure your MCP client to point to the local build and set environment variables (FIGMA_ACCESS_TOKEN, ENABLE_MCP_APPS).

Option C: Remote SSE (Read-Only)

1. Use the Remote SSE endpoint for read-only exploration and data extraction.
2. Connect via your MCP client as described in the documentation, using the SSE URL provided by the project.

Prerequisites recap:

• Node.js 18+ installed
• A valid Figma access token
• An MCP client (Claude Code, Cursor, Windsurf, Claude Desktop, etc.)

Tips and common considerations:

• Always keep your Figma access token secret; do not commit it to code repositories.
• If you modify the MCP config, restart your MCP client to apply changes.
• For contributors using Local Git, you can run npm run build:local to generate a dist/local.js entry used by the Node-based config.
• The NPX setup provides 57+ tools; Remote SSE offers a read-only subset (~22 tools). Choose based on whether you need design creation capabilities.
• When using Claude Code, if you encounter transport issues with SSE, prefer mcp-remote or the standard NPX-based flow as documented.
• The config example places token and feature toggles in the env block; adjust according to your security and deployment practices.