Automate Figma tasks via Rube MCP (Composio): files, components, design tokens, comments, exports. Always search tools first for current schemas.
Automates Figma file operations, component extraction, design token generation, and image exports through Rube MCP integration.
/plugin marketplace add davepoon/buildwithclaude/plugin install all-skills@buildwithclaudeThis skill inherits all available tools. When active, it can use any tool Claude has access to.
Automate Figma operations through Composio's Figma toolkit via Rube MCP.
Toolkit docs: composio.dev/toolkits/figma
RUBE_MANAGE_CONNECTIONS with toolkit figmaRUBE_SEARCH_TOOLS first to get current tool schemasGet 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.
RUBE_SEARCH_TOOLS respondsRUBE_MANAGE_CONNECTIONS with toolkit figmaWhen 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:
ids must be a comma-separated string, not an arraydata_preview instead of dataWhen 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 downloadsPitfalls:
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:
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 reactionsPitfalls:
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 IDPitfalls:
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)
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
File Type Support:
Node ID Formats:
node-id=1-5411:541| 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
Activates when the user asks about AI prompts, needs prompt templates, wants to search for prompts, or mentions prompts.chat. Use for discovering, retrieving, and improving prompts.
Search, retrieve, and install Agent Skills from the prompts.chat registry using MCP tools. Use when the user asks to find skills, browse skill catalogs, install a skill for Claude, or extend Claude's capabilities with reusable AI agent components.
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.