sunnyside-figma-context-mcp

用途

Sunnyside Figma Context MCP 是一个 Model Context Protocol（MCP）服务端，用于在 Figma 设计与 AI 驱动的开发工作流之间建立桥梁。它提供 27 个专用工具，可从 Figma 设计中提取代码、设计令牌与组件结构。

主要能力

支持两条数据通道：Figma 插件（保真度最高，适用于任意套餐包括 Drafts）与 Figma REST API（无头方式，需要团队/项目文件）。
插件桥接工具：get_JSON（返回布局、填充、描边、效果、变量、设计令牌以及每个图层的 CSS）、get_figma_dev_history（列出历史提取记录）、get_Basic_CSS（根级 CSS）、get_All_Layers_CSS（每个图层的 CSS）。
代码生成工具：get_react_component（TypeScript React + CSS module）、get_tailwind_component（带 Tailwind 类的 React 单文件组件）、get_styled_component（React + styled-components）。
设计令牌生命周期工具：extract_design_tokens、simulate_token_change（试运行令牌修改）、analyze_token_change_impact（影响面分析）、apply_token_change、rollback_token_change、generate_migration_code、track_design_system_health（覆盖率与冲突报告）。
Figma REST API 工具：get_figma_data（原始文件或节点 JSON）、get_figma_page_structure（页面级树）、download_figma_images（批量导出 SVG/PNG/JPG）、analyze_figma_components（组件检测）。需要 FIGMA_API_KEY 与文件访问权限，不支持 Drafts。
Figma Dev Mode 工具（仅 Professional 套餐）：check_figma_dev_connection、get_figma_dev_mode_code（官方 React + Tailwind 生成器），对接 Figma 官方 Dev Mode MCP Server（localhost:3845）。

使用方式

先决条件：Node.js 18+ 与 Figma Personal Access Token。安装命令：

git clone https://github.com/tercumantanumut/sunnysideFigma-Context-MCP cd sunnysideFigma-Context-MCP npm install npm run build

环境配置（.env）：

FIGMA_API_KEY=figd_your_token_here PORT=3333 OUTPUT_FORMAT=json

启动服务：npm start，服务运行于 http://localhost:3333，SSE 端点为 /sse，HTTP 端点为 /mcp。

MCP 客户端可配置为 SSE、stdio 或 HTTP 传输。SSE 传输适用于插件与 MCP 工具共享提取状态的场景：

{ "mcpServers": { "sunnyside-figma": { "type": "sse", "url": "http://localhost:3333/sse" } } }

stdio 传输适用于无插件集成的无头使用：

{ "mcpServers": { "sunnyside-figma": { "type": "stdio", "command": "node", "args": [ "/absolute/path/to/sunnysideFigma-Context-MCP/dist/cli.js", "--stdio" ], "env": { "FIGMA_API_KEY": "figd_your_token_here" } } } }

HTTP 传输：

{ "mcpServers": { "sunnyside-figma": { "type": "http", "url": "http://localhost:3333/mcp" } } }

Figma 插件设置：打开 Figma Desktop → Plugins → Development → Import plugin from manifest…，选择仓库中的 figma-dev-plugin/manifest.json，在任意文件上运行插件，选择 frame 后点击 Extract Dev Code，插件会把提取数据发送到 http://localhost:3333/plugin/* 端点。

开发命令包括：npm run dev（watch 模式构建）、npm run dev:cli（stdio 开发循环）、npm run type-check、npm run lint、npm test、npm run inspect（打开 MCP inspector UI）、npm run build。

适用场景

从 Figma 选区提取结构化数据并生成 React、Tailwind 或 styled-components 组件代码。
设计系统审计：扫描整个项目、提取设计令牌并检查健康指标（令牌覆盖率、冲突、孤立令牌）。
安全的令牌迁移：先模拟令牌变更、分析影响面、生成迁移代码，确认安全后再应用。
无头批量导出资源：通过 fileKey 与 nodeIds 批量导出 SVG/PNG/JPG。
多图层 CSS 提取：获取所有图层的 CSS 并组装为带类名的 CSS module。

限制

Figma REST API 工具不支持 Drafts，文件需位于团队/项目中；若返回 404 或超时，可能是文件在 Drafts 或令牌权限不足。
Figma Dev Mode 工具需要 Figma Professional 套餐，且需在 Figma Desktop 中启用本地 MCP Server，服务器运行在 localhost:3845；免费套餐用户应改用插件桥接工具。
若出现 "No extracted data available"，通常因插件未发送数据或客户端使用了 stdio（独立进程），需改用 SSE 传输以共享状态。
默认端口 3333 被占用时，可在 .env 中修改 PORT（如 3334）并同步更新 MCP 客户端 URL。插件向 localhost:3333 硬编码发送数据，若使用其他端口需修改插件代码。
令牌模拟未显示变化时，需检查模拟列表、应用模拟并重新从 Figma 插件提取。
部分工具的具体参数与返回结构在资料中有示例，但其他未列明的工具细节暂未提供。

技能介绍

用途

主要能力

使用方式

适用场景

限制