Figma Console
Your design system as an API. Connect AI to Figma for extraction, creation, and debugging.
What is Figma Console?
Figma Console is a Model Context Protocol (MCP) server that allows AI assistants like Claude, Cursor, and VS Code to your design system as an api. connect ai to figma for extraction, creation, and debugging.
Your design system as an API. Connect AI to Figma for extraction, creation, and debugging.
This server falls under the Developer Tools category on MCPgee, the world's largest MCP server directory with 33,000+ servers.
Features
- Your design system as an API. Connect AI to Figma for extrac
Use Cases
Maintainer
Works with
Installation
NPM
npx -y figma-console-mcpManual Installation
npx -y figma-console-mcpConfiguration
Configuration Details
claude_desktop_config.json
Performance
Response Metrics
Resource Usage
How to Set Up and Use Figma Console
Figma Console MCP Server exposes your entire Figma design system as a programmatic API, giving AI assistants direct access to over 106 tools for creating, editing, and inspecting Figma files. It connects to the Figma REST API using a personal access token and enables operations ranging from design token management and component instantiation to WCAG accessibility checks and real-time plugin console log streaming. Teams use it to automate design-to-code workflows, enforce design consistency, and let AI assistants manipulate Figma documents without leaving the development environment.
Prerequisites
- Node.js 18+ and npm installed
- A Figma account with a Personal Access Token (starting with figd_) that has File content Read, Variables Read, and Comments Read/Write scopes
- An MCP-compatible client such as Claude Desktop, Cursor, or Windsurf
- The figma-console-mcp npm package (installed automatically via npx)
Generate a Figma Personal Access Token
Log in to Figma, open Account Settings, navigate to the Security tab, and create a new Personal Access Token. Enable the following scopes: File content (Read), File versions (Read), Variables (Read), and Comments (Read and Write). Copy the token — it starts with figd_.
Add the server to your MCP client configuration
Open your MCP client configuration file (e.g. claude_desktop_config.json for Claude Desktop) and add the figma-console server block with your access token and the ENABLE_MCP_APPS flag set to true.
{
"mcpServers": {
"figma-console": {
"command": "npx",
"args": ["-y", "figma-console-mcp@latest"],
"env": {
"FIGMA_ACCESS_TOKEN": "figd_YOUR_TOKEN_HERE",
"ENABLE_MCP_APPS": "true"
}
}
}
}Restart your MCP client
Restart Claude Desktop (or reload your editor's MCP extension) so it picks up the new server configuration. The server starts automatically via npx and requires no separate installation step.
Verify the connection
Ask your AI assistant to list Figma tools or retrieve a file. If the connection is healthy, it will respond with file data or a list of available capabilities such as get_file, list_components, and get_variables.
Use the server for design system operations
You can now ask the AI to create frames, manage design tokens, export variables to CSS, run accessibility checks, or stream plugin console logs — all directly from chat.
Figma Console Examples
Client configuration
Add this block to claude_desktop_config.json to configure Figma Console MCP with your access token.
{
"mcpServers": {
"figma-console": {
"command": "npx",
"args": ["-y", "figma-console-mcp@latest"],
"env": {
"FIGMA_ACCESS_TOKEN": "figd_YOUR_TOKEN_HERE",
"ENABLE_MCP_APPS": "true"
}
}
}
}Prompts to try
These prompts exercise the server's design creation, token management, and accessibility capabilities.
- "Create a login card frame with an email field, password field, and Sign In button using our design system components"
- "Extract all design variables from the current file and export them as CSS custom properties"
- "Check the Button component for WCAG accessibility issues"
- "List all components in the shared library and show their variant properties"
- "Create a FigJam retrospective board with 'Went Well' and 'To Improve' columns"Troubleshooting Figma Console
Error: FIGMA_ACCESS_TOKEN is invalid or missing
Ensure the token in your config starts with figd_ and has the required scopes (File content Read, Variables Read, Comments Read/Write). Regenerate the token in Figma Account Settings if needed.
MCP apps or interactive dashboard not appearing
Make sure ENABLE_MCP_APPS is set to "true" (as a string) in your env config, and that you restarted your MCP client after saving the configuration.
npx hangs or fails to install the package
Run npx -y figma-console-mcp@latest manually in your terminal to verify npm registry connectivity. If behind a corporate proxy, set the HTTP_PROXY and HTTPS_PROXY environment variables accordingly.
Frequently Asked Questions about Figma Console
What is Figma Console?
Figma Console is a Model Context Protocol (MCP) server that your design system as an api. connect ai to figma for extraction, creation, and debugging. It connects AI assistants to external tools and data sources through a standardized interface.
How do I install Figma Console?
Install via npm with the command: npx -y figma-console-mcp. Then add the server configuration to your AI client's JSON config file (e.g., claude_desktop_config.json or .cursor/mcp.json).
Which AI clients work with Figma Console?
Figma Console works with all major MCP-compatible AI clients including Claude Desktop, Claude Code, Cursor, VS Code (GitHub Copilot), Windsurf, and Cline.
Is Figma Console free to use?
Yes, Figma Console is open source and available under the MIT license. You can use it freely in both personal and commercial projects.
Figma Console Alternatives — Similar Developer Tools Servers
Looking for alternatives to Figma Console? Here are other popular developer tools servers you can use with Claude, Cursor, and VS Code.
Ecc
★ 188.2kThe agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.
Javaguide
★ 155.8kJava 面试 & 后端通用面试指南，覆盖计算机基础、数据库、分布式、高并发、系统设计与 AI 应用开发
Gemini CLI
★ 104.5kA secure MCP server that wraps the Google Gemini CLI, allowing clients to query Gemini models using local OAuth sessions without requiring an API key. It provides tools for model interaction and diagnostics with built-in protection against command in
Awesome MCP Servers
★ 87.3k⭐ Curated list of Model Context Protocol (MCP) servers - tools that extend Claude Desktop, Cursor, Windsurf, and other MCP clients with custom capabilities.
MCP Servers
★ 86.0kModel Context Protocol Servers
CC Switch
★ 77.5kA cross-platform desktop All-in-One assistant for Claude Code, Codex, OpenCode, OpenClaw, Gemini CLI & Hermes Agent. Only official website: ccswitch.io
Browse More Developer Tools MCP Servers
Explore all developer tools servers available in the MCPgee directory. Each server includes setup guides for Claude, Cursor, and VS Code.
Set Up Figma Console in Your Editor
Choose your AI client for step-by-step setup instructions.
Quick Config Preview
Add this to your claude_desktop_config.json or .cursor/mcp.json
Ready to use Figma Console?
Browse our complete directory of 33,000+ MCP servers, read setup guides for your editor, and start building with the Model Context Protocol.