](https://mseep.ai/app/tercumantanumut-sunnysidefigma-context-mcp)
Sunnyside Figma MCP
将Figma设计转化为生产代码的模型上下文协议（MCP）服务器。它附带了配套的Figma插件，因此LLM客户端可以读取您实际查看的层，提取像素完美的CSS和设计标记，并生成React/Tailwind/样式化组件输出——所有这些都可以从自然语言提示符中完成。
支持两条数据路径：
- 插件桥 --最高的保真度。使用Figma的本地
getCSSAsync()从编辑内部。适用于任何计划，甚至草稿。 - Figma REST API --作品无头从一个
fileKey/nodeId对于团队/项目中的设计，您可以使用个人访问令牌进行访问。
______________________________________________________________________
快速开始
需求：节点18+，Figma个人访问令牌(在此处创建一个).
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运行HTTP/SSE服务器：
npm start
# → http://localhost:3333
# SSE: /sse
# Streamable HTTP: /mcp安装Figma插件（一次）：
- 打开Figma桌面→ 插件→ 发展→ 从清单导入插件…
- 挑选
figma-dev-plugin/manifest.json从这个回购。 - 在任何文件上运行插件。选择一个框架→ click 提取开发代码.
你会看到 “数据已成功发送到MCP服务器” 当桥是活的。
______________________________________________________________________
连接MCP客户端
挑选 一 运输。两者都在同一台运行的服务器上公开了相同的27个工具。
stdio（客户端生成进程）
如果您希望客户端拥有生命周期，并且不需要Figma插件桥与MCP进程共享状态，请使用此选项。
{
"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"
}
}
}
}SSE（使用Figma插件时推荐）
该插件将摘录发布到 http://localhost:3333/plugin/*。将MCP客户端指向同一进程，以便两者共享提取缓冲区。
{
"mcpServers": {
"sunnyside-figma": {
"type": "sse",
"url": "http://localhost:3333/sse"
}
}
}可流式传输的HTTP
{
"mcpServers": {
"sunnyside-figma": {
"type": "http",
"url": "http://localhost:3333/mcp"
}
}
}______________________________________________________________________
工具参考（27个工具）
插件桥接工具——先使用这些
这些读取了Figma插件填充的缓冲区。最快，最高保真度，无API限制。
| 工具 | 退货 |
|---|---|
get_figma_dev_history | 过去提取的列表（名称、id、布局） |
get_Basic_CSS | 根元素CSS通过 getCSSAsync() |
get_All_Layers_CSS | 选择中每一层的CSS |
get_JSON | 结构化：id、填充、变量、设计标记、， allLayersCSS — 最高信号单呼叫 |
get_react_component | TypeScript React+CSS模块 |
get_tailwind_component | React+Tailwind类（任意值） |
get_styled_component | React+风格的组件 |
get_plugin_project_overview | 完整扫描项目的摘要（需要 扫描整个项目 在插件中） |
analyze_app_structure | 扫描项目的架构分解 |
Figma REST API工具
要求 FIGMA_API_KEY +令牌可以看到的文件。 不要处理草稿 --先将文件移动到团队/项目中。
| 工具 | 使用 |
|---|---|
get_figma_data | 原始文件或节点JSON |
get_figma_page_structure | 用于定位的页面级树 |
get_figma_project_overview | 团队/项目级总结 |
analyze_figma_components | 跨文件的组件检测 |
download_figma_images | 批量SVG/PNG导出到磁盘 |
设计令牌生命周期
令牌注册表+如果设计系统的模拟发生变化怎么办。
| 工具 | 使用 |
|---|---|
extract_design_tokens | 从当前选择构建令牌目录 |
build_dependency_graph | 映射哪些层消耗哪些令牌 |
debug_token_registry | 检查当前注册表状态 |
track_design_system_health | 覆盖范围/冲突报告 |
simulate_token_change | 试运行重命名/值更改 |
analyze_token_change_impact | 拟议变更的爆炸半径报告 |
apply_token_change | 提交模拟更改 |
rollback_token_change | 还原已应用的更改 |
list_token_simulations | 列出分阶段模拟 |
generate_migration_code | 为更改生成codemod样式的输出 |
Figma开发模式（官方）——仅限专业计划
连接到Figma官方开发模式MCP服务器的桥梁 localhost:3845。需要在桌面应用程序中启用开发模式的Figma Professional计划。
| 工具 | 使用 |
|---|---|
check_figma_dev_connection | 探测开发模式服务器 |
get_figma_dev_mode_code | Figma自有发电机的React+Tailwind |
效用
| 工具 | 使用 |
|---|---|
generate_codegen_plugin | 构建一个新的Figma开发模式代码生成器插件 |
______________________________________________________________________
典型工作流程
从选择中生成组件
- 在Figma中，选择框架。
- 在插件中，单击 提取开发代码.
- 问你的经纪人： _“从最新提取中生成React+Tailwind组件。”_ → calls
get_tailwind_component.
审核设计系统
- 点击 扫描整个项目 在插件中。
- 问： _“总结此项目的设计标记并标记冲突。”_ → calls
get_plugin_project_overview+extract_design_tokens+track_design_system_health.
安全地提出令牌更改
simulate_token_change→analyze_token_change_impact→ 审查。apply_token_change如果安全，rollback_token_change撤消。generate_migration_code以产生代码迁移。
无头出口
- 给你的代理一个Figma URL（复制链接到选择）。它解析
fileKey+nodeId和电话get_figma_data/download_figma_images.
______________________________________________________________________
建筑
┌───────────────────┐ POST /plugin/* ┌──────────────────────┐
│ Figma Plugin │ ─────────────────────▶ │ │
│ (figma-dev-plugin) │ HTTP server :3333 │
└───────────────────┘ │ ├─ /sse (MCP SSE) │
│ ├─ /mcp (MCP HTTP)│
┌───────────────────┐ MCP (SSE / HTTP / │ └─ extraction cache │
│ MCP client │ stdio) │ │
│ (Claude, Selene, │ ◀──────────────────────│ │
│ Cursor, etc.) │ └──────────────────────┘
└───────────────────┘ │
│ optional
▼
┌──────────────────────┐
│ Figma REST API │
│ Figma Dev Mode :3845│
└──────────────────────┘- HTTP服务器和MCP端点位于 同一节点进程，因此插件的提取缓冲区和MCP工具共享内存。这就是为什么SSE是插件运行时推荐的传输方式。
- stdio模式为每个客户端生成一个新进程 不会 请参阅从单独运行的服务器提取插件。如果需要共享状态，请使用SSE/HTTP。
______________________________________________________________________
故障排除
“没有可用的提取数据” --重新打开插件并单击 提取开发代码。如果客户端是stdio，请切换到SSE，以便它与插件服务器共享状态。
Figma REST工具超时/404 --这份文件很可能是草稿。将其移动到团队/项目中，或使用插件路径。
check_figma_dev_connection 失败 --需要在Figma桌面中启用Figma专业+开发模式MCP服务器（首选项→ 启用本地MCP服务器）。免费计划用户应该坚持使用插件工具。
服务器无法启动：3333 --另一个进程被绑定。改变 PORT 在 .env 并相应地更新您的MCP客户端URL。
会话错误命中 /mcp 直接用卷发 --流式HTTP传输需要初始化会话(initialize → notifications/initialized)之前 tools/list.MCP客户端会自动处理此问题。
______________________________________________________________________
发展
npm run dev # tsup watch build
npm run dev:cli # stdio dev loop
npm run type-check # tsc --noEmit
npm run lint
npm test # jest
npm run inspect # open @modelcontextprotocol/inspector项目布局：
src/
├─ cli.ts # entrypoint (HTTP + stdio)
├─ mcp.ts # tool registration
├─ server.ts # Express + MCP transport wiring
├─ tools/
│ ├─ plugin-tools.ts # plugin-bridge tools
│ ├─ figma-codegen-tools.ts # React / Tailwind / styled-components
│ ├─ figma-dev-tools.ts # official Dev Mode bridge
│ ├─ design-system-tools.ts # token lifecycle
│ └─ figma-api-tools.ts # REST API
└─ services/
└─ plugin-integration.ts # /plugin/* endpoints + extraction cache
figma-dev-plugin/ # companion Figma plugin (manifest + UI + code)______________________________________________________________________
贡献
PR欢迎。跑 npm run lint && npm test && npm run build 在开业之前。保持工具表面倾斜——如果添加新工具，请检查是否与现有工具重叠。
许可证
看 许可证基于Framelink MCP的概念构建，但存在显著差异；专有条款。商业咨询： Umut TANtercumantanumut@gmail.com.