Open Skills Logo
Open Skills

figma-automation

通过Rube MCP（Composio）自动化Figma任务：文件、组件、设计令牌、评论、导出。始终优先搜索工具以获取当前架构信息。

查看详情
name:figma-automationdescription:"Automate Figma tasks via Rube MCP (Composio): files, components, design tokens, comments, exports. Always search tools first for current schemas."requires:mcp:[rube]

Figma Automation via Rube MCP

Automate Figma operations through Composio's Figma toolkit via Rube MCP.

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
  • Extract file_key, node_id, team_id from response

  • 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
  • Identify target nodes from the response

  • 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

    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