Figma MCP: list frames in a file and fetch one frame's JSON and image safely. 2 tools.
To add Figma MCP to Claude, run the install command below or copy the ready-made config for Claude Code, Claude Desktop, Cursor and VS Code further down. Restart your client after adding it and its tools show up in your next conversation. It needs 7 environment variables, listed below.
Install
npx -y @scalably-io/figma-mcp@1.0.1Environment variables
FIGMA_TOKENSet in your MCP configFIGMA_API_BASE_URLSet in your MCP configFIGMA_REQUEST_TIMEOUT_MSSet in your MCP configFIGMA_MAX_JSON_BYTESSet in your MCP configFIGMA_MAX_FRAME_BYTESSet in your MCP configFIGMA_OUTPUT_ROOTSet in your MCP configFIGMA_ALLOW_HTTP_FOR_TESTSSet in your MCP configInstall with your client
claude mcp add figma --env FIGMA_TOKEN=<YOUR_FIGMA_TOKEN> --env FIGMA_API_BASE_URL=<YOUR_FIGMA_API_BASE_URL> --env FIGMA_REQUEST_TIMEOUT_MS=<YOUR_FIGMA_REQUEST_TIMEOUT_MS> --env FIGMA_MAX_JSON_BYTES=<YOUR_FIGMA_MAX_JSON_BYTES> --env FIGMA_MAX_FRAME_BYTES=<YOUR_FIGMA_MAX_FRAME_BYTES> --env FIGMA_OUTPUT_ROOT=<YOUR_FIGMA_OUTPUT_ROOT> --env FIGMA_ALLOW_HTTP_FOR_TESTS=<YOUR_FIGMA_ALLOW_HTTP_FOR_TESTS> -- npx -y @scalably-io/figma-mcp@1.0.1
Run this in a terminal to add the server to Claude Code.
What this does
Figma MCP exposes a set of tools to Claude over the Model Context Protocol. After you add it to claude_desktop_config.json (snippet above) and restart Claude Desktop, those tools become callable inside any conversation.
Requirements
This server needs the following environment variables to be set before it can run:
FIGMA_TOKEN FIGMA_API_BASE_URL FIGMA_REQUEST_TIMEOUT_MS FIGMA_MAX_JSON_BYTES FIGMA_MAX_FRAME_BYTES FIGMA_OUTPUT_ROOT FIGMA_ALLOW_HTTP_FOR_TESTS
Set these via the env object in your MCP config (see claude_desktop_config.json snippet above).
Frequently asked questions
How do I install Figma MCP?
Run the Claude Code command in the install section to add Figma MCP to Claude Code, or copy the ready-made config for your client from the install section on this page. Restart your client afterwards and the tools appear in your next conversation.
Which clients work with Figma MCP?
This page carries setup and config for Claude Code, Claude Desktop, Cursor and VS Code. Any other MCP client that accepts a standard server config can connect to Figma MCP as well.
Does Figma MCP need an API key?
Yes. Before it can run, set these environment variables: FIGMA_TOKEN, FIGMA_API_BASE_URL, FIGMA_REQUEST_TIMEOUT_MS, FIGMA_MAX_JSON_BYTES, FIGMA_MAX_FRAME_BYTES, FIGMA_OUTPUT_ROOT, FIGMA_ALLOW_HTTP_FOR_TESTS. They go in the env block of your MCP config.
Imported from the Official MCP Registry. The details above come from the registry entry; the maker can claim this listing to correct them, add docs, and see its traffic.
Is this your MCP server?
Claim this listing to see its traffic, fix details yourself, and skip the review queue on future updates.
Add this badge to your README
Show visitors this server is listed in the ClaudeRules directory. The badge links straight to this listing.
[](https://clauderules.net/mcp/io-scalably-figma-mcp)<a href="https://clauderules.net/mcp/io-scalably-figma-mcp" target="_blank" rel="noopener noreferrer"><img src="https://clauderules.net/api/badge/io-scalably-figma-mcp" alt="Listed on clauderules.net" /></a>More Browser MCP servers
microsoft/playwright-mcp
Official Microsoft Playwright MCP server, enabling LLMs to interact with web pages through structured accessibility snapshots
agent-infra/mcp-server-browser
📇 🏠 - Browser automation capabilities using Puppeteer, both support local and remote browser connection.
eyaltoledano/claude-task-master
📇 ☁️ 🏠 - AI-powered task management system for AI-driven development. Features PRD parsing, task expansion, multi-provider support (Claude, OpenAI, Gemini, Perplexity, xAI), and selective tool loadi
browsermcp/mcp
📇 🏠 - Automate your local Chrome browser