Name: Figma设计转代码服务
Author: tercumantanumut

使用说明

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.

使用说明

Sunnyside Figma MCP

快速开始

连接MCP客户端

stdio（客户端生成进程）

SSE（使用Figma插件时推荐）

可流式传输的HTTP

工具参考（27个工具）

插件桥接工具——先使用这些

Figma REST API工具

设计令牌生命周期

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

效用

典型工作流程

建筑

故障排除

发展

贡献

许可证

相关 MCP

Figma MCP集成工具

设计转代码服务

Figma设计转代码工作流服务

色彩管理服务器

Figma设计聊天工具

Figma设计自动化工具