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-server analyze 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 设计数据 → 结构化语义树 + 截图
代理 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（不含截图）。已有截图时使用 |
工具 | 说明 |
| 获取节点截图 |
| 获取节点层级树 (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 build{
"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 个工具注册仅获取结构化分析 JSON（不含截图）。适合在已有截图的情况下补充获取结构数据。
输出包含：容器聚合、精确 CSS 样式、布局方向推断、重复模式检测、资源 URL 列表。
Args:
node_id (string, 必填): Figma 节点 ID
Returns: 结构化语义分析 JSON。
Inputs: node_id (required).
分析指定节点并将所有图片/SVG 资源下载到本地目录。
流程：
获取 metadata + design-context
运行语义分析，提取 assets 列表
通过 localhost URL 下载每个资源文件
返回下载结果摘要
Args:
node_id (string, 必填): Figma 节点 ID
out_dir (string, 必填): 资源保存目录
Returns: 下载摘要（成功/失败数量，文件列表）。
Inputs: node_id (required), out_dir (required).
获取指定 Figma 节点的完整设计上下文，包括：
截图（image 类型，直接可视）
结构化语义分析 JSON（容器聚合、精确样式、重复模式检测）
资源列表（所有图片 URL）
这是还原 Figma 设计稿的主入口。输出完整的结构化数据，包含精确的 CSS 值、文本内容、 图片资源 URL、容器层级关系、布局方向和重复模式标记。
Args:
node_id (string, 必填): Figma 节点 ID，如 "0:118" 或 "0-118"
Returns: 截图 + 结构化分析 JSON，可直接用于组件还原。
Inputs: node_id (required).
获取指定 Figma 节点的截图 (image/png)。
Args:
node_id (string, 必填): Figma 节点 ID
Returns: 截图 image。
Inputs: node_id (required).
获取节点关联的设计变量定义，如颜色、间距、字体等复用值。
输出示例： {'icon/default/secondary': #949494, 'spacing/md': 16px}
适合提取设计系统 token。
Args:
node_id (string, 必填): Figma 节点 ID
Returns: 变量定义列表。
Inputs: node_id (required).
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
Loading tool schema changelog…
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.
UI design from prompts, screenshots, and URLs for AI coding agents and theme tokens.
Deterministic Figma to Elementor, Gutenberg, Oxygen, Etch and HTML layouts for AI assistants.
Compare Figma designs against live websites and get visual + content QA reports, from inside Claude.
Serves your design system and coding standards to coding agents, so they stop guessing.
