Skip to main content
Glama

Figma MCP

Figma REST API MCP server. 2 tools list the top-level frames in a file and fetch one frame's rendered PNG plus its node JSON and image-fill map into a local output directory.

Install

Claude Code:

claude mcp add figma -e FIGMA_TOKEN=your-token -- npx -y @scalably-io/figma-mcp

Codex:

codex mcp add figma --env FIGMA_TOKEN=your-token -- npx -y @scalably-io/figma-mcp

Claude Desktop: download figma-mcp.mcpb from the latest GitHub release and open it.

Related MCP server: Figma MCP Server

Setup

  1. Create a personal access token at figma.com under account settings, with file_content:read scope.

  2. Find the file key in any Figma file URL: it is the segment after /design/ or /file/, for example https://www.figma.com/design/AbC123xyz/My-file gives AbC123xyz. Both tools take it as file_key.

  3. If FIGMA_TOKEN is not set the server still starts and lists its tools; every call then fails with FIGMA_NOT_CONFIGURED until the token is provided.

  4. fetch_frame is the only tool that writes files (so it is not marked read-only); it writes frame.png, node.json, and fills.json into a directory below the configured output root (default ./figma-output). The other tool is fully read-only.

Tools (2)

Tool

What it does

list_frames

List and optionally filter all top-level FRAME nodes in a Figma file, with exact page/name/node-id data, dimensions, and file metadata

fetch_frame

Fetch one Figma frame and transactionally write frame.png, node.json, and a normalized image-fill map into a directory below the output root

Configuration

Variable

Required

Purpose

FIGMA_TOKEN

yes

Figma personal access token with file_content:read

FIGMA_API_BASE_URL

no

Override the Figma REST API base URL (default https://api.figma.com/v1)

FIGMA_REQUEST_TIMEOUT_MS

no

Per-request timeout in milliseconds (default 60000)

FIGMA_MAX_JSON_BYTES

no

Upper bound on a Figma JSON response, in bytes (default 104857600)

FIGMA_MAX_FRAME_BYTES

no

Upper bound on a downloaded frame PNG, in bytes (default 104857600)

FIGMA_OUTPUT_ROOT

no

Directory that every fetch_frame output directory must stay below (default ./figma-output, created on first use)

FIGMA_ALLOW_HTTP_FOR_TESTS

no

Test suite only: 1 allows a plain-HTTP loopback API base. Never set it in normal use

Reply shape

Every tool returns plain JSON with status (succeeded, partial, no_op), summary, target, result, proof, warnings, recovery. Failures throw a plain error string: <code>: <message> <hint>.

Limits

fetch_frame renders through Figma's image API, so very large frames or extreme scale values can exceed the configured JSON or frame byte limits; lower scale or split the frame if that happens. fills.json URLs are temporary and expire within 14 days.

Verify

Each release lists the package version, the .mcpb sha256 and the production commit it was derived from in CHANGELOG.md. CI runs the tests and a clean install of the packed tarball on every push.

Privacy Policy

This server runs locally, on your machine, under your own credentials. It collects no personal data, contains no telemetry, stores nothing persistently beyond the frame bundles you explicitly fetch, and talks only to the vendor API it wraps. No third party, including Scalably, receives your data. Contact: hello@scalably.io. Canonical copy: https://scalably.io/connector-privacy.html

License

MIT. Copyright Scalably.

Available Tools

2 tools
fetch_frameA

Read one Figma frame and transactionally write frame.png, node.json, and a normalized imageRef-to-URL fills.json map under the output directory. Returns upstream request proof plus local size, SHA-256, PNG structure/dimensions, and JSON read-back proof. Existing unrelated files are preserved.

ParametersJSON Schema
NameRequiredDescriptionDefault
scaleNoPNG scale from 0.01 through 4; default 1.
node_idYesExact frame node ID, normally colon-form such as 2968:811.
out_dirYesOutput directory for this frame. Relative paths resolve below the output root (default ./figma-output), which is created on first use; absolute paths must stay below it.
file_keyYesFile key parsed from the Figma URL.

TDQS

A4/5.0
Behavior4/5

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

Annotations only indicate readOnlyHint=false and destructiveHint=false, so the description adds meaningful behavior: transactional writes, exact output files, read-back proofs, and preservation of unrelated files. It does not contradict any annotation and gives an agent useful operational expectations beyond the structured fields.

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?

The description is compact and information-dense: three sentences cover the action, outputs, return proofs, and file-preservation behavior with no filler. The most important scoping statement ('Read one Figma frame') is front-loaded.

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 tool with no output schema and non-trivial write behavior, the description explains what is written, what is returned, and that unrelated files are preserved. Minor gaps remain around the exact meaning of 'transactionally' and failure/error behavior, but the description is largely sufficient for invoking the tool correctly.

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%, so the parameters are already fully documented in the schema. The description introduces no parameter-specific semantics beyond referencing the output directory context, which is acceptable given the schema already carries the burden.

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

Purpose5/5

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

The description names a specific verb-resource pair ('Read one Figma frame') and exactly what artifacts it writes (frame.png, node.json, fills.json), which clearly distinguishes it from the sibling list_frames. It also states what the tool returns, removing ambiguity about its scope.

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 phrase 'Read one Figma frame' implies a targeted fetch operation as opposed to listing frames, and the mention of writing a local bundle gives context. However, it never explicitly says when to prefer this tool over list_frames or when not to use it, so the usage guidance is only implied.

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

list_framesA
Read-onlyIdempotent

List and optionally filter all top-level FRAME nodes in a Figma file. Returns exact page/name/node-id data, nullable dimensions, current file metadata, completeness, request ID, and rate-limit proof. Requires file_content:read.

ParametersJSON Schema
NameRequiredDescriptionDefault
queryNoOptional case-insensitive page or frame-name substring.
file_keyYesFile key parsed from the Figma URL.

TDQS

A4/5.0
Behavior4/5

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

Annotations already declare readOnlyHint, idempotentHint, and destructiveHint=false, so the description correctly does not restate safety. It adds genuinely useful context by naming the required file_content:read permission and the concrete return payload, including nullable dimensions, metadata, completeness, request ID, and rate-limit proof. No contradiction with annotations.

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 sentences with no fluff: the core action is front-loaded, followed by a compact list of return fields and the required permission. Every sentence earns its place.

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 simple two-parameter read-only list tool, the description covers the action, return values, and authentication requirement. The absence of an output schema is partially mitigated by enumerating return categories, though details on formatting or pagination are omitted.

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%, so both query and file_key are already sufficiently documented in the input schema. The description mentions filtering at a high level but adds no syntax or behavioral details beyond what the schema provides, so it stays at the baseline.

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

Purpose5/5

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

States a specific verb ('List'), a clear resource ('top-level FRAME nodes in a Figma file'), and the optional filtering behavior. It effectively distinguishes from the sibling fetch_frame by focusing on all top-level frames rather than a single frame.

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 description makes it clear this tool is meant for enumerating or filtering top-level frames, which implies when it should be used. However, it never names the sibling fetch_frame or states when to prefer that alternative, so the usage guidance remains implicit rather than explicit.

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. 1 tool updatev1.0.1
    • Changedfetch_frame1 field changed
      • changedInput schema / properties / out_dir / description
        Previous value: -"Directory below the output root (default ./figma-output)."New value: +"Output directory for this frame. Relative paths resolve below the output root (default ./figma-output), which is created on first use; absolute paths must stay below it."
  2. 2 tool updatesv1.0.0
    • First observedfetch_frame
    • First observedlist_frames

TDQS

A4/5.0

Scored across 2 tools

Disambiguation5/5

The two tools are fully distinct: list_frames discovers available frames while fetch_frame retrieves and writes a specific frame. There is no overlap or ambiguity in their responsibilities.

Naming Consistency5/5

Both tool names follow the same verb_noun pattern and use consistent snake_case naming. The singular/plural distinction (fetch one frame vs. list many frames) aligns with their semantics.

Tool Count3/5

With only two tools, the server feels minimal and borderline thin. The pair supports a basic list-then-fetch workflow but leaves little room for broader Figma integration beyond frame extraction.

Completeness3/5

The server covers listing and fetching frames, but it only lists top-level frames, leaving nested-frame discovery as a notable gap. There are also no tools for other common Figma actions like retrieving comments or asset exports, making the surface feel incomplete for a general Figma MCP.

Maintenance

ActivityMaintained
ResponsivenessNo issues

Related MCP Connectors

Related MCP Servers

  • A
    license
    B
    quality
    D
    maintenance
    Enables interaction with Figma designs through the Figma API, allowing users to export images in multiple formats, extract style data and CSS, analyze design elements, and retrieve SVG code from Figma files. Supports batch operations and comprehensive design element analysis including images, vectors, and components.
    7
    20 npm
    11
    MIT
  • A
    license
    B
    quality
    D
    maintenance
    Enables interaction with Figma files through tools that list projects/files, fetch design data, and generate React+Vite frontend code directly from Figma frames.
    4
    1,772 npm
    MIT
  • A
    license
    Not graded
    quality
    D
    maintenance
    Enables developers to extract and organize Figma design files, including complete node data (tree structure and images) for AI understanding and code generation.
    MIT
  • A
    license
    Not graded
    quality
    D
    maintenance
    Unofficial local MCP bridge for reading the currently open Figma file through a Figma plugin. Provides tools to inspect selection, file info, and export selected nodes as SVG/PNG.
    MIT