figma-context-mcp-server

0 starsCommunity

Install to Claude Code

This server doesn't publish a one-line install command. Follow the setup in the source repository.

Summary

Converts Figma design data into structured semantic analysis JSON and screenshots for AI agents to use in design-to-code workflows.

README.md

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.)

工具列表

增强工具（带语义分析）

| 工具 | 说明 | |------|------| | figma_get_page_context | 主入口。截图 + 结构化分析 JSON（容器聚合、CSS、布局、重复检测） | | figma_analyze_structure | 仅结构化分析 JSON（不含截图）。已有截图时使用 |

直通代理（Figma MCP 原生能力）

| 工具 | 说明 | |------|------| | figma_get_screenshot | 获取节点截图 | | figma_get_metadata | 获取节点层级树 (XML) | | figma_get_design_context | 获取原始参考代码 (React JSX + Tailwind) | | figma_get_variables | 获取设计变量 / Token |

文件操作工具

| 工具 | 说明 | |------|------| | figma_download_assets | 分析节点并下载所有图片/SVG 到本地 | | figma_fetch_all | 一次性导出全部数据 (metadata + context + screenshot + analysis) |

使用

前置条件

Figma Desktop App 已打开
Figma MCP 服务已启用 (http://127.0.0.1:3845/mcp)
Node.js >= 18

构建

npm install
npm run build

MCP 配置

{
  "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 个工具注册