F
licenseNot graded
qualityD
maintenanceAn MCP (Multi-Agent Conversation Protocol) Server that enables interaction with the Figma REST API, auto-generated using AG2's MCP builder.
1
-
Figma MCP
by Sebachowa
Allows AI agents to fetch designs, nodes, and rendered images from Figma via the Figma API.
Click on "Deploy 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 deployed
Maintenance
ActivityInactive
ResponsivenessSyncing
Related MCP Connectors
The Figma MCP server brings Figma design context directly into your AI workflow.
Nifty's MCP server — exposes tasks, projects, messages, and files as tools for AI agents.
MCP server that lets AI assistants use all OneSchema features exposed via the public API.
MCP server for secureFlows: token-free URL builders and integration-linting tools for AI agents.
Related MCP Servers
- AlicenseNot gradedqualityDmaintenanceMCP server that connects AI clients to Figma, enabling real-time reading, creation, and modification of designs using natural language.MIT
- FlicenseNot gradedqualityDmaintenanceAn MCP server that provides write access to Figma through the Plugin API, enabling AI agents to create, modify, and manage Figma designs programmatically.23-
- AlicenseBqualityDmaintenanceAn MCP server that integrates AI agents with Figma, enabling reading and programmatic modification of designs.41MIT