Agent Skills
› davepoon/buildwithclaude
› figma-automation
figma-automation
GitHub通过Rube MCP自动化Figma操作，包括文件检查、组件管理、设计令牌提取、评论处理及图片导出。需先验证连接并搜索工具Schema，注意参数格式与API限制。
Trigger Scenarios
用户需要获取或检查Figma设计文件数据
用户希望从Figma中提取组件或组件集信息
用户需要将设计节点导出为PNG/SVG等图片格式
用户需要从Figma中抽取设计令牌供开发使用
Install
npx skills add davepoon/buildwithclaude --skill figma-automation -g -y
SKILL.md
Frontmatter
{
"name": "figma-automation",
"category": "design",
"requires": {
"mcp": [
"rube"
]
},
"description": "Automate Figma tasks via Rube MCP (Composio): files, components, design tokens, comments, exports. Always search tools first for current schemas."
}
Figma Automation via Rube MCP
Automate Figma operations through Composio's Figma toolkit via Rube MCP.
Toolkit docs: composio.dev/toolkits/figma
Prerequisites
- Rube MCP must be connected (RUBE_SEARCH_TOOLS available)
- Active Figma connection via
RUBE_MANAGE_CONNECTIONSwith toolkitfigma - Always call
RUBE_SEARCH_TOOLSfirst to get current tool schemas
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.
- Verify Rube MCP is available by confirming
RUBE_SEARCH_TOOLSresponds - Call
RUBE_MANAGE_CONNECTIONSwith toolkitfigma - If connection is not ACTIVE, follow the returned auth link to complete Figma auth
- Confirm connection status shows ACTIVE before running any workflows
Core Workflows
1. Get File Data and Components
When to use: User wants to inspect Figma design files or extract component information
Tool sequence:
FIGMA_DISCOVER_FIGMA_RESOURCES- Extract IDs from Figma URLs [Prerequisite]FIGMA_GET_FILE_JSON- Get file data (simplified by default) [Required]FIGMA_GET_FILE_NODES- Get specific node data [Optional]FIGMA_GET_FILE_COMPONENTS- List published components [Optional]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
idsmust 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_previewinstead ofdata
2. Export and Render Images
When to use: User wants to export design assets as images
Tool sequence:
FIGMA_GET_FILE_JSON- Find node IDs to export [Prerequisite]FIGMA_RENDER_IMAGES_OF_FILE_NODES- Render nodes as images [Required]FIGMA_DOWNLOAD_FIGMA_IMAGES- Download rendered images [Optional]FIGMA_GET_IMAGE_FILLS- Get image fill URLs [Optional]
Key parameters:
file_key: File keyids: Comma-separated node IDs to renderformat: 'png', 'svg', 'jpg', or 'pdf'scale: Scale factor (0.01-4.0) for PNG/JPGimages: 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
3. Extract Design Tokens
When to use: User wants to extract design tokens for development
Tool sequence:
FIGMA_EXTRACT_DESIGN_TOKENS- Extract colors, typography, spacing [Required]FIGMA_DESIGN_TOKENS_TO_TAILWIND- Convert to Tailwind config [Optional]
Key parameters:
file_key: File keyinclude_local_styles: Include local styles (default true)include_variables: Include Figma variablestokens: 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
4. Manage Comments and Versions
When to use: User wants to view or add comments, or inspect version history
Tool sequence:
FIGMA_GET_COMMENTS_IN_A_FILE- List all file comments [Optional]FIGMA_ADD_A_COMMENT_TO_A_FILE- Add a comment [Optional]FIGMA_GET_REACTIONS_FOR_A_COMMENT- Get comment reactions [Optional]FIGMA_GET_VERSIONS_OF_A_FILE- Get version history [Optional]
Key parameters:
file_key: File keyas_md: Return comments in Markdown formatmessage: Comment textcomment_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)
5. Browse Projects and Teams
When to use: User wants to list team projects or files
Tool sequence:
FIGMA_GET_PROJECTS_IN_A_TEAM- List team projects [Optional]FIGMA_GET_FILES_IN_A_PROJECT- List project files [Optional]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
Common Patterns
URL Parsing
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)
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
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
Quick Reference
| Task | Tool Slug | Key Params |
|---|---|---|
| Parse URL | FIGMA_DISCOVER_FIGMA_RESOURCES | figma_url |
| Get file JSON | FIGMA_GET_FILE_JSON | file_key, ids, depth |
| Get nodes | FIGMA_GET_FILE_NODES | file_key, ids |
| Render images | FIGMA_RENDER_IMAGES_OF_FILE_NODES | file_key, ids, format |
| Download images | FIGMA_DOWNLOAD_FIGMA_IMAGES | file_key, images |
| Get component | FIGMA_GET_COMPONENT | file_key, node_id |
| File components | FIGMA_GET_FILE_COMPONENTS | file_key |
| Component sets | FIGMA_GET_FILE_COMPONENT_SETS | file_key |
| Design tokens | FIGMA_EXTRACT_DESIGN_TOKENS | file_key |
| Tokens to Tailwind | FIGMA_DESIGN_TOKENS_TO_TAILWIND | tokens |
| File comments | FIGMA_GET_COMMENTS_IN_A_FILE | file_key |
| Add comment | FIGMA_ADD_A_COMMENT_TO_A_FILE | file_key, message |
| File versions | FIGMA_GET_VERSIONS_OF_A_FILE | file_key |
| Team projects | FIGMA_GET_PROJECTS_IN_A_TEAM | team_id |
| Project files | FIGMA_GET_FILES_IN_A_PROJECT | project_id |
| Team styles | FIGMA_GET_TEAM_STYLES | team_id |
| File styles | FIGMA_GET_FILE_STYLES | file_key |
| Image fills | FIGMA_GET_IMAGE_FILLS | file_key |
Powered by Composio
Version History
- 502fc01 Current 2026-07-05 15:04
