mcpField
F
figma-automation

figma-automation

github.com/davepoon设计与 UI3.7k124 次安装1 天前更新
代码仓库

关于 figma-automation

figma-automation 是通过 Composio 自动处理 Figma 文件检查和设计任务的技能，帮助用户获取设计数据、导出资源、提取设计令牌并管理评论和项目。

主要功能

  1. 01获取文件、节点和组件数据
  2. 02渲染并下载设计图像
  3. 03提取令牌并转换为 Tailwind 配置
  4. 04查看评论和版本历史
  5. 05浏览团队项目和文件

适用场景

  1. 01检查设计文件中的指定节点
  2. 02将设计节点导出为图像文件
  3. 03提取颜色、字体和间距
  4. 04查看文件评论和版本

MCP 相关

通过 Rube MCP 访问 Composio 的 Figma 工具包。运行工作流前需连接 Rube MCP 并完成 Figma 账户认证。

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/davepoon/buildwithclaude --skill figma-automation

安装后在 Claude Code 中输入/figma-automation确认已加载。

详细介绍

通过 Rube MCP 自动化 Figma

通过 Rube MCP 使用 Composio 的 Figma 工具包自动执行 Figma 操作。

工具包文档：composio.dev/toolkits/figma

前提条件

  • 必须已连接 Rube MCP（可用 RUBE_SEARCH_TOOLS）
  • 通过 RUBE_MANAGE_CONNECTIONS 建立有效的 Figma 连接，并使用工具包 figma
  • 务必先调用 RUBE_SEARCH_TOOLS，获取当前工具架构

设置

获取 Rube MCP：在客户端配置中将 https://rube.app/mcp 添加为 MCP 服务。无需 API 密钥——添加端点即可使用。

  1. 确认 RUBE_SEARCH_TOOLS 有响应，以验证 Rube MCP 是否可用
  2. 使用工具包 figma 调用 RUBE_MANAGE_CONNECTIONS
  3. 如果连接状态不是 ACTIVE，请按照返回的授权链接完成 Figma 授权
  4. 运行任何工作流前，确认连接状态显示为 ACTIVE

核心工作流

1. 获取文件数据和组件

适用场景：用户想检查 Figma 设计文件或提取组件信息

工具调用顺序：

  1. FIGMA_DISCOVER_FIGMA_RESOURCES - 从 Figma URL 中提取 ID［前置步骤］
  2. FIGMA_GET_FILE_JSON - 获取文件数据（默认简化）［必需］
  3. FIGMA_GET_FILE_NODES - 获取特定节点数据［可选］
  4. FIGMA_GET_FILE_COMPONENTS - 列出已发布的组件［可选］
  5. FIGMA_GET_FILE_COMPONENT_SETS - 列出组件集［可选］

关键参数：

  • file_key：URL 中的文件密钥（例如，来自 figma.com/design/abc123XYZ/... 的 'abc123XYZ'）
  • ids：以逗号分隔的节点 ID（不是数组）
  • depth：树遍历深度（页面及其顶层子项设为 2）
  • simplify：设为 True 可使用适合 AI 的格式（体积减少 70% 以上）

注意事项：

  • 仅支持 Design 文件；FigJam 白板和 Slides 会返回 400 错误
  • ids 必须是逗号分隔的字符串，不能是数组
  • URL 中的节点 ID 可能使用连字符格式（1-541），但 API 需要冒号格式（1:541）
  • 范围较广的 ids/depth 可能导致负载过大（413）；请缩小范围或降低深度
  • 响应数据可能位于 data_preview 中，而不是 data
2. 导出和渲染图像

适用场景：用户想将设计资源导出为图像

工具调用顺序：

  1. FIGMA_GET_FILE_JSON - 查找要导出的节点 ID［前置步骤］
  2. FIGMA_RENDER_IMAGES_OF_FILE_NODES - 将节点渲染为图像［必需］
  3. FIGMA_DOWNLOAD_FIGMA_IMAGES - 下载渲染后的图像［可选］
  4. FIGMA_GET_IMAGE_FILLS - 获取图像填充 URL［可选］

关键参数：

  • file_key：文件密钥
  • ids：要渲染的节点 ID，以逗号分隔
  • format：'png'、'svg'、'jpg' 或 'pdf'
  • scale：PNG/JPG 的缩放比例（0.01-4.0）
  • images：用于下载的 {node_id, file_name, format} 数组

注意事项：

  • 图像以 node_id 到 URL 的映射形式返回；某些 ID 可能为 null（渲染失败）
  • URL 是临时的（有效期约 30 天）
  • 图像上限为 32 兆像素；超出限制的请求会自动缩小
3. 提取设计令牌

适用场景：用户想为开发提取设计令牌

工具调用顺序：

  1. FIGMA_EXTRACT_DESIGN_TOKENS - 提取颜色、排版和间距［必需］
  2. FIGMA_DESIGN_TOKENS_TO_TAILWIND - 转换为 Tailwind 配置［可选］

关键参数：

  • file_key：文件密钥
  • include_local_styles：包含本地样式（默认为 true）
  • include_variables：包含 Figma 变量
  • tokens：提取所得的完整令牌对象（用于转换为 Tailwind）

注意事项：

  • 转换为 Tailwind 需要完整的令牌对象，其中包括 total_tokens 和 sources
  • 传递给转换工具前，不要从提取响应中删除字段
4. 管理评论和版本

适用场景：用户想查看或添加评论，或检查版本历史

工具调用顺序：

  1. FIGMA_GET_COMMENTS_IN_A_FILE - 列出文件中的所有评论［可选］
  2. FIGMA_ADD_A_COMMENT_TO_A_FILE - 添加评论［可选］
  3. FIGMA_GET_REACTIONS_FOR_A_COMMENT - 获取评论的回应［可选］
  4. FIGMA_GET_VERSIONS_OF_A_FILE - 获取版本历史［可选］

关键参数：

  • file_key：文件键
  • as_md：以 Markdown 格式返回评论
  • message：评论内容
  • comment_id：用于获取回应的评论 ID

注意事项：

  • 可使用 client_meta 将评论定位到特定节点
  • 回复评论不能嵌套（只能有一层回复）
5. 浏览项目和团队

适用场景：用户想列出团队项目或文件

工具调用顺序：

  1. FIGMA_GET_PROJECTS_IN_A_TEAM - 列出团队项目［可选］
  2. FIGMA_GET_FILES_IN_A_PROJECT - 列出项目文件［可选］
  3. FIGMA_GET_TEAM_STYLES - 列出团队已发布的样式［可选］

关键参数：

  • team_id：从 URL 获取的团队 ID（figma.com/files/team/TEAM_ID/...）
  • project_id：项目 ID

注意事项：

  • 无法通过编程方式获取团队 ID；请从 Figma URL 中提取
  • 团队端点只会返回已发布的样式和组件

常见模式

URL 解析

从 Figma URL 中提取 ID：

1. Call FIGMA_DISCOVER_FIGMA_RESOURCES with figma_url
2. Extract file_key, node_id, team_id from response
3. Convert dash-format node IDs (1-541) to colon format (1:541)
节点遍历
1. Call FIGMA_GET_FILE_JSON with depth=2 for overview
2. Identify target nodes from the response
3. Call again with specific ids and higher depth for details

已知注意事项

文件类型支持：

  • GET_FILE_JSON 仅支持 Design 文件（figma.com/design/ 或 figma.com/file/）
  • 不支持 FigJam 白板（figma.com/board/）和 Slides（figma.com/slides/）

节点 ID 格式：

  • URL 使用连字符格式：node-id=1-541
  • API 使用冒号格式：1:541

快速参考

任务工具别名关键参数
解析 URLFIGMA_DISCOVER_FIGMA_RESOURCESfigma_url
获取文件 JSONFIGMA_GET_FILE_JSONfile_key, ids, depth
获取节点FIGMA_GET_FILE_NODESfile_key, ids
渲染图像FIGMA_RENDER_IMAGES_OF_FILE_NODESfile_key, ids, format
下载图像FIGMA_DOWNLOAD_FIGMA_IMAGESfile_key, images
获取组件FIGMA_GET_COMPONENTfile_key, node_id
文件组件FIGMA_GET_FILE_COMPONENTSfile_key
组件集FIGMA_GET_FILE_COMPONENT_SETSfile_key
设计令牌FIGMA_EXTRACT_DESIGN_TOKENSfile_key
将令牌转换为 TailwindFIGMA_DESIGN_TOKENS_TO_TAILWINDtokens
文件评论FIGMA_GET_COMMENTS_IN_A_FILEfile_key
添加评论FIGMA_ADD_A_COMMENT_TO_A_FILEfile_key, message
文件版本FIGMA_GET_VERSIONS_OF_A_FILEfile_key
团队项目FIGMA_GET_PROJECTS_IN_A_TEAMteam_id
项目文件FIGMA_GET_FILES_IN_A_PROJECTproject_id
团队样式FIGMA_GET_TEAM_STYLESteam_id
文件样式FIGMA_GET_FILE_STYLESfile_key
图像填充FIGMA_GET_IMAGE_FILLSfile_key

由 Composio 提供支持

评论

支持 Markdown