Back to Details

figma-automation

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Figma Automation via Rube MCP

通过Rube MCP实现Figma自动化

Automate Figma operations through Composio's Figma toolkit via Rube MCP.
通过Composio的Figma工具包，借助Rube MCP自动化Figma操作。

Prerequisites

前提条件

  • Rube MCP must be connected (RUBE_SEARCH_TOOLS available)
  • Active Figma connection via 
    RUBE_MANAGE_CONNECTIONS
    with toolkit 
    figma
  • Always call 
    RUBE_SEARCH_TOOLS
    first to get current tool schemas
  • 必须已连接Rube MCP（需具备RUBE_SEARCH_TOOLS功能）
  • 通过
    RUBE_MANAGE_CONNECTIONS
    并使用
    figma
    工具包，已建立有效的Figma连接
  • 请始终先调用
    RUBE_SEARCH_TOOLS
    以获取最新的工具schema

Setup

设置步骤

Get Rube MCP: Add 
https://rube.app/mcp
as an MCP server in your client configuration. No API keys needed — just add the endpoint and it works.
  1. Verify Rube MCP is available by confirming 
    RUBE_SEARCH_TOOLS
    responds
  2. Call 
    RUBE_MANAGE_CONNECTIONS
    with toolkit 
    figma
  3. If connection is not ACTIVE, follow the returned auth link to complete Figma auth
  4. Confirm connection status shows ACTIVE before running any workflows
获取Rube MCP：在客户端配置中添加
https://rube.app/mcp
作为MCP服务器。无需API密钥 — 只需添加端点即可使用。
  1. 确认
    RUBE_SEARCH_TOOLS
    能正常响应，以此验证Rube MCP是否可用
  2. 调用
    RUBE_MANAGE_CONNECTIONS
    并指定工具包为
    figma
  3. 如果连接状态未显示为ACTIVE，请按照返回的授权链接完成Figma授权
  4. 在运行任何工作流之前，确认连接状态为ACTIVE

Core Workflows

核心工作流

1. Get File Data and Components

1. 获取文件数据与组件

When to use: User wants to inspect Figma design files or extract component information
Tool sequence:
  1. FIGMA_DISCOVER_FIGMA_RESOURCES
    - Extract IDs from Figma URLs [Prerequisite]
  2. FIGMA_GET_FILE_JSON
    - Get file data (simplified by default) [Required]
  3. FIGMA_GET_FILE_NODES
    - Get specific node data [Optional]
  4. FIGMA_GET_FILE_COMPONENTS
    - List published components [Optional]
  5. FIGMA_GET_FILE_COMPONENT_SETS
    - List component sets [Optional]
Key parameters:
  • file_key
    : File key from URL (e.g., 'abc123XYZ' from figma.com/design/abc123XYZ/...)
  • ids
    : Comma-separated node IDs (NOT an array)
  • depth
    : Tree traversal depth (2 for pages and top-level children)
  • simplify
    : True for AI-friendly format (70%+ size reduction)
Pitfalls:
  • Only supports Design files; FigJam boards and Slides return 400 errors
  • ids
    must be a comma-separated string, not an array
  • Node IDs may be dash-formatted (1-541) in URLs but need colon format (1:541) for API
  • Broad ids/depth can trigger oversized payloads (413); narrow scope or reduce depth
  • Response data may be in 
    data_preview
    instead of 
    data
适用场景：用户需要检查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%以上）
注意事项：
  • 仅支持设计文件；FigJam白板和Slides幻灯片会返回400错误
  • ids
    必须是逗号分隔的字符串，而非数组
  • URL中的节点ID可能是短横线格式（1-541），但API需要使用冒号格式（1:541）
  • 过宽的ids范围或过深的depth会触发过大负载（413错误）；请缩小范围或降低深度
  • 响应数据可能位于
    data_preview
    而非
    data
    字段中

2. Export and Render Images

2. 导出与渲染图片

When to use: User wants to export design assets as images
Tool sequence:
  1. FIGMA_GET_FILE_JSON
    - Find node IDs to export [Prerequisite]
  2. FIGMA_RENDER_IMAGES_OF_FILE_NODES
    - Render nodes as images [Required]
  3. FIGMA_DOWNLOAD_FIGMA_IMAGES
    - Download rendered images [Optional]
  4. FIGMA_GET_IMAGE_FILLS
    - Get image fill URLs [Optional]
Key parameters:
  • file_key
    : File key
  • ids
    : Comma-separated node IDs to render
  • format
    : 'png', 'svg', 'jpg', or 'pdf'
  • scale
    : Scale factor (0.01-4.0) for PNG/JPG
  • images
    : Array of {node_id, file_name, format} for downloads
Pitfalls:
  • Images return as node_id-to-URL map; some IDs may be null (failed renders)
  • URLs are temporary (valid ~30 days)
  • Images capped at 32 megapixels; larger requests auto-scaled down
适用场景：用户需要将设计资产导出为图片格式
工具执行顺序：
  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}
注意事项：
  • 图片会以“节点ID-URL”映射的形式返回；部分ID可能返回null（渲染失败）
  • URL为临时链接（有效期约30天）
  • 图片最大限制为3200万像素；更大的请求会自动缩小尺寸

3. Extract Design Tokens

3. 提取设计令牌

When to use: User wants to extract design tokens for development
Tool sequence:
  1. FIGMA_EXTRACT_DESIGN_TOKENS
    - Extract colors, typography, spacing [Required]
  2. FIGMA_DESIGN_TOKENS_TO_TAILWIND
    - Convert to Tailwind config [Optional]
Key parameters:
  • file_key
    : File key
  • include_local_styles
    : Include local styles (default true)
  • include_variables
    : Include Figma variables
  • tokens
    : Full tokens object from extraction (for Tailwind conversion)
Pitfalls:
  • Tailwind conversion requires the full tokens object including total_tokens and sources
  • Do not strip fields from the extraction response before passing to conversion
适用场景：用户需要提取设计令牌用于开发
工具执行顺序：
  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. Manage Comments and Versions

4. 管理评论与版本

When to use: User wants to view or add comments, or inspect version history
Tool sequence:
  1. FIGMA_GET_COMMENTS_IN_A_FILE
    - List all file comments [Optional]
  2. FIGMA_ADD_A_COMMENT_TO_A_FILE
    - Add a comment [Optional]
  3. FIGMA_GET_REACTIONS_FOR_A_COMMENT
    - Get comment reactions [Optional]
  4. FIGMA_GET_VERSIONS_OF_A_FILE
    - Get version history [Optional]
Key parameters:
  • file_key
    : File key
  • as_md
    : Return comments in Markdown format
  • message
    : Comment text
  • comment_id
    : Comment ID for reactions
Pitfalls:
  • Comments can be positioned on specific nodes using client_meta
  • Reply comments cannot be nested (only one level of replies)
适用场景：用户需要查看或添加评论，或检查版本历史
工具执行顺序：
  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. Browse Projects and Teams

5. 浏览项目与团队

When to use: User wants to list team projects or files
Tool sequence:
  1. FIGMA_GET_PROJECTS_IN_A_TEAM
    - List team projects [Optional]
  2. FIGMA_GET_FILES_IN_A_PROJECT
    - List project files [Optional]
  3. FIGMA_GET_TEAM_STYLES
    - List team published styles [Optional]
Key parameters:
  • team_id
    : Team ID from URL (figma.com/files/team/TEAM_ID/...)
  • project_id
    : Project ID
Pitfalls:
  • Team ID cannot be obtained programmatically; extract from Figma URL
  • Only published styles/components are returned by team endpoints
适用场景：用户需要列出团队项目或文件
工具执行顺序：
  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中提取
  • 团队端点仅返回已发布的样式/组件

Common Patterns

常见模式

URL Parsing

URL解析

Extract IDs from Figma URLs:
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)
从Figma URL中提取ID：
1. 调用FIGMA_DISCOVER_FIGMA_RESOURCES并传入figma_url
2. 从响应中提取file_key, node_id, team_id
3. 将短横线格式的节点ID（1-541）转换为冒号格式（1:541）

Node Traversal

节点遍历

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
1. 调用FIGMA_GET_FILE_JSON并设置depth=2以获取概览
2. 从响应中识别目标节点
3. 再次调用并传入特定ids和更高的depth以获取详细信息

Known Pitfalls

已知注意事项

File Type Support:
  • GET_FILE_JSON only supports Design files (figma.com/design/ or figma.com/file/)
  • FigJam boards (figma.com/board/) and Slides (figma.com/slides/) are NOT supported
Node ID Formats:
  • URLs use dash format: 
    node-id=1-541
  • API uses colon format: 
    1:541
文件类型支持：
  • GET_FILE_JSON仅支持设计文件（figma.com/design/ 或 figma.com/file/）
  • 不支持FigJam白板（figma.com/board/）和Slides幻灯片（figma.com/slides/）
节点ID格式：
  • URL中使用短横线格式：
    node-id=1-541
  • API中使用冒号格式：
    1:541

Quick Reference

快速参考

TaskTool SlugKey Params
Parse URLFIGMA_DISCOVER_FIGMA_RESOURCESfigma_url
Get file JSONFIGMA_GET_FILE_JSONfile_key, ids, depth
Get nodesFIGMA_GET_FILE_NODESfile_key, ids
Render imagesFIGMA_RENDER_IMAGES_OF_FILE_NODESfile_key, ids, format
Download imagesFIGMA_DOWNLOAD_FIGMA_IMAGESfile_key, images
Get componentFIGMA_GET_COMPONENTfile_key, node_id
File componentsFIGMA_GET_FILE_COMPONENTSfile_key
Component setsFIGMA_GET_FILE_COMPONENT_SETSfile_key
Design tokensFIGMA_EXTRACT_DESIGN_TOKENSfile_key
Tokens to TailwindFIGMA_DESIGN_TOKENS_TO_TAILWINDtokens
File commentsFIGMA_GET_COMMENTS_IN_A_FILEfile_key
Add commentFIGMA_ADD_A_COMMENT_TO_A_FILEfile_key, message
File versionsFIGMA_GET_VERSIONS_OF_A_FILEfile_key
Team projectsFIGMA_GET_PROJECTS_IN_A_TEAMteam_id
Project filesFIGMA_GET_FILES_IN_A_PROJECTproject_id
Team stylesFIGMA_GET_TEAM_STYLESteam_id
File stylesFIGMA_GET_FILE_STYLESfile_key
Image fillsFIGMA_GET_IMAGE_FILLSfile_key
任务工具标识关键参数
解析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