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

快速参考

任务	工具别名	关键参数
解析 URL	FIGMA_DISCOVER_FIGMA_RESOURCES	figma_url
获取文件 JSON	FIGMA_GET_FILE_JSON	file_key, ids, depth
获取节点	FIGMA_GET_FILE_NODES	file_key, ids
渲染图像	FIGMA_RENDER_IMAGES_OF_FILE_NODES	file_key, ids, format
下载图像	FIGMA_DOWNLOAD_FIGMA_IMAGES	file_key, images
获取组件	FIGMA_GET_COMPONENT	file_key, node_id
文件组件	FIGMA_GET_FILE_COMPONENTS	file_key
组件集	FIGMA_GET_FILE_COMPONENT_SETS	file_key
设计令牌	FIGMA_EXTRACT_DESIGN_TOKENS	file_key
将令牌转换为 Tailwind	FIGMA_DESIGN_TOKENS_TO_TAILWIND	tokens
文件评论	FIGMA_GET_COMMENTS_IN_A_FILE	file_key
添加评论	FIGMA_ADD_A_COMMENT_TO_A_FILE	file_key, message
文件版本	FIGMA_GET_VERSIONS_OF_A_FILE	file_key
团队项目	FIGMA_GET_PROJECTS_IN_A_TEAM	team_id
项目文件	FIGMA_GET_FILES_IN_A_PROJECT	project_id
团队样式	FIGMA_GET_TEAM_STYLES	team_id
文件样式	FIGMA_GET_FILE_STYLES	file_key
图像填充	FIGMA_GET_IMAGE_FILLS	file_key

---

由 Composio 提供支持