Skip to main content
Glama
grm

Context Figma MCP

by grm

Context Figma MCP

A read-only MCP server for extracting actual Figma prototype flows and transitions. Designed to complement GLips/Figma-Context-MCP: GLips provides design/layout context, while this server exposes navigational behavior for agent-generated specifications.

No LLM inference and no Figma writes. Missing destinations and ambiguous prototype data are returned as explicit warnings. This server does not infer backend business rules from visual design.

Requirements

  • macOS, Linux, or Windows; Node.js 22+

  • Figma personal access token with file_content:read, and permission to view the file

  • OpenCode (optional; the MCP Inspector can test tools independently)

Related MCP server: figma-mcp

Setup

 git clone https://github.com/grm/context-figma-mcp.git
 cd context-figma-mcp
 npm install
 npm run build
 npm test

Keep the Figma token in your shell/session (not inside Git):

read -rs 'FIGMA_TOKEN?Figma token: ' FIGMA_TOKEN; echo
export FIGMA_TOKEN

On macOS Terminal, if using zsh, read -rs can prompt as shown. Or configure the token securely through your shell's credential manager. The token is never written to files by the MCP.

Try all MCP tools without a Figma account (offline mode)

The repository includes a synthetic Figma REST-shaped JSON fixture with five screens, explicit navigation, a conditional branch, an overlay, a BACK action and a deliberately broken destination. It exercises the actual MCP tool handlers, but does not validate Figma API access or compatibility against a live file.

From the repository root:

npm install
npm run build
npm test
export FIGMA_FIXTURE_PATH="$(pwd)/test/fixtures/prototype.json"
npx @modelcontextprotocol/inspector node dist/index.js

In the Inspector, connect, then call these tools using the following test arguments:

Tool

Arguments

get_prototype_flows

{"fileKey":"offline-demo"}

get_prototype_graph

{"fileKey":"offline-demo"}

get_screen_interactions

{"fileKey":"offline-demo","screenNodeId":"1:2"}

Expected: Edit email flow, 5 screens, conditional transitions and a warning about unresolved destination 99:99.

To test the same fixture inside OpenCode, merge this local MCP entry into your existing OpenCode configuration:

{
  "mcp": {
    "figma-prototype-demo": {
      "type": "local",
      "command": ["node", "/ABSOLUTE/PATH/context-figma-mcp/dist/index.js"],
      "enabled": true,
      "environment": {
        "FIGMA_FIXTURE_PATH": "/ABSOLUTE/PATH/context-figma-mcp/test/fixtures/prototype.json"
      }
    }
  }
}

Then ask OpenCode to invoke figma-prototype-demo_get_prototype_graph with fileKey="offline-demo". This does not require FIGMA_TOKEN. The fileKey parameter is ignored only in offline mode; in normal mode, it is validated and used with the Figma API.

Unset FIGMA_FIXTURE_PATH and remove the demo MCP entry when you switch to the real Figma service. Never set this variable in production, or the server will continue to serve the local fixture instead of live data.

OpenCode integration

Add the following to the OpenCode configuration that already contains GLips, changing the absolute executable path:

{
  "mcp": {
    "figma-prototype": {
      "type": "local",
      "command": ["node", "/ABSOLUTE/PATH/context-figma-mcp/dist/index.js"],
      "enabled": true,
      "environment": { "FIGMA_TOKEN": "{env:FIGMA_TOKEN}" }
    }
  }
}

Merge this entry into your existing mcp object: do not replace your GLips configuration. Run opencode mcp list to verify registration. Restart OpenCode after editing its configuration. See examples/opencode.jsonc.

Test tools without an LLM

npx @modelcontextprotocol/inspector node dist/index.js

Click Connect, select a tool and supply a Figma file URL or file key. The MCP Inspector launches the server and calls the tool directly.

Then in OpenCode try:

Call figma-prototype_get_prototype_flows on this Figma design URL: https://www.figma.com/design/<FILE_KEY>/... . Report the raw flows, do not invent any transitions.

After choosing a flow, use get_prototype_graph and optionally startNodeId to get just the reachable screens. Use get_screen_interactions for buttons/interactions on a particular screen.

Tools

Tool

Inputs

Output

get_prototype_flows

fileKey

Named Figma flow starts and associated pages

get_prototype_graph

fileKey, optional startNodeId

Screens, interactions, explicit destinations and warnings

get_screen_interactions

fileKey, screenNodeId

Trigger/actions nested inside one screen

fileKey accepts a file key or https://www.figma.com/design/... link. IDs can be 12:345 or 12-345.

What the graph preserves

  • The triggering event (ON_CLICK, ON_HOVER, AFTER_TIMEOUT, etc.)

  • Figma NODE actions, with navigation.type such as NAVIGATE, OVERLAY, SWAP, SCROLL_TO, CHANGE_TO

  • Non-navigational BACK, CLOSE, variable and media actions

  • Nested CONDITIONAL actions, including the original condition object encoded in conditionPath

  • transition animation metadata, including type/duration when present

  • Older transitionNodeID information only when modern interactions are absent

  • Exact source and destination IDs, their screen mapping, and provenance

A transition to an unknown ID is not guessed: resolved:false and a warning are returned. BACK has no statically known destination, so destinationId:null.

Local test suite

npm test exercises a fixture with linked screens, nested interaction nodes, condition branches, an overlay, back/close, unresolved and legacy transitions. No Figma token is needed for the tests. npm run check performs TypeScript checking.

Limitations / roadmap

  • This version loads the complete file once per tool call. Very large files may be slow or rate-limited; the next iteration can add caching and partial node fetching.

  • Figma URLs and destination references stay inside the same file; external navigation uses action metadata, not cross-file screen resolution.

  • The server cannot derive functional validation or API behavior from Figma alone. Combine its output with Jira tickets, screenshots and PO validation in /specify.

  • Frames without configured interactions cannot become reliably inferred navigation flows.

  • Only the specific official Figma REST structures are interpreted. Unknown action fields are not treated as implicit transitions.

Security

Read-only REST endpoint GET /v1/files/{key}; file keys are validated; arbitrary URLs are never fetched; token passed only via X-Figma-Token; no HTTP server is exposed (stdio only). Never commit .env or token values.

Development

The MCP SDK used is the current v2 TypeScript SDK. Node 22+ required; CI runs types, build and tests for PRs. This implementation is initially tested against synthetic fixtures; validation against a real prototyped Figma file is required before relying on it in a specification pipeline.

Available Tools

3 tools
get_prototype_flowsB

List explicit Figma prototype flow starting points and their pages. Read-only.

ParametersJSON Schema
NameRequiredDescriptionDefault
fileKeyYesFigma file key or https://www.figma.com/design/... URL

TDQS

B3.3/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description carries the full behavioral burden, and it does disclose the key trait: 'Read-only.' That covers the safety profile adequately for a simple list operation. It says nothing about pagination, error behavior, or what a 'flow starting point' actually contains in the response, so the disclosure is minimal rather than rich.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Two short sentences, front-loaded with the resource and its scope, with the read-only trait appended where it is easy to find. No filler or redundancy.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a one-parameter, read-only list tool with no output schema and no annotations, the description states enough to invoke it safely. It is still thin on how the returned flows relate to the data from get_prototype_graph, which an agent choosing between the two would want.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

There is a single parameter with 100% schema description coverage, and the schema already documents the file key format including the design URL alternative. The description adds no parameter-level detail beyond what the schema provides, so the baseline of 3 applies.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description gives a specific verb and resource: 'List explicit Figma prototype flow starting points and their pages.' An agent knows exactly what data comes back. It does not, however, distinguish itself from the sibling tools get_screen_interactions and get_prototype_graph, which overlap in the prototype-graph space.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

There is no statement of when to use this versus get_prototype_graph or get_screen_interactions, and no prerequisite or scope guidance. The only usage signal is the phrase 'starting points,' which implies a narrower scope than the siblings but is never made explicit.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

get_prototype_graphA

Get explicit Figma prototype interactions and navigation as a provenance-aware graph; optionally limit to nodes reachable from a flow/screen. Does not infer missing links.

ParametersJSON Schema
NameRequiredDescriptionDefault
fileKeyYesFigma file key or https://www.figma.com/design/... URL
startNodeIdNoOptional flow start or screen node ID, e.g. 12:345

TDQS

A3.6/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description carries the full burden. It usefully discloses a real limitation ('does not infer missing links') and that results are provenance-aware, but says nothing about permissions, rate limits, or whether the graph is a snapshot. A meaningful but incomplete behavioral picture for an unannotated tool.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

One tightly packed sentence plus a short boundary clause, front-loaded with the verb and resource. Every clause earns its place: purpose, optional scoping, and the inference limitation.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

With no annotations and no output schema, the description still covers purpose, scoping, and the key non-inference guarantee. It is nearly complete for a read-only graph fetch, though it never hints at the shape of the returned graph (nodes/edges), which would help given the absent output schema.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 100%, so the schema already documents both parameters (fileKey accepts URL or key, startNodeId is a flow/screen node ID). The description adds the semantic that startNodeId restricts output to reachable nodes, which is a modest gain over the schema wording. Baseline 3 applies.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

States a specific verb and resource: fetch explicit Figma prototype interactions and navigation as a graph, with the scope narrowed by the optional startNodeId. It does not name the siblings get_screen_interactions or get_prototype_flows, so the agent must infer the boundary from the 'explicit / does not infer' phrasing rather than being routed directly.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The conditional 'optionally limit to nodes reachable from a flow/screen' implies when to pass startNodeId, but there is no explicit statement of when to prefer this over get_prototype_flows or get_screen_interactions. Usage is implied rather than stated.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

get_screen_interactionsB

Get triggers, actions, conditions and resolved destinations for one Figma screen. No AI inference.

ParametersJSON Schema
NameRequiredDescriptionDefault
fileKeyYesFigma file key or https://www.figma.com/design/... URL
screenNodeIdYesFigma screen/node ID e.g. 12:345

TDQS

B3.4/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description carries the behavioral burden. 'No AI inference' is a genuinely useful disclosure that results are raw extraction rather than interpreted, but it omits read-only status (implied by 'get'), auth requirements, error behavior, or any pagination/limits.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Two short sentences, front-loaded with what is returned and immediately qualified by the no-inference clause. No wasted words.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a two-param read tool with no output schema and no annotations, the description enumerates the returned content (triggers, actions, conditions, resolved destinations) and clarifies fidelity, which is close to sufficient. Missing safety/auth notes keep it from a 5.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100% for both required params (fileKey accepts file key or URL, screenNodeId format given), so the schema already does this work. The description adds nothing about the parameters, which is acceptable at full coverage — baseline 3.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

States a specific verb (get) and resource (triggers, actions, conditions, resolved destinations for one Figma screen). The scope 'one screen' hints at the narrower grain versus the sibling get_prototype_flows/graph, but it never names or contrasts them explicitly.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

There is no statement of when to pick this over get_prototype_flows or get_prototype_graph, and no prerequisites or exclusions. The only guidance-ish signal is 'No AI inference', which describes output fidelity rather than selection context.

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.

  1. 3 tool updatesv0.1.0
    • First observedget_prototype_flows
    • First observedget_prototype_graph
    • First observedget_screen_interactions

TDQS

A3.7/5.0

Scored across 3 tools

Disambiguation4/5

The three tools target distinct granularities: single screen, flow starting points, and global graph. However, get_screen_interactions and get_prototype_graph (when limited to a screen) can both return screen-level interactions, creating minor overlap that descriptions mostly resolve.

Naming Consistency5/5

All tools use the get_ prefix followed by a snake_case noun phrase (get_screen_interactions, get_prototype_flows, get_prototype_graph), a consistent verb_noun pattern throughout.

Tool Count5/5

Three tools is well-scoped for a focused, read-only prototype-context server. Each tool covers a distinct retrieval need (per-screen details, flow list, navigation graph) without redundancy.

Completeness4/5

The set covers screen interactions, flow origins, and the full navigation graph, which is complete for read-only prototype context. A minor gap exists for retrieving interactions of arbitrary nodes not tied to a screen or flow, but core workflows are covered.

Maintenance

ActivityMaintained
ResponsivenessNo issues

Related MCP Connectors

Related MCP Servers

  • A
    license
    Not graded
    quality
    D
    maintenance
    A read-only Figma MCP server for GitHub Copilot that renders screenshots locally inside Figma via exportAsync, avoiding any public S3 URLs or outbound HTTP. It provides 9 tools to inspect Figma files, components, variables, and FigJam boards through a private tunnel.
    MIT
  • A
    license
    Not graded
    quality
    D
    maintenance
    Read-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,945 npm
    MIT
  • A
    license
    A
    quality
    D
    maintenance
    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 replacement for the official Figma MCP server, adding prototype interaction layer so Claude Code can understand entire user flows from a single Figma URL.
    7
    10 npm
    3
    MIT
  • F
    license
    Not graded
    quality
    D
    maintenance
    Read-only MCP server that wraps the Figma REST API, providing tools like get file metadata, list frames, and export node image URLs for AI SDLC agents.
    -