Figma MCP
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 "Install 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; 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 |
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_frameCRead-onlyDestructive
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 | Directory below the output root (default ./figma-output). | |
| file_key | Yes | File key parsed from the Figma URL. |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
The annotation readOnlyHint=true is directly contradicted by the description's statement that the tool 'transactionally write[s] frame.png, node.json, and ... fills.json' under the output directory. While the description usefully discloses the file write behavior, the existence of the files, and the preservation of unrelated files, the contradiction forces a score of 1 per the rubric. The annotations also present a conflicting pair (readOnlyHint true + destructiveHint true), increasing confusion.
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 two sentences and every clause contributes: the first sentence states the core action and file outputs; the second lists return proofs and the preservation guarantee. Information is front-loaded and there is no 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?
Without an output schema, the description compensates by listing return proofs (upstream request proof, local size, SHA-256, PNG structure/dimensions, JSON read-back proof). It also notes that unrelated files are preserved, which signals the risk to the three named files. Gaps remain (e.g., no error behavior, no mention of whether out_dir is created, no guidance on obtaining node_id), but the core invocation context is covered well enough for a 4.
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 baseline is 3. The description references the output directory but does not add extra semantic detail for file_key, node_id, scale, or out_dir beyond what the schema already provides. No compensation is needed, so 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 specifies a concrete action: read one Figma frame and write three named files (frame.png, node.json, fills.json) with normalized data. It clearly identifies the resource (a single frame) and expected outputs. However, it does not explicitly differentiate from the sibling list_frames, so it stops short of a full 5.
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 offers no guidance on when to use this tool versus list_frames, nor any prerequisites such as obtaining a node_id via list_frames or ensuring the output directory exists. There are no exclusions or alternative routing hints, leaving the agent to infer usage from the name.
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. Dates show when Glama detected each change.
2 tool updates
v1.0.0- First observed
fetch_frame - First observed
list_frames
TDQS
Scored across 2 tools
list_frames enumerates frame metadata while fetch_frame retrieves a single frame's content and writes artifacts. The clear singular/plural object distinction and verb difference make tool selection unambiguous.
Both tools follow the same verb_noun snake_case pattern: list_frames and fetch_frame. This is consistent and predictable.
Two tools form a minimal but coherent list-then-fetch pipeline. The count feels thin for a general Figma integration, but it is not absurd for a narrow frame-extraction server.
The server only handles top-level frames and fetching one frame as a PNG/node.json artifact. It lacks support for nested frames, pages, components, design tokens, or any mutation, so broader Figma workflows quickly dead-end.
Maintenance
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.
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.72911MIT
- 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,570MIT
- 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 gradedqualityCmaintenanceUnofficial 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
Latest Blog Posts
- Who's Calling? MCP Hosts Are an Identity Blind Spot (And the Spec Knows It)By Om-Shree-0709 on .mcpAgent IdentityOAuth 2.1
- Your AI Chatbot Just Exposed Your CEO's Salary to an InternBy Om-Shree-0709 on .Agent IdentityMCP SecurityOAuth Delegation
- Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)By Om-Shree-0709 on .Agentic AiPrompt InjectionWebAssembly
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/scalably-io/figma-mcp'
If you have feedback or need assistance with the MCP directory API, please join our Discord server