Sunnyside Figma 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插件（一次）：

1. 打开Figma桌面→ 插件→ 发展→ 从清单导入插件…
2. 挑选 figma-dev-plugin/manifest.json 从这个回购。
3. 在任何文件上运行插件。选择一个框架→ 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限制。

Figma REST API工具

要求 FIGMA_API_KEY +令牌可以看到的文件。 不要处理草稿 --先将文件移动到团队/项目中。

设计令牌生命周期

令牌注册表+如果设计系统的模拟发生变化怎么办。

Figma开发模式（官方）——仅限专业计划

连接到Figma官方开发模式MCP服务器的桥梁 localhost:3845。需要在桌面应用程序中启用开发模式的Figma Professional计划。

效用

______________________________________________________________________

典型工作流程

从选择中生成组件

1. 在Figma中，选择框架。
2. 在插件中，单击 提取开发代码.
3. 问你的经纪人： _“从最新提取中生成React+Tailwind组件。”_ → calls get_tailwind_component.

审核设计系统

1. 点击 扫描整个项目 在插件中。
2. 问： _“总结此项目的设计标记并标记冲突。”_ → calls get_plugin_project_overview + extract_design_tokens + track_design_system_health.

安全地提出令牌更改

1. simulate_token_change → analyze_token_change_impact → 审查。
2. apply_token_change 如果安全， rollback_token_change 撤消。
3. 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.