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.

• Verify Rube MCP is available by confirming RUBE_SEARCH_TOOLS responds

• Call RUBE_MANAGE_CONNECTIONS with toolkit figma

• 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

• 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:

• 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 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:

• FIGMA_EXTRACT_DESIGN_TOKENS

• Extract colors, typography, spacing [Required]

• 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

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 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)

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