This project provides a Model Context Protocol (MCP) server that acts as an API for design systems, enabling AI assistants to interact with Figma for extraction, creation, and debugging. It bridges the gap between design and development, offering capabilities like plugin debugging, design system data extraction, UI creation, and variable management, benefiting designers, developers, and design system teams by streamlining AI-powered design workflows.

How It Works

Figma Console MCP connects AI assistants to Figma via the Model Context Protocol. It leverages Figma's developer APIs and a local bridge plugin (in specific modes) to allow AI to read design data, capture logs and screenshots, and programmatically create or modify UI elements and design tokens. This approach provides AI with direct, actionable access to Figma, enabling sophisticated design automation and debugging previously requiring manual intervention or limited scripting.

Quick Start & Requirements

Three installation methods are available:

• Remote SSE: Read-only exploration, ~2 minutes setup. Requires an MCP client.
• NPX Setup: Full capabilities (creation, modification), ~10 minutes setup. Recommended for most users. Requires Node.js 18+, Figma Desktop app, and an MCP client (e.g., Claude Desktop).
• Local Git Setup: Full capabilities, ~15 minutes setup. For contributors. Requires cloning the repository, npm install, and npm run build:local.

Official documentation and guides are linked throughout the README.

Highlighted Details

• AI-Assisted Design Creation: Enables AI to create UI components, frames, and layouts directly in Figma using natural language prompts (NPX/Local Git modes).
• Plugin Debugging: Captures console logs, errors, and stack traces in real-time, alongside visual debugging via screenshots.
• Design System Management: Facilitates extraction of design variables, components, and styles, and allows for creation, update, and deletion of design tokens.
• MCP Apps: Experimental feature providing interactive UI experiences like a Token Browser and Design System Dashboard within MCP clients.
• Design-Code Parity: Tools to compare Figma component specifications against code implementations and generate documentation.

Maintenance & Community

The project is maintained by southleft. Community interaction is facilitated through the "Discussions" section on GitHub. A detailed roadmap is available.

Licensing & Compatibility

The project is released under the MIT License, permitting commercial use and integration. Authentication methods support Figma's Free, Pro, and Enterprise plans.

Limitations & Caveats

The Remote SSE installation method is strictly read-only and offers a subset of the available tools. Full design creation, variable management, and access to the Desktop Bridge plugin require the NPX or Local Git installations. MCP Apps are experimental and depend on MCP client support for the ext-apps protocol.