Figma Automation

1---
2name: figma-automation
3description: "Automate Figma tasks via Rube MCP (Composio): files, components, design tokens, comments, exports. Always search tools first for current schemas."
4requires:
5  mcp: [rube]
6---
7 
8# Figma Automation via Rube MCP
9 
10Automate Figma operations through Composio's Figma toolkit via Rube MCP.
11 
12## Prerequisites
13 
14- Rube MCP must be connected (RUBE_SEARCH_TOOLS available)
15- Active Figma connection via `RUBE_MANAGE_CONNECTIONS` with toolkit `figma`
16- Always call `RUBE_SEARCH_TOOLS` first to get current tool schemas
17 
18## Setup
19 
20**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.
21 
22 
231. Verify Rube MCP is available by confirming `RUBE_SEARCH_TOOLS` responds
242. Call `RUBE_MANAGE_CONNECTIONS` with toolkit `figma`
253. If connection is not ACTIVE, follow the returned auth link to complete Figma auth
264. Confirm connection status shows ACTIVE before running any workflows
27 
28## Core Workflows
29 
30### 1. Get File Data and Components
31 
32**When to use**: User wants to inspect Figma design files or extract component information
33 
34**Tool sequence**:
351. `FIGMA_DISCOVER_FIGMA_RESOURCES` - Extract IDs from Figma URLs [Prerequisite]
362. `FIGMA_GET_FILE_JSON` - Get file data (simplified by default) [Required]
373. `FIGMA_GET_FILE_NODES` - Get specific node data [Optional]
384. `FIGMA_GET_FILE_COMPONENTS` - List published components [Optional]
395. `FIGMA_GET_FILE_COMPONENT_SETS` - List component sets [Optional]
40 
41**Key parameters**:
42- `file_key`: File key from URL (e.g., 'abc123XYZ' from figma.com/design/abc123XYZ/...)
43- `ids`: Comma-separated node IDs (NOT an array)
44- `depth`: Tree traversal depth (2 for pages and top-level children)
45- `simplify`: True for AI-friendly format (70%+ size reduction)
46 
47**Pitfalls**:
48- Only supports Design files; FigJam boards and Slides return 400 errors
49- `ids` must be a comma-separated string, not an array
50- Node IDs may be dash-formatted (1-541) in URLs but need colon format (1:541) for API
51- Broad ids/depth can trigger oversized payloads (413); narrow scope or reduce depth
52- Response data may be in `data_preview` instead of `data`
53 
54### 2. Export and Render Images
55 
56**When to use**: User wants to export design assets as images
57 
58**Tool sequence**:
591. `FIGMA_GET_FILE_JSON` - Find node IDs to export [Prerequisite]
602. `FIGMA_RENDER_IMAGES_OF_FILE_NODES` - Render nodes as images [Required]
613. `FIGMA_DOWNLOAD_FIGMA_IMAGES` - Download rendered images [Optional]
624. `FIGMA_GET_IMAGE_FILLS` - Get image fill URLs [Optional]
63 
64**Key parameters**:
65- `file_key`: File key
66- `ids`: Comma-separated node IDs to render
67- `format`: 'png', 'svg', 'jpg', or 'pdf'
68- `scale`: Scale factor (0.01-4.0) for PNG/JPG
69- `images`: Array of {node_id, file_name, format} for downloads
70 
71**Pitfalls**:
72- Images return as node_id-to-URL map; some IDs may be null (failed renders)
73- URLs are temporary (valid ~30 days)
74- Images capped at 32 megapixels; larger requests auto-scaled down
75 
76### 3. Extract Design Tokens
77 
78**When to use**: User wants to extract design tokens for development
79 
80**Tool sequence**:
811. `FIGMA_EXTRACT_DESIGN_TOKENS` - Extract colors, typography, spacing [Required]
822. `FIGMA_DESIGN_TOKENS_TO_TAILWIND` - Convert to Tailwind config [Optional]
83 
84**Key parameters**:
85- `file_key`: File key
86- `include_local_styles`: Include local styles (default true)
87- `include_variables`: Include Figma variables
88- `tokens`: Full tokens object from extraction (for Tailwind conversion)
89 
90**Pitfalls**:
91- Tailwind conversion requires the full tokens object including total_tokens and sources
92- Do not strip fields from the extraction response before passing to conversion
93 
94### 4. Manage Comments and Versions
95 
96**When to use**: User wants to view or add comments, or inspect version history
97 
98**Tool sequence**:
991. `FIGMA_GET_COMMENTS_IN_A_FILE` - List all file comments [Optional]
1002. `FIGMA_ADD_A_COMMENT_TO_A_FILE` - Add a comment [Optional]
1013. `FIGMA_GET_REACTIONS_FOR_A_COMMENT` - Get comment reactions [Optional]
1024. `FIGMA_GET_VERSIONS_OF_A_FILE` - Get version history [Optional]
103 
104**Key parameters**:
105- `file_key`: File key
106- `as_md`: Return comments in Markdown format
107- `message`: Comment text
108- `comment_id`: Comment ID for reactions
109 
110**Pitfalls**:
111- Comments can be positioned on specific nodes using client_meta
112- Reply comments cannot be nested (only one level of replies)
113 
114### 5. Browse Projects and Teams
115 
116**When to use**: User wants to list team projects or files
117 
118**Tool sequence**:
1191. `FIGMA_GET_PROJECTS_IN_A_TEAM` - List team projects [Optional]
1202. `FIGMA_GET_FILES_IN_A_PROJECT` - List project files [Optional]
1213. `FIGMA_GET_TEAM_STYLES` - List team published styles [Optional]
122 
123**Key parameters**:
124- `team_id`: Team ID from URL (figma.com/files/team/TEAM_ID/...)
125- `project_id`: Project ID
126 
127**Pitfalls**:
128- Team ID cannot be obtained programmatically; extract from Figma URL
129- Only published styles/components are returned by team endpoints
130 
131## Common Patterns
132 
133### URL Parsing
134 
135Extract IDs from Figma URLs:
136```
1371. Call FIGMA_DISCOVER_FIGMA_RESOURCES with figma_url
1382. Extract file_key, node_id, team_id from response
1393. Convert dash-format node IDs (1-541) to colon format (1:541)
140```
141 
142### Node Traversal
143 
144```
1451. Call FIGMA_GET_FILE_JSON with depth=2 for overview
1462. Identify target nodes from the response
1473. Call again with specific ids and higher depth for details
148```
149 
150## Known Pitfalls
151 
152**File Type Support**:
153- GET_FILE_JSON only supports Design files (figma.com/design/ or figma.com/file/)
154- FigJam boards (figma.com/board/) and Slides (figma.com/slides/) are NOT supported
155 
156**Node ID Formats**:
157- URLs use dash format: `node-id=1-541`
158- API uses colon format: `1:541`
159 
160## Quick Reference
161 
162| Task | Tool Slug | Key Params |
163|------|-----------|------------|
164| Parse URL | FIGMA_DISCOVER_FIGMA_RESOURCES | figma_url |
165| Get file JSON | FIGMA_GET_FILE_JSON | file_key, ids, depth |
166| Get nodes | FIGMA_GET_FILE_NODES | file_key, ids |
167| Render images | FIGMA_RENDER_IMAGES_OF_FILE_NODES | file_key, ids, format |
168| Download images | FIGMA_DOWNLOAD_FIGMA_IMAGES | file_key, images |
169| Get component | FIGMA_GET_COMPONENT | file_key, node_id |
170| File components | FIGMA_GET_FILE_COMPONENTS | file_key |
171| Component sets | FIGMA_GET_FILE_COMPONENT_SETS | file_key |
172| Design tokens | FIGMA_EXTRACT_DESIGN_TOKENS | file_key |
173| Tokens to Tailwind | FIGMA_DESIGN_TOKENS_TO_TAILWIND | tokens |
174| File comments | FIGMA_GET_COMMENTS_IN_A_FILE | file_key |
175| Add comment | FIGMA_ADD_A_COMMENT_TO_A_FILE | file_key, message |
176| File versions | FIGMA_GET_VERSIONS_OF_A_FILE | file_key |
177| Team projects | FIGMA_GET_PROJECTS_IN_A_TEAM | team_id |
178| Project files | FIGMA_GET_FILES_IN_A_PROJECT | project_id |
179| Team styles | FIGMA_GET_TEAM_STYLES | team_id |
180| File styles | FIGMA_GET_FILE_STYLES | file_key |
181| Image fills | FIGMA_GET_IMAGE_FILLS | file_key |
182