Figma Automation

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_CONNECTIONS with toolkit figma
• Always call RUBE_SEARCH_TOOLS first 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.

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

Core Workflows

1. Get File Data and Components

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

2. Export and Render Images

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

3. Extract Design Tokens

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