UnknownFigma MCP Server
MCP server for Figma — read designs, extract components, get file info through AI.
Quick Answer
- 1. Figma MCP Server gives AI agents design & creative capabilities with 28,000 GitHub stars and a quality score of 86/99.
- 2. Install: Run
npx -y @modelcontextprotocol/server-figmaor add the config to your MCP client. - 3. Runtime: npm — requires an API key.
- 4. Health: Unknown status — last checked Invalid Date.
Overview
Category: Design & Creative
Runtime: npm
Install: npx -y @modelcontextprotocol/server-figma
Auth: API key required
Source: official
Stars: 28,000
Setup time: ~2 min (API key needed)
What You Can Build
With the Figma MCP Server MCP server, your AI assistant can:
- Access design & creative functionality through natural language
- Securely use your API credentials for authenticated operations
- Combine with other MCP servers for cross-tool automation workflows
- Run with npm for reliable, consistent deployments
Health Status
UnknownRead the Guide
Step-by-step walkthrough for setting up and using the Figma MCP Server.
Figma MCP ServerSetup Guide →One-Click Install
Copy the snippet for your MCP client and paste it in.
Claude Desktop
Add to claude_desktop_config.json
{
"mcpServers": {
"figma-mcp-server": {
"command": "npx",
"args": [
"-y",
"@modelcontextprotocol/server-figma"
],
"env": {
"API_KEY": "your-api-key-here"
}
}
}
}Cursor
Settings → MCP Servers → Add
{
"mcpServers": {
"figma-mcp-server": {
"command": "npx -y @modelcontextprotocol/server-figma"
}
}
}Saves as .cursor/mcp.json in the download. Move it to your project root.
VS Code
Use with MCP extension
{
"mcpServers": {
"figma-mcp-server": {
"command": "npx -y @modelcontextprotocol/server-figma"
}
}
}SDK & Code Integration Examples
Connect to Figma MCP Server programmatically using TypeScript or Python MCP SDKs.
import { Client } from "@modelcontextprotocol/sdk/client/index.js";
import { StdioClientTransport } from "@modelcontextprotocol/sdk/client/stdio.js";
// Initialize Figma MCP Server MCP client transport
const transport = new StdioClientTransport({
command: "npx",
args: ["-y","@modelcontextprotocol/server-figma"],
env: { API_KEY: process.env.API_KEY || "your-api-key-here" }
});
const client = new Client(
{ name: "mcp-app-client", version: "1.0.0" },
{ capabilities: { tools: {} } }
);
async function connectAndRun() {
await client.connect(transport);
const tools = await client.listTools();
console.log("Connected to Figma MCP Server. Available tools:", tools);
}
connectAndRun().catch(console.error);MCP Server Configuration
Add this to your claude_desktop_config.json
{
"mcpServers": {
"figma-mcp-server": {
"command": "npx",
"args": ["-y","@modelcontextprotocol/server-figma"],
"env": {
"API_KEY": "your-api-key-here"
}
}
}
}Topics
Error Resolution & Troubleshooting Matrix
Common JSON-RPC protocol error codes and environment troubleshooting for Figma MCP Server.
-32600 (Invalid Request)Cause: Malformed JSON-RPC payload sent to server
Resolution: Verify MCP client payload adheres to JSON-RPC 2.0 specs.
-32601 (Method Not Found)Cause: Requested tool or resource method does not exist
Resolution: Call list_tools() to inspect supported tool names.
-32602 (Invalid Params)Cause: Missing or invalid tool arguments
Resolution: Check argument schema types against tool definition.
-32603 (Internal Error)Cause: Unhandled execution exception inside server process
Resolution: Inspect process stderr logs or check API key credentials.
AUTH_KEY_MISSINGCause: Required environment variable not set in MCP config
Resolution: Define required API key under 'env' object in claude_desktop_config.json.
STDIO_PIPE_CLOSEDCause: Server process crashed on startup
Resolution: Run install command manually in terminal to inspect error output.
Quality Score
Automated quality ranking of maintaining source repository.
Own this server?
Claim your listing to update description, links, and category — and get a verified badge.
Claim this listing →Similar MCP Servers
Other servers in the Design & Creative category.
EverArt MCP Server
MCP server for AI image generation — create and edit images through AI agents.
OpenCut
The open-source CapCut alternative
Design Resources For Developers
Curated list of design and UI resources from stock photos, web templates, CSS frameworks, UI libraries, tools and much more
🐉 Vue Component Framework
🐉 Vue Component Framework