figma-context-mcp-server
Integrates with Figma's MCP server to extract design data, analyze structure, and provide enhanced semantic analysis and screenshots for AI agents.
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-context-mcp-serveranalyze the current Figma page"
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-context-mcp-server
Figma 设计数据 → 结构化语义树 + 截图
代理 Figma Desktop MCP Server,将原始设计数据转换为结构化的语义分析 JSON,供 AI Agent 直接用于设计稿还原。
架构
Figma Desktop App (port 3845)
↓ Streamable HTTP
figma-context-mcp-server (stdio)
↓ 增强输出
AI Agent (Gemini / Claude / etc.)Related MCP server: Figma MCP Server
工具列表
增强工具(带语义分析)
工具 | 说明 |
| 主入口。截图 + 结构化分析 JSON(容器聚合、CSS、布局、重复检测) |
| 仅结构化分析 JSON(不含截图)。已有截图时使用 |
直通代理(Figma MCP 原生能力)
工具 | 说明 |
| 获取节点截图 |
| 获取节点层级树 (XML) |
| 获取原始参考代码 (React JSX + Tailwind) |
| 获取设计变量 / Token |
文件操作工具
工具 | 说明 |
| 分析节点并下载所有图片/SVG 到本地 |
| 一次性导出全部数据 (metadata + context + screenshot + analysis) |
使用
前置条件
Figma Desktop App 已打开
Figma MCP 服务已启用 (http://127.0.0.1:3845/mcp)
Node.js >= 18
构建
npm install
npm run buildMCP 配置
{
"mcpServers": {
"figma-context": {
"command": "node",
"args": ["path/to/dist/index.cjs"]
}
}
}源码结构
src/
├── index.ts ← 入口 (McpServer + StdioServerTransport)
├── schemas.ts ← Zod schema 定义
├── figma-mcp.ts ← Figma Desktop MCP 通信层
├── analyzer.ts ← 语义分析核心 (从 semantic-analyze.mjs v3.1 移植)
└── tools.ts ← 8 个工具注册Available Tools
5 toolsfigma_analyze_structure分析 Figma 节点结构ARead-onlyIdempotent
仅获取结构化分析 JSON(不含截图)。适合在已有截图的情况下补充获取结构数据。
输出包含:容器聚合、精确 CSS 样式、布局方向推断、重复模式检测、资源 URL 列表。
Args:
node_id (string, 必填): Figma 节点 ID
Returns: 结构化语义分析 JSON。
| Name | Required | Description | Default |
|---|---|---|---|
| node_id | Yes | Figma 节点 ID,如 "0:118" 或 "0-118"。从 Figma URL 的 node-id 参数提取 |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnlyHint, idempotentHint, destructiveHint=false, and openWorldHint, so the safety profile is covered. The description adds real value by listing the analysis categories produced (container aggregation, CSS styles, layout inference, repeated-pattern detection, resource URLs) and reaffirming no screenshot is returned.
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?
Front-loaded with the key differentiator (JSON only, no screenshot), then output contents, Args, and Returns in a scan-friendly layout. Minor redundancy between the '输出包含' list and the 'Returns' line, but no wasted 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?
With no output schema, the description carries the burden of describing returns and does so adequately via the analysis categories. For a single-parameter read tool with full annotation coverage, nothing critical is missing, though it could note behavior for large/deep nodes.
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 the schema already explains extraction from the Figma URL node-id parameter in more detail than the description. The description merely restates node_id as required, adding nothing beyond the structured field, so the baseline 3 applies.
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+resource (get structured analysis JSON for a Figma node) and explicitly excludes screenshots, which distinguishes it cleanly from figma_get_screenshot. It enumerates what the analysis contains, so an agent knows exactly what it returns without opening a schema.
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?
It names the condition for use — '适合在已有截图的情况下补充获取结构数据' (use when a screenshot already exists and you want supplementary structural data) — and rules out screenshot retrieval. It doesn't cite sibling tools by name, so the routing is implied rather than explicit.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
figma_download_assets下载 Figma 设计资源到本地AIdempotent
分析指定节点并将所有图片/SVG 资源下载到本地目录。
流程:
获取 metadata + design-context
运行语义分析,提取 assets 列表
通过 localhost URL 下载每个资源文件
返回下载结果摘要
Args:
node_id (string, 必填): Figma 节点 ID
out_dir (string, 必填): 资源保存目录
Returns: 下载摘要(成功/失败数量,文件列表)。
| Name | Required | Description | Default |
|---|---|---|---|
| node_id | Yes | Figma 节点 ID,先分析该节点获取 assets 列表 | |
| out_dir | Yes | 资源保存目录路径(相对于工作区根目录或绝对路径) |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare openWorldHint, idempotentHint, and non-destructive mutation, so the description's flow (fetch, analyze, download via localhost) provides some useful context about internal steps and authentication-like localhost URLs. However, it does not reveal what gets written, whether existing files are overwritten, or any rate limits, which are important for a non–read-only operation.
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 structured with a clear flow list and parameter/return sections, and it is front-loaded with the main action. It is slightly repetitive (e.g., repeating parameter names from schema) but overall efficient.
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 annotations covering safety hints and no output schema, the description provides the core process and return summary. However, it omits details about file overwrite behavior, error handling, permissions needed for localhost downloads, and any workspace path constraints, leaving gaps for a write operation.
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 schema already documents both parameters fully. The description repeats the same parameter names with '必填' but adds no additional syntax or format details beyond what the schema provides.
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 and resource ('分析指定节点并将所有图片/SVG 资源下载到本地目录') and clearly distinguishes it from siblings like figma_get_screenshot or figma_analyze_structure by emphasizing the download-to-local action.
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?
Usage is implied by '分析指定节点' and the download flow, but there are no explicit when-to-use/when-not-use statements or alternative tools mentioned. An agent can infer the context but is not given guidance on choosing this tool over siblings.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
figma_get_page_context获取 Figma 页面完整上下文ARead-onlyIdempotent
获取指定 Figma 节点的完整设计上下文,包括:
截图(image 类型,直接可视)
结构化语义分析 JSON(容器聚合、精确样式、重复模式检测)
资源列表(所有图片 URL)
这是还原 Figma 设计稿的主入口。输出完整的结构化数据,包含精确的 CSS 值、文本内容、 图片资源 URL、容器层级关系、布局方向和重复模式标记。
Args:
node_id (string, 必填): Figma 节点 ID,如 "0:118" 或 "0-118"
Returns: 截图 + 结构化分析 JSON,可直接用于组件还原。
| Name | Required | Description | Default |
|---|---|---|---|
| node_id | Yes | Figma 节点 ID,如 "0:118" 或 "0-118"。从 Figma URL 的 node-id 参数提取 |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already cover the safety profile (readOnly, idempotent, non-destructive, open-world), so the bar is lower. The description still adds meaningful context beyond them: it discloses the return payload composition (a directly viewable screenshot plus a semantic JSON with CSS values, text, image URLs, container hierarchy, layout direction, and repeated-pattern flags), which is genuinely useful since no output schema exists.
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 numbered list is well front-loaded and structured, and the Args/Returns sections are clean. However, the return contents are stated twice — once in the bullet list and again in the following paragraph ('精确的 CSS 值...容器层级关系...重复模式标记') — which is avoidable repetition.
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, the description carries the return-value burden and does so adequately, enumerating the three payload components and their key contents. The lone parameter is fully documented in both schema and description. It is nearly complete for a one-parameter composite read tool; only an explicit sibling comparison is missing.
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?
With a single parameter at 100% schema description coverage, the schema already documents node_id fully, including the '0:118' / '0-118' formats and the advice to extract it from the URL's node-id param. The description only repeats the same example IDs, adding no semantics 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?
States a specific verb+resource (get full design context for a Figma node) and enumerates exactly what that context contains — screenshot, structured semantic JSON, and asset URLs. Calling itself 'the main entry point for restoring Figma designs' gives a clear role, though it never explicitly contrasts itself with the overlapping siblings (figma_get_screenshot, figma_analyze_structure, figma_download_assets) whose functionality it appears to bundle.
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?
'This is the main entry point' is an implied usage signal that an agent would likely follow, but there is no explicit when-to-use vs. when-to-prefer-a-sibling guidance, despite three siblings covering screenshot, structure analysis, and asset download separately. Usage is inferable but not spelled out.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
figma_get_screenshot获取 Figma 节点截图BRead-onlyIdempotent
获取指定 Figma 节点的截图 (image/png)。
Args:
node_id (string, 必填): Figma 节点 ID
Returns: 截图 image。
| Name | Required | Description | Default |
|---|---|---|---|
| node_id | Yes | Figma 节点 ID,如 "0:118" 或 "0-118"。从 Figma URL 的 node-id 参数提取 |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnlyHint, idempotentHint, destructiveHint=false and openWorldHint, so the safety profile is covered. The description adds the return media type (image/png) and that the payload is an image, which matters because there is no output schema, but it says nothing about size, scaling, or resolution behavior.
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?
Short and front-loaded, with purpose in the first clause. The Args/Returns blocks mostly duplicate the schema and annotation information rather than earning their space, keeping it just under top marks.
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 one-parameter read-only tool with full annotation coverage, the description covers purpose, the required input, and the return type. It lacks sibling differentiation and any note on image scaling/options, which are the only real gaps.
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 the single parameter is fully documented in the schema, including the URL node-id extraction hint that the description omits. The description merely restates the parameter name, so baseline 3 applies.
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+resource: retrieve a screenshot of a specified Figma node, with output format (image/png) named. It does not differentiate itself from siblings such as figma_download_assets, which is the closest overlap, so it stops short of a 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?
There is no when-to-use guidance, no prerequisites, and no mention of alternatives. An agent cannot tell from the description alone why it should call this rather than figma_download_assets or figma_get_page_context.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
figma_get_variables获取 Figma 设计变量 (Design Tokens)ARead-onlyIdempotent
获取节点关联的设计变量定义,如颜色、间距、字体等复用值。
输出示例: {'icon/default/secondary': #949494, 'spacing/md': 16px}
适合提取设计系统 token。
Args:
node_id (string, 必填): Figma 节点 ID
Returns: 变量定义列表。
| Name | Required | Description | Default |
|---|---|---|---|
| node_id | Yes | Figma 节点 ID,如 "0:118" 或 "0-118"。从 Figma URL 的 node-id 参数提取 |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
注解已声明 readOnlyHint=true、idempotentHint=true 和安全特性。描述中增加了输出示例(token 键值对)和返回值描述,提供了一些操作结果透明度,但未说明速率限制、认证要求或开放世界行为等额外上下文。注解已覆盖安全特性,因此评分 3 是合适的。
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?
结构清晰,含示例、参数说明和返回值说明,句子均简洁。略有冗余(例如同时列出参数名和类型),但整体无冗长内容,且用途说明前置。
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?
对于无输出架构的简单单参数只读工具,描述补充了输出示例和返回值说明,足以让代理正确调用。但由于未解释变量可能不存在时的行为或服务限制,并未达到 5 分。
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?
架构描述覆盖率达 100%,因此参数已在模式中完整记录(包括从 Figma URL 提取的提示)。描述中列出了参数名和类型,但并未超出模式提供额外含义。在模式承担主要说明的情况下,3 分符合基准。
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?
明确以动词+资源开头('获取...设计变量定义')并提供具体示例(颜色、间距、字体)。它并未明确区分兄弟姐妹工具如 figma_get_page_context,但核心意图是清晰的。
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?
提到'适合提取设计系统 token',给出了隐含的使用场景,但未指明何时使用或不使用此工具,也未提及替代方案(例如,获取页面上下文或截图)。
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.
5 tool updates
v1.0.0- First observed
figma_analyze_structure - First observed
figma_download_assets - First observed
figma_get_page_context - First observed
figma_get_screenshot - First observed
figma_get_variables
TDQS
Scored across 5 tools
The tools have fairly distinct purposes: get_page_context is a full extraction, get_screenshot and analyze_structure are partial extractions, and the remaining tools handle variables and asset downloads. However, get_page_context overlaps with get_screenshot and analyze_structure as a superset, so an agent might occasionally wonder whether to use the combined tool or the partial ones.
All tool names use a consistent figma_ prefix followed by a snake_case verb_noun pattern (get_page_context, get_screenshot, analyze_structure, get_variables, download_assets). The convention is predictable and easy to scan.
Five tools is well-scoped for a Figma context extraction server. Each tool covers a meaningful operation without excessive granularity or missing convenience methods.
The surface covers the main read-only extraction needs: full context, screenshot, structural analysis, variables, and asset downloads. Minor gaps exist, such as no dedicated text-only or CSS-only extraction, but those are effectively covered by the composite tool.
Maintenance
Related MCP Connectors
UI design from prompts, screenshots, and URLs for AI coding agents and theme tokens.
The Figma MCP server brings Figma design context directly into your AI workflow.
Serves your design system and coding standards to coding agents, so they stop guessing.
- miromiroOAuthapp.miromiro
Turn any live website into brand colors, fonts, design tokens, SVGs, Lottie and paste-ready code.
Related MCP Servers
- AlicenseNot gradedqualityDmaintenanceProvides AI coding agents with access to Figma design data through the Figma API. Enables accurate one-shot implementation of designs in any framework by translating Figma files into simplified layout and styling information.4 npm1MIT
- FlicenseNot gradedqualityDmaintenanceConnects AI applications to Figma API for extracting design data, generating production-ready HTML/CSS from designs, and capturing screenshots in multiple formats.1,330 npm-
- AlicenseNot gradedqualityDmaintenanceConnects Figma designs to AI agents, enabling extraction of production-ready code, assets, and design tokens through natural language descriptions. Supports React, Vue, CSS, and Tailwind with real-time design system analysis.55,619 npm40MIT
- AlicenseNot gradedqualityDmaintenanceEnables AI agents to extract design systems, analyze components, and maintain design-code consistency from Figma files, providing intelligent component analysis and accessibility compliance.150 npm30MIT