Figma MCP
Allows AI agents to fetch designs, nodes, and rendered images from Figma via the Figma API.
Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@Figma MCPlist frames in file jWm9EQEE08EY743SGyj6ru"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
Figma MCP
MCP server for the Figma API. Lets AI agents fetch designs, nodes, and rendered images from Figma.
Features
🎨 Get Node — Fetch node JSON with layout, styles, children
🖼️ Get Image — Render any node as PNG/JPG/SVG/PDF
📋 List Frames — Discover all frames in a file
🔍 Search — Find nodes by name
Related MCP server: figmind
Quick Start
npm install
npm run buildConfiguration
Requires FIGMA_TOKEN environment variable. Get one from:
https://www.figma.com/developers/api#access-tokens
Claude Desktop
Add to ~/.config/claude/claude_desktop_config.json:
{
"mcpServers": {
"figma": {
"command": "node",
"args": ["/path/to/figma-mcp/dist/server.js"],
"env": {
"FIGMA_TOKEN": "figd_xxxxx"
}
}
}
}Claude Code
Add to .claude/settings.json:
{
"mcpServers": {
"figma": {
"command": "node",
"args": ["/path/to/figma-mcp/dist/server.js"],
"env": {
"FIGMA_TOKEN": "figd_xxxxx"
}
}
}
}Tools
figma_get_node
Get a node's JSON data including layout, styles, and children.
figma_get_node({
fileKey: "jWm9EQEE08EY743SGyj6ru", // From Figma URL
nodeId: "9389-158685", // Node ID
depth: 2 // Children depth (0-10)
})Returns:
{
"id": "9389:158685",
"name": "DR_Home__ConnectOrg_0004_",
"type": "FRAME",
"size": { "width": 1440, "height": 1024 },
"children": 3,
"full": { ... }
}figma_get_image
Render a node as an image.
figma_get_image({
fileKey: "jWm9EQEE08EY743SGyj6ru",
nodeId: "9389-158685",
scale: 2, // 0.5 - 4
format: "png" // png, jpg, svg, pdf
})Returns:
{
"nodeId": "9389-158685",
"imageUrl": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/...",
"format": "png",
"scale": 2
}figma_list_frames
List all top-level frames in a file.
figma_list_frames({
fileKey: "jWm9EQEE08EY743SGyj6ru"
})Returns:
Found 45 frames:
- **Home Page** (FRAME) — id: `123:456`
- **Settings Modal** (FRAME) — id: `789:012`
...figma_search
Search for nodes by name.
figma_search({
fileKey: "jWm9EQEE08EY743SGyj6ru",
query: "Button"
})Returns:
Found 12 matches for "Button":
- **Primary Button** (COMPONENT)
id: `1:234`
path: Document → Components → Buttons → Primary Button
...Getting File Key and Node ID
From a Figma URL:
https://www.figma.com/design/jWm9EQEE08EY743SGyj6ru/File-Name?node-id=9389-158685
^^^^^^^^^^^^^^^^^^^^^^^^ ^^^^^^^^^^^
fileKey nodeIdLicense
MIT
This server cannot be installed
Maintenance
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.
Latest Blog Posts
- Your AI Chatbot Just Exposed Your CEO's Salary to an InternBy Om-Shree-0709 on .Agent IdentityMCP SecurityOAuth Delegation
- Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)By Om-Shree-0709 on .Agentic AiPrompt InjectionWebAssembly
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/Sebachowa/figma-mcp'
If you have feedback or need assistance with the MCP directory API, please join our Discord server