figma-mcp
Provides tools to extract prototype flow data, screen lists, prototype connections, and full flow maps from Figma files via the Figma REST API. Supports retrieving section frames, prototype interactions, directed graphs of flows, design context (XML structure, screenshot, variables, styles), node metadata, screenshots, and variable definitions.
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-mcpShow me the prototype flow map for the main section"
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.
@devheerim/figma-mcp
English | 한국어
Enhanced Figma MCP Server that exposes prototype flow data — screen lists, prototype connections, and full flow maps — via the Figma REST API.
Designed as a complete replacement for the official https://mcp.figma.com/mcp, adding the missing prototype interaction layer so Claude Code can understand entire user flows from a single Figma URL.
Features
Tool | Description |
| List all frame screens inside a Figma section node |
| Get prototype interactions (trigger + destination) for a node |
| Build a directed graph of all prototype flows within a section |
| Full design context: XML structure, screenshot, variables, styles |
| Node structure as XML |
| Base64 PNG screenshot of a node |
| Variable definitions (Enterprise) or bound variable references (fallback) |
Related MCP server: genable-mcp
Requirements
Node.js 18+
Figma API key (get one here)
Setup
1. Set your API key
export FIGMA_API_KEY=your_figma_api_key_here2. Register in .mcp.json
Add to your project's .mcp.json (or ~/.claude/mcp.json):
{
"mcpServers": {
"figma": {
"type": "stdio",
"command": "npx",
"args": ["-y", "@devheerim/figma-mcp"],
"env": {
"FIGMA_API_KEY": "${FIGMA_API_KEY}"
}
}
}
}Usage
Get all screens in a section
get_section_frames(fileKey: "abc123", sectionNodeId: "24626:100")Returns a list of frame nodes directly inside the section.
Get prototype connections from a screen
get_prototype_connections(fileKey: "abc123", nodeId: "24626:6637")Returns connections like:
{
"connections": [
{
"trigger": "ON_CLICK",
"action": "NAVIGATE",
"destinationId": "24626:6654",
"destinationName": "Next Screen"
}
]
}Get the full flow map of a section
get_flow_map(fileKey: "abc123", nodeId: "24626:100")Returns a directed graph:
{
"nodes": [{ "id": "24626:6637", "name": "Home" }, ...],
"edges": [{ "from": "24626:6637", "to": "24626:6654", "trigger": "ON_CLICK", "action": "NAVIGATE" }],
"entryPoints": ["24626:6637"]
}Figma URL → IDs
Given a URL like:
https://www.figma.com/design/AbCdEfGhIjKl/MyApp?node-id=24626-100fileKey=AbCdEfGhIjKlnodeId=24626:100(replace-with:)
How to find IDs in Figma
Open your Figma file
Right-click a section or frame → Copy link
Extract
node-idfrom the URL and replace-with:
Rate limits
Figma API rate limits are handled automatically:
Nodes API: 30 req/min
Images API: 10 req/min
Exponential backoff with
Retry-Afterheader support (capped at 60s)
Variables API
The get_variable_defs tool requires a Figma Enterprise plan for full variable resolution. On non-Enterprise plans, it automatically falls back to returning boundVariables references from the node data.
Development
git clone https://github.com/devheerim/figma-mcp
cd figma-mcp
npm install
npm run build
npm testLicense
MIT
Available Tools
7 toolsget_design_contextC
Get design context including styles, components, and layout for a node
| Name | Required | Description | Default |
|---|---|---|---|
| nodeId | Yes | Node ID | |
| fileKey | Yes | Figma file key |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the full burden of explaining behavior. It implies a read operation via 'Get' but does not explicitly state that it is non-mutating, does not describe output shape or size, and does not disclose behavior for missing or invalid nodes. The note that it returns styles, components, and layout gives some content expectation but not enough behavioral detail.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single compact sentence that is front-loaded with the primary action and resource, followed by the relevant content categories. There is no filler or redundant repetition of schema information.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given that there is no output schema, no annotations, and six sibling tools with overlapping concepts, the description is incomplete. It does not specify the return format, whether multiple node IDs are accepted (despite the schema pattern allowing semicolon-separated values), or how this differs from get_metadata and get_section_frames.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so the two required parameters are already documented with types and patterns. The description does not add meaningful parameter-level detail, but per the baseline, a 3 is appropriate when the schema fully covers parameter semantics.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description uses a specific verb ('Get') and names a distinct resource ('design context') while enumerating concrete content types: styles, components, and layout. It is not a tautology and is somewhat differentiated from siblings like get_metadata, though 'design context' remains broad and overlapping.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description gives no guidance on when to prefer this tool over its siblings, nor does it state when not to use it. The only contextual clue is 'for a node,' which implies scope but does not distinguish it from get_section_frames, get_flow_map, or get_metadata.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_flow_mapC
Get a map of prototype flows within a file or section
| Name | Required | Description | Default |
|---|---|---|---|
| nodeId | Yes | Root node ID for flow traversal | |
| fileKey | Yes | Figma file key |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the full burden of behavioral disclosure. It conveys only that this is a retrieval operation returning a 'map of prototype flows', but it does not describe the return structure, traversal depth, pagination, or any other behavioral traits.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, front-loaded sentence with no filler or redundancy. It communicates the core purpose immediately and every word contributes to the meaning.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a tool with no output schema and no annotations, the description is too thin. It fails to explain what the returned map actually contains, how nodeId scopes the traversal, or how this tool differs from get_prototype_connections, leaving an agent under-informed for correct invocation and interpretation.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The schema already fully describes both parameters ('Figma file key' and 'Root node ID for flow traversal'), so the baseline of 3 applies. The phrase 'within a file or section' vaguely maps to fileKey and nodeId but adds no additional meaning or constraints beyond the schema.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description states a specific verb ('Get') and resource ('map of prototype flows'), scoped to 'a file or section', which aligns with the two required parameters. However, it does not distinguish this tool from sibling tools like get_prototype_connections, which could overlap in purpose.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
No guidance is provided about when to use this tool versus alternatives such as get_prototype_connections or get_section_frames. The description gives no context, exclusions, or routing hints, leaving the agent to infer usage from the tool name alone.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_metadataC
Get metadata for a Figma node
| Name | Required | Description | Default |
|---|---|---|---|
| nodeId | Yes | Node ID | |
| fileKey | Yes | Figma file key |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full burden of behavioral disclosure. It implies a read operation but does not state what metadata is returned, whether authentication is required, or any limits or side effects. This leaves the behavior largely unspecified.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, front-loaded sentence with no wasted words. It is concise, though it omits useful contextual and behavioral information that would make it more helpful.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
With no output schema and no annotations, the description does not clarify what metadata is included, what form the result takes, or how this tool fits with its siblings. While the two required parameters are well documented, the tool's purpose and behavior are described too vaguely to be considered complete.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The input schema already describes both parameters well, with patterns and descriptions for nodeId and fileKey, so schema coverage is 100%. The description adds no extra semantic meaning about how the parameters relate to the metadata call, but because the schema is complete, the baseline score of 3 is appropriate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description names a clear action ('Get') and resource ('metadata for a Figma node'), so an agent can tell what operation is being performed. However, it does not differentiate this from sibling tools like get_design_context or get_section_frames, since 'metadata' is not scoped precisely enough to distinguish it.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description gives no indication of when to use this tool versus alternatives such as get_design_context or get_variable_defs. There are no conditions, exclusions, or references to sibling tools, so the agent must infer appropriate usage from the name alone.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_prototype_connectionsC
Get prototype interaction connections for a node
| Name | Required | Description | Default |
|---|---|---|---|
| nodeId | Yes | Node ID to fetch connections from | |
| fileKey | Yes | Figma file key |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full behavioral burden. It only states that the tool fetches connections; it does not disclose whether the operation is read-only, what the returned data looks like, whether pagination or limits apply, or how errors are surfaced.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single sentence with no filler, and the key subject is stated immediately. It earns its place and is easy to scan.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
There is no output schema, so the description should clarify what 'connections' means and what shape the result takes. The description is too sparse to fully support an agent in choosing the tool confidently, especially given sibling tools like get_flow_map that could overlap in intent.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Both parameters are fully described in the input schema with patterns and descriptions, so schema coverage is 100%. The description adds no extra parameter semantics beyond 'for a node', but it does not need to compensate for a coverage gap.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly names a specific verb ('Get') and a resource ('prototype interaction connections') scoped to a node. It is not a tautology and is easy to understand, though it does not explicitly differentiate itself from siblings like get_flow_map.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
There is no guidance about when to use this tool versus the sibling tools, nor any mention of prerequisites or exclusions. The intended use is only implied by the description, leaving the agent to infer selection criteria.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_screenshotB
Get a screenshot (image export) of a Figma node
| Name | Required | Description | Default |
|---|---|---|---|
| nodeId | Yes | Node ID to screenshot | |
| fileKey | Yes | Figma file key |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries the full burden of behavioral disclosure. It does say the result is an image export, but it omits return format, rendering behavior, access requirements, or any limitations. This is a minimal read-operation description with no extra behavioral context.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, front-loaded sentence with no filler. It communicates the core purpose efficiently and earns its place without redundant wording.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a simple two-parameter tool, the description is minimally viable, but it leaves out useful context such as the actual image format, return payload details, or any export-specific constraints. Given there is no output schema or annotations, a bit more context would make it complete.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, and both fileKey and nodeId have meaningful descriptions. The tool description adds little param-level value beyond clarifying that the output is an image, but the schema already provides adequate parameter semantics.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states a specific action ('Get') and resource ('screenshot/image export of a Figma node'). It is immediately distinguishable from sibling tools like get_metadata or get_flow_map, which serve different purposes.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
No guidance is provided on when to choose this tool over alternatives, nor are any conditions or exclusions mentioned. The description implies usage via the name, but does not explicitly say when a screenshot is the right tool versus getting node frames, metadata, or variables.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_section_framesA
Get a hierarchical tree of sections and frames within a section node. Nested sections are returned as children, making it easy to understand the structure for scoping work (e.g. splitting PRs by section).
| Name | Required | Description | Default |
|---|---|---|---|
| depth | No | Max nesting depth to traverse (default: 10) | |
| fileKey | Yes | Figma file key | |
| sectionNodeId | Yes | Section node ID |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the behavioral disclosure burden. It usefully reveals that nested sections are returned as children and that the result is a tree, which goes beyond the input schema. It does not discuss error cases or auth, but for a read-oriented tree-fetching tool this is solid coverage.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is concise and front-loaded, with the core action stated first and the practical rationale in a short second clause. Every sentence contributes meaningful context without unnecessary filler.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a relatively simple read tool, the description sufficiently explains the purpose, the output shape, and a motivating use case. The input schema covers the parameters, and no output schema exists, but the description's mention of the hierarchical tree provides the needed expectations for the return value.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The input schema already documents all parameters with 100% coverage, so the baseline is 3. The description adds context around sectionNodeId by tying it to the hierarchical tree behavior, but it does not provide additional parameter-level details beyond what the schema already states.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states it retrieves a hierarchical tree of sections and frames within a section node, using a specific verb and resource. It also distinguishes this from the sibling tools, which focus on other concerns like prototype connections, flow maps, and metadata.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description gives a concrete use case—understanding section structure for scoping work like splitting PRs—which gives an agent clear context for when this tool is appropriate. It does not explicitly name when not to use it or mention alternatives, so it stops short of a full 5.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_variable_defsC
Get variable definitions from a Figma file
| Name | Required | Description | Default |
|---|---|---|---|
| nodeId | No | Optional node ID to scope variable lookup | |
| fileKey | Yes | Figma file key |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries full responsibility for behavioral disclosure. It only says 'Get', which implies read-only, but does not disclose what is returned, whether nodeId scopes the result, or any limitations or side effects.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
A single, front-loaded sentence with no filler or redundancy. It is efficient, though minimal in detail.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
The schema fully documents parameters, but the description lacks usage context, return-value information, and sibling differentiation. For a simple getter it is serviceable, but not complete enough to fully support selection and invocation without inference.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The input schema covers 100% of parameters with descriptions, including fileKey and nodeId, with patterns and optionality noted. The description adds no parameter semantics, but the schema already provides the necessary meaning.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
States a clear action ('Get') and a specific resource ('variable definitions') from a Figma file. The name and description align well. It does not explicitly differentiate from sibling tools like get_metadata or get_design_context, but the resource is specific enough to infer the distinction.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
No guidance on when to use this tool versus alternatives, and no prerequisites or exclusions are mentioned. The description only restates the function, leaving the agent to infer appropriate usage from the tool name alone.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
7 tool updates
v1.0.7- First observed
get_design_context - First observed
get_flow_map - First observed
get_metadata - First observed
get_prototype_connections - First observed
get_screenshot - First observed
get_section_frames - First observed
get_variable_defs
TDQS
Scored across 7 tools
Each tool addresses a recognizable retrieval need—structure, metadata, design styles, screenshots, variables, and prototype flows—so misselection is unlikely. The main fuzziness is between get_metadata and get_design_context, but their descriptions separate generic node metadata from design-specific context.
All seven tools use the exact get_<resource> snake_case convention with no verb changes or mixed styles. This makes the API surface highly predictable.
Seven focused read-only retrieval tools is well within the ideal range for a Figma context server. Each tool covers a distinct aspect of design exploration without redundancy or bloat.
The set covers structure, node metadata, design context, screenshots, variables, and prototype flows, which covers the core read/analysis workflows. It does not include mutation or collaboration features, but the get_* surface appears intentionally scoped rather than incomplete.
Maintenance
Related MCP Connectors
The Figma MCP server brings Figma design context directly into your AI workflow.
MCP server for secureFlows: token-free URL builders and integration-linting tools for AI agents.
Augments MCP Server - A comprehensive framework documentation provider for Claude Code
MCP server that lets AI assistants use all OneSchema features exposed via the public API.
Related MCP Servers
- -licenseNot gradedqualityNot gradedmaintenanceA Model Context Protocol (MCP) server that enables Claude to create and manipulate designs in Figma through either a Figma plugin or directly via the Figma API.-
- AlicenseAqualityCmaintenanceWrite-side MCP server for Figma — build, edit, and search Figma designs from Claude Code, Cursor, Cline, or any MCP client. Complements Figma's official read-only MCP with 41 tools for tree creation, variables, components, and visual verification.411MIT
- AlicenseNot gradedqualityCmaintenanceRead-only Figma MCP server that enables design-to-code workflows by talking to the Figma REST API with a personal access token, for use with Claude Code and GitHub Copilot.1,330MIT
- AlicenseNot gradedqualityCmaintenanceAn MCP server that bridges Claude to Figma, enabling read access via REST and full create/edit capabilities through the Figma Plugin API over a local WebSocket.7MIT