Figma MCP Server · planetabhi — Claude Code MCP server: setup and tools
Local MCP server providing Figma REST API access inside your AI editor. Inspect node trees, retrieve design tokens, and fetch rendered frames.
claude mcp add figma-mcp-server -e FIGMA_API_KEY=<FIGMA_API_KEY> -- npx -y figma-mcp-serverWhat Figma MCP Server does
The server maps Figma REST endpoints to 50 distinct MCP tools operating over stdio. It dynamically detects endpoints from tools/figma/ during startup and validates incoming parameters prior to network requests. Agents can query file trees, export rendered images, view version history, and inspect project comments.
Authentication relies on a personal access token passed in FIGMA_API_KEY. Workspace plan tier limits still apply. Variable inspection and batch updates require an Enterprise Figma plan, while library analytics require an Organization tier. If your account lacks these tiers, requests to those endpoints fail immediately.
The codebase targets Bun 1.2 or higher. Setup requires executing the server via bunx or npx with the API token exported in the client configuration.
What it helps with
- inspect layer hierarchies and node properties in Figma files
- fetch image renders for specific UI frames and icons
- extract design tokens and variables from design libraries
- review comments and discussion threads on design files
Example prompts for the agent
- Inspect the component hierarchy for the file key I provided.
- Generate image render URLs for all icons inside this frame.
- Fetch the list of published design tokens from our Figma library.
How to install Figma MCP Server
Platform CLI
claude mcp add figma-mcp-server -e FIGMA_API_KEY=<FIGMA_API_KEY> -- npx -y figma-mcp-serverReplace <…> with your own values
Platform CLI
codex mcp add planetabhi-figma-mcp-server --env FIGMA_API_KEY=<FIGMA_API_KEY> -- npx -y figma-mcp-serverReplace <…> with your own values
Config file
{
"mcpServers": {
"planetabhi-figma-mcp-server": {
"command": "npx",
"args": [
"-y",
"figma-mcp-server"
],
"env": {
"FIGMA_API_KEY": "<FIGMA_API_KEY>"
}
}
}
}Replace <…> with your own values
Config file
{
"servers": {
"planetabhi-figma-mcp-server": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"figma-mcp-server"
],
"env": {
"FIGMA_API_KEY": "<FIGMA_API_KEY>"
}
}
}
}Replace <…> with your own values
Platform CLI
gemini mcp add -e FIGMA_API_KEY=<FIGMA_API_KEY> planetabhi-figma-mcp-server npx -y figma-mcp-serverReplace <…> with your own values
Step by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about Figma MCP Server
How do I install Figma MCP Server in Claude Code?
Run claude mcp add figma-mcp-server -e FIGMA_API_KEY=<FIGMA_API_KEY> -- npx -y figma-mcp-server in your terminal. Replace <FIGMA_API_KEY> with your personal access token.
What does Figma MCP Server do?
It exposes 50 Figma REST API actions as tools for MCP clients. This lets your AI inspect file nodes, read variable values, pull comments, and download rendered layers.
Which features require paid Figma plans?
Reading and modifying design variables requires an Enterprise plan. Accessing library analytics requires an Organization or Enterprise subscription, and organization activity logs demand admin privileges.
Similar MCP servers
All MCP servers for Design →Figma MCP Server by other authors comes first.
