Figma Mcp By Bao To Generate Design Systems & Tokens In Repos Quickly For Ai Agents

注意： 此服务是原始 Framelink Figma MCP 服务的一个分支，在其基础上为 AI 驱动的设计工作流提供了增强功能。我们感谢原始 Framelink 团队奠定的基础，并向他们致以谢意。

有何不同

这不仅仅是又一个 Figma 数据提取工具。它是一个智能设计系统生成、分析和文档平台，能够深入解析你的 Figma 文件：

全面生成设计系统文档

• 独特的端到端解决方案：唯一能够根据 Figma 链接自动生成丰富、多维度设计系统文档的 MCP。内容包括深入的组件分析、交互式概览、验证报告、无障碍检查和令牌规范，并通过智能方式整合在一起。
• 不断演进的设计系统中心：将静态 Figma 文件转变为动态、可探索且易于维护的设计系统知识库。

组件智能分析

• 语义理解：分析 Figma 组件，了解其结构、变体和关系
• 智能推断属性：自动检测组件属性，并将其映射到 TypeScript 接口
• 原子设计分类：将组件归类为原子、分子和有机体，构建可扩展的架构
• 实现就绪度：指出哪些组件已经可以构建，哪些还需要补充规范

面向 AI 优化的工作流与开发者体验

• 非常适合 AI Agent：Cursor、Claude 和其他 AI 工具可获取语义化组件数据，而不是原始 JSON
• 一条命令完成设置：从 Figma 链接到完整的设计系统文档和令牌
• 设计与代码同步：自动检查，确保设计与实现保持一致
• 内置无障碍功能：自动进行 WCAG 合规检查并包含正确的 ARIA 角色
• 简化操作流程：只需少量操作，即可从 Figma 链接生成整套设计系统资源，包括令牌、完整文档和验证报告。

通过此模型上下文协议服务 Bao To 的 Figma MCP 服务，让 Cursor 和其他 AI 驱动的编码工具访问你的 Figma 文件。

与粘贴截图等替代方案相比，Cursor 在获取 Figma 设计数据后，能够显著更准确地实现设计。

演示

观看使用 Figma 设计数据在 Cursor 中构建 UI 的演示

工作原理

1. 打开 IDE 的聊天窗口（例如 Cursor 中的 Agent 模式）。
2. 粘贴 Figma 文件、画板或组的链接。
3. 让 AI Agent 使用 Figma 文件完成某项任务，例如实现设计。
4. 配置为使用 Figma MCP Server by Bao To 的 AI Agent 会通过此服务从 Figma 获取相关元数据，并据此编写代码。

此 MCP 服务旨在简化并转换 Figma API 的响应，只向 AI 模型提供最相关的布局和样式信息。

减少提供给模型的上下文，有助于提高 AI 的准确性，让响应更切合需求。

主要功能

AI 驱动的开发

• 组件智能分析：理解 Figma 组件结构、变体及其关系
• 原子设计分类：将组件分类为原子、分子和有机体
• 智能属性推断：分析组件变体以了解组件属性
• 无障碍集成：识别无障碍要求和最佳实践

设计令牌提取

• 完整令牌分析：提取颜色、排版、间距、圆角和效果
• 智能分类：自动对相关令牌分组（主色、文字大小等）
• 推导变量：为非 Enterprise 账户提供 Enterprise Variables API 的替代方案
• 多种导出格式：JSON、CSS Variables、Tailwind、Style Dictionary、Figma Tokens

设计系统工具

• 全面的文档：生成包含组件示例的设计系统文档
• 版本比较：跟踪设计系统版本之间的变化
• 验证与治理：检查一致性并确保符合最佳实践
• WCAG 合规性：通过正确的对比度计算进行真实的无障碍分析
• 设计与代码同步：确保设计令牌与代码实现一致

可用工具

设计令牌提取

• get_figma_data - 提取完整的 Figma 文件结构和设计数据
• download_figma_images - 下载 Figma 中的图片、图标和图形
• get_figma_variables - 获取 Figma Variables（重要：仅限 Enterprise 计划）
• generate_design_tokens - 提取并整理设计令牌（颜色、排版、间距、效果）

组件智能分析

• analyze_figma_components - **全新！**面向 AI 驱动开发的智能组件分析

📚 设计系统管理

• generate_design_system_doc - 生成全面的设计系统文档
• compare_design_tokens - 比较不同文件或版本之间的设计令牌
• validate_design_system - 验证设计系统的一致性和最佳实践
• check_accessibility - 通过实际对比度计算检查 WCAG 无障碍合规性
• migrate_tokens - 将令牌转换为不同格式（Tailwind、CSS Variables、Style Dictionary）
• check_design_code_sync - 比较设计令牌与代码实现

🎯 全新：高级设计系统工具

• 设计令牌比较（compare_design_tokens）：

  • 比较不同 Figma 文件或版本之间的设计令牌
  • 识别新增、删除和修改的令牌，并详细跟踪变更
  • 非常适合设计系统版本控制和迁移规划
  • 输出结构化比较报告，便于团队协作

• 设计系统验证（validate_design_system）：

  • 根据设计系统最佳实践和规则验证设计令牌
  • 检查颜色命名约定、字体排版比例的一致性和间距模式
  • 在问题和不一致之处进入生产环境前将其识别出来
  • 提供切实可行的建议，帮助改进设计系统

• 无障碍合规检查器（check_accessibility）：

  • 分析设计令牌中的无障碍合规问题
  • 检查文本大小、颜色对比度和触控目标大小
  • 针对改进 WCAG 合规性提供具体建议
  • 是构建包容、无障碍数字产品的必备工具

• 多格式令牌迁移（migrate_tokens）：

  • 将设计令牌转换为常用格式：Tailwind、CSS Variables、Style Dictionary、Figma Tokens
  • 与现有开发工作流和工具无缝集成
  • 在不同格式间保留令牌关系和语义
  • 支持大型设计系统的批量转换

• 设计与代码同步检查器（check_design_code_sync）：

  • 比较 Figma 设计令牌与代码库中的实际令牌
  • 识别设计规范与实现之间的差异
  • 支持 JSON、JavaScript 和 TypeScript 令牌文件格式
  • 帮助保持设计与开发之间的完美一致

将此服务与 AI Agent 配合使用

要充分发挥 Figma MCP Server by Bao To 的功能，尤其是其设计系统生成工具的强大能力，你需要有效地引导 AI Agent（如 Cursor）。方法如下：

1. 指定此服务：

   • 开始任务时，确保 AI 客户端已配置为使用“Figma MCP Server by Bao To”（如“入门”部分所示）。
   • 如果 AI Agent 支持在多个 MCP 服务之间选择，或你给它的提示较为宽泛，可能需要明确说明：“Figma 相关任务请使用‘Figma MCP Server by Bao To’。” 或引用其 npm 包名称：“请使用 MCP 服务 @tothienbao6a0/figma-mcp-server。”

2. 请求特定工具：

   • 获取基本 Figma 数据：“获取 [Figma 链接] 的 Figma 数据。”（Agent 可能会使用 get_figma_data）。
   • 获取 Figma 变量 ⚠️ 仅限 Enterprise：“使用‘Figma MCP Server by Bao To’获取 [Figma 链接] 中的变量。” 接下来，Agent 应调用 get_figma_variables 工具。注意：此功能仅适用于 Figma Enterprise 套餐。
   • 生成设计令牌：“使用‘Figma MCP Server by Bao To’为 [Figma 链接] 生成设计令牌。” 接下来，Agent 应调用 generate_design_tokens 工具。
   • 通过推导变量生成设计令牌：“使用‘Figma MCP Server by Bao To’为 [Figma 链接] 生成设计令牌，并分析推导出的变量。” Agent 应在调用 generate_design_tokens 时设置 includeDeducedVariables: true。这为非 Enterprise 用户提供了一种变通方案，以获取类似变量的结构。
   • 生成设计系统文档：“使用‘Figma MCP Server by Bao To’为 [Figma 链接] 生成设计系统文档。” 接下来，Agent 应调用 generate_design_system_doc 工具。

3. 提供必要参数：

   • fileKey：始终提供 Figma 文件链接。Agent 和服务可以提取 fileKey。
   • scope（用于 get_figma_variables）：⚠️ 仅限 Enterprise - 可选参数，用于指定获取“local”变量（默认值，即文件中的所有变量）还是“published”变量（仅发布到团队库的变量）。
   • outputFilePath（用于 get_figma_variables 和 generate_design_tokens）/ outputDirectoryPath（用于 generate_design_system_doc）：
     • 这些工具允许你指定生成文件的保存位置。
     • 如果你希望将文档、令牌或变量直接保存到当前项目中（例如 /docs 或 /tokens 文件夹），请告诉 Agent：
       • “从 [Figma 链接] 获取变量，并将其保存为项目 src/design-system 文件夹中的 variables.json。”
       • “为 [Figma 链接] 生成设计系统文档，并将其保存到当前项目的 docs/design_system 文件夹中。”
       • “为 [Figma 链接] 生成设计令牌，并将 JSON 文件保存为项目 src/style-guide 文件夹中的 design-tokens.json。”
     • 随后，AI Agent 应确定项目子文件夹的绝对路径，并在调用相应工具时将其作为 outputDirectoryPath 或 outputFilePath 提供。
     • 如果你未指定路径，这些工具会将输出保存到临时系统目录（依据文档中说明的默认行为），并告知 Agent 该路径。随后，Agent 可以帮助你获取这些文件。

Agent 提示词示例：

“嘿，AI，请使用 Bao To 的 Figma MCP Server，为 https://www.figma.com/design/yourFileKey/Your-Project-Name 生成完整的设计系统文档。我希望将输出保存到当前项目根目录下新建的 figma_docs 文件夹中。”

明确说明需求，有助于 AI Agent 使用正确的参数调用此服务的相应工具，从而为你的开发工作流启用其高级功能。

开始使用

你可以将 AI 编码客户端（如 Cursor）配置为使用此 MCP 服务。在客户端的 MCP 服务配置文件中添加以下内容，并将 YOUR-KEY 替换为你的 Figma API 密钥。

注意：使用此服务需要创建 Figma 访问令牌。创建 Figma API 访问令牌的说明请参见此处。

MacOS / Linux

{
  "mcpServers": {
    "Figma MCP Server by Bao To": {
      "command": "npx",
      "args": ["-y", "@tothienbao6a0/figma-mcp-server", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

Windows

{
  "mcpServers": {
    "Figma MCP Server by Bao To": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "@tothienbao6a0/figma-mcp-server", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

此操作将使用 npx 从 npm 下载并运行 @tothienbao6a0/figma-mcp-server 软件包。-y 标志会自动同意 npx 提出的所有提示。

或者，你也可以先全局安装软件包（不过，CLI 工具通常更推荐使用 npx，这样无需全局安装即可确保使用最新版本）：

npm install -g @tothienbao6a0/figma-mcp-server

然后，将客户端配置为直接将 @tothienbao6a0/figma-mcp-server 用作命令。

让生成的设计系统更易读

使用此 MCP 服务生成设计令牌和文档时，你会发现 Figma 的内部 ID（例如 fill-hxq15en）会让系统难以维护。生成的设计系统文档内容详尽，多个文件和章节中散布着内部 ID。以下工作流可将这些 ID 的所有实例转换为语义化、易读的令牌：

语义映射工作流

1. 生成初始设计系统

   • 使用 MCP 服务生成初始设计令牌和文档
   • 你将获得多个包含 Figma 内部 ID 的文件：
     • 设计令牌 JSON
     • CSS 变量
     • 组件文档
     • 样式指南
     • 用法示例

2. 准备颜色系统截图

   • 在 Figma 中，导航到颜色样式页面
   • 截取清晰的屏幕截图，显示：
     • 所有颜色色块
     • 颜色名称和值
     • 颜色分组／层级
   • 保存此截图以供参考

3. 使用 AI 创建全面的语义映射

   • 在 Cursor 中分享颜色系统截图
   • 请 AI 执行全面映射
   • 示例提示词：

     "我有一张 Figma 颜色系统的截图，以及生成的设计系统文件。
     请帮助我为整个文档中所有内部 ID 的所有实例创建语义映射：
     1. 首先，分析图像中的颜色系统，了解每种颜色的语义含义
     2. 然后，搜索所有生成的文件，查找每个内部 ID 的所有实例
     3. 创建 ID 与语义名称之间的完整映射
     4. 更新以下内容中的所有出现位置：
        - 令牌文件
        - CSS 变量
        - 组件文档
        - 用法示例
        - 样式指南
     5. 确保整个设计系统的一致性
     6. 生成其他文档，包括：
        - 语义令牌的使用指南
        - 不同上下文（组件、主题）的示例
        - 实现最佳实践
        - 常见模式和组合
        - 无障碍注意事项"
     

   • AI 将会：
     • 直观分析你的颜色系统
     • 搜索每个 ID 的所有实例
     • 创建全面的映射
     • 更新所有文件中的每个出现位置
     • 保持整体一致性
     • 创建辅助文档

4. 生成的文件 AI 将创建／更新所有相关文件：

   • token-mapping.json - 完整的 ID 到语义名称映射
   • design_variables.css - 更新后的 CSS 变量
   • 所有使用语义名称的文档文件
   • 使用新令牌名称的组件示例
   • 包含语义引用的样式指南

全面转换示例

转换前（分布于多个文件中）：

/* design_variables.css */
--fill-hxq15en: #556AEB;
--stroke-heus4w0: #B9C4FF;

/* component_examples.md */
Use `var(--fill-hxq15en)` for primary actions
Border: 1px solid var(--stroke-heus4w0)

/* style_guide.md */
| fill-hxq15en | Primary blue | #556AEB |

转换后：

/* design_variables.css */
--color-primary-500: #556AEB;
--stroke-primary-light: #B9C4FF;

/* component_examples.md */
Use `var(--color-primary-500)` for primary actions
Border: 1px solid var(--stroke-primary-light)

/* style_guide.md */
| color-primary-500 | Primary blue | #556AEB |

最佳实践

1. 颜色系统截图

   • 确保所有颜色都清晰可见
   • 包含完整的命名系统
   • 显示完整的颜色层级
   • 捕捉任何使用指南

2. 语义命名

   • 使用一致且基于用途的名称
   • 遵循清晰的命名层级
   • 记录颜色之间的关系
   • 包含使用场景

3. 全面更新

   • 确认所有实例均已更新
   • 检查所有文档文件
   • 查看所有组件示例
   • 验证所有引用

4. 维护

   • 保持截图为最新版本
   • 需要时重新执行完整映射
   • 确认所有文件的一致性
   • 记录任何手动覆盖

AI 还将生成其他文档，帮助开发者正确使用语义令牌，包括使用指南以及不同上下文（组件、主题等）的示例。

贡献

要在 AI Agent 中使用这些工具，请使用以下提示词：

• 提取全面的设计数据："使用“Figma MCP Server by Bao To”分析 [Figma link] 中的设计系统。" 随后，Agent 应调用 get_figma_data 工具。
• 下载特定图片："使用“Figma MCP Server by Bao To”下载 [Figma link] 中的图标和图片。" 随后，Agent 应调用 download_figma_images 工具。
• 提取变量（仅限 Enterprise）："使用“Figma MCP Server by Bao To”获取 [Figma link] 中的变量。" 随后，Agent 应调用 get_figma_variables 工具。
• 生成设计令牌："使用“Figma MCP Server by Bao To”为 [Figma link] 生成设计令牌。" 随后，Agent 应调用 generate_design_tokens 工具。
• 生成包含推断变量的设计令牌："使用“Figma MCP Server by Bao To”为 [Figma link] 生成设计令牌，并进行推断变量分析。" Agent 应调用 generate_design_tokens，并设置 includeDeducedVariables: true。这为非 Enterprise 用户提供了一种变通方案，以获取类似变量的结构。
• 生成全面的文档："使用“Figma MCP Server by Bao To”为 [Figma link] 生成设计系统文档。" 随后，Agent 应调用 generate_design_system_doc 工具。

🎯 高级设计系统工具用法

• 比较不同版本之间的设计令牌："使用“Figma MCP Server by Bao To”比较 [Figma link 1] 和 [Figma link 2] 中的设计令牌。" Agent 应调用 compare_design_tokens 工具。
• 验证设计系统合规性："使用“Figma MCP Server by Bao To”验证 [Figma link] 的设计系统合规性。" Agent 应调用 validate_design_system 工具。
• 检查无障碍合规性："使用“Figma MCP Server by Bao To”检查 [Figma link] 的无障碍合规性。" Agent 应调用 check_accessibility 工具。
• 将令牌迁移为其他格式："使用“Figma MCP Server by Bao To”将 [Figma link] 中的设计令牌转换为 Tailwind 格式。" Agent 应调用 migrate_tokens 工具，并指定目标格式。
• 检查设计与代码的同步情况："使用“Figma MCP Server by Bao To”检查 [Figma link] 中的设计令牌是否与我的代码令牌文件 [file path] 同步。" Agent 应调用 check_design_code_sync 工具。

计划限制

⚠️ 关于 Figma Variables API 的重要说明

get_figma_variables 函数需要 Figma Enterprise 计划。此限制由 Figma 施加，而非此 MCP 服务：

• 所有计划均可使用：get_figma_data、download_figma_images、generate_design_tokens、generate_design_system_doc
• 仅限 Enterprise：get_figma_variables（Variables REST API 访问权限）

此限制存在的原因：

• Figma 仅允许 Enterprise 计划访问 Variables API
• Starter、Professional 或 Organization 计划的用户会收到 403 Forbidden 错误
• 这是 Figma 为推动 Enterprise 销售而做出的商业决策

非 Enterprise 用户的替代方案：

• 使用 generate_design_tokens 并设置 includeDeducedVariables: true——分析设计令牌以创建类似变量的结构（新增的变通功能）
• 使用 generate_design_tokens（标准模式）——从设计中提取类似的样式信息
• 使用 Figma 的 Plugin API（需要构建自定义插件）
• 从 Figma UI 手动导出变量

有关详情，请参阅 Figma 关于计划功能的官方文档。