Figma MCP
This server exposes a small MCP interface to the Figma REST API, letting you inspect a Figma file's top-level frames and fetch a rendered frame as a local file bundle.
list_frames: List all (or filter by case-insensitive substring) top-level FRAME nodes in a Figma file, including page/name/node-id, dimensions, and current file metadata.
fetch_frame: Take one exact frame node ID and write a local bundle containing
frame.png(rendered PNG, scale 0.01–4),node.json(frame node JSON), andfills.json(normalized image-fill URL map).Output control:
fetch_framewrites transactionally under a configurable output root; relative paths resolve below it and absolute paths must stay within it.Read-only safety:
list_framesis fully read-only and marked with read-only/idempotent hints;fetch_framewrites files only for the requested frame and preserves unrelated existing files.Configuration: Uses a Figma personal access token (
FIGMA_TOKEN) withfile_content:read, with optional overrides for API base URL, timeouts, JSON/PNG size limits, and output root.Operational details: Returns structured proof/summary/warnings/recovery info for successful calls. It also reports configured errors (e.g.,
FIGMA_NOT_CONFIGURED) when no token is set, and temporaryfills.jsonURLs expire within 14 days.
Provides tools for working with Figma files, allowing listing top-level frames in a file and fetching a frame's rendered PNG, node JSON, and image-fill map for local output.
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 the top-level frames in Figma file AbC123xyz."
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
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-mcpCodex:
codex mcp add figma --env FIGMA_TOKEN=your-token -- npx -y @scalably-io/figma-mcpClaude Desktop: download figma-mcp.mcpb from the latest GitHub release and open it.
Related MCP server: Figma MCP Server
Setup
Create a personal access token at figma.com under account settings, with
file_content:readscope.Find the file key in any Figma file URL: it is the segment after
/design/or/file/, for examplehttps://www.figma.com/design/AbC123xyz/My-filegivesAbC123xyz. Both tools take it asfile_key.If
FIGMA_TOKENis not set the server still starts and lists its tools; every call then fails withFIGMA_NOT_CONFIGUREDuntil the token is provided.fetch_frameis the only tool that writes files (so it is not marked read-only); it writesframe.png,node.json, andfills.jsoninto a directory below the configured output root (default./figma-output). The other tool is fully read-only.
Tools (2)
Tool | What it does |
| 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 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 |
| yes | Figma personal access token with |
| no | Override the Figma REST API base URL (default |
| no | Per-request timeout in milliseconds (default 60000) |
| no | Upper bound on a Figma JSON response, in bytes (default 104857600) |
| no | Upper bound on a downloaded frame PNG, in bytes (default 104857600) |
| no | Directory that every |
| no | Test suite only: |
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 toolsfetch_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.
| Name | Required | Description | Default |
|---|---|---|---|
| scale | No | PNG scale from 0.01 through 4; default 1. | |
| node_id | Yes | Exact frame node ID, normally colon-form such as 2968:811. | |
| out_dir | Yes | 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. | |
| file_key | Yes | File key parsed from the Figma URL. |
TDQS
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.
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.
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.
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.
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.
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_framesARead-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.
| Name | Required | Description | Default |
|---|---|---|---|
| query | No | Optional case-insensitive page or frame-name substring. | |
| file_key | Yes | File key parsed from the Figma URL. |
TDQS
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.
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.
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.
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.
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.
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 tool update
v1.0.1- Changed
fetch_frame1 field changed- changed
Input schema / properties / out_dir / descriptionPrevious 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 tool updates
v1.0.0- First observed
fetch_frame - First observed
list_frames
TDQS
Scored across 2 tools
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.
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.
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.
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
Related MCP Connectors
Create, validate, edit, export (markdown/svg/png/mermaid), and search JSON Canvas files.
Access and maintain design system docs, tokens, components, skills, and contexts across any project.
- miromiroOAuthapp.miromiro
Turn any live website into brand colors, fonts, design tokens, SVGs, Lottie and paste-ready code.
Render HTML, Markdown, or URLs to images, PDF, or branded artifacts; extract and watch pages.
Related MCP Servers
- AlicenseBqualityDmaintenanceEnables 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.720 npm11MIT
- AlicenseBqualityDmaintenanceEnables interaction with Figma files through tools that list projects/files, fetch design data, and generate React+Vite frontend code directly from Figma frames.41,772 npmMIT
- AlicenseNot gradedqualityDmaintenanceEnables developers to extract and organize Figma design files, including complete node data (tree structure and images) for AI understanding and code generation.MIT
- AlicenseNot gradedqualityDmaintenanceUnofficial 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