Automate Figma Design Operations

This is a skill for automating Figma operations through Composio's Figma toolkit, accessed via Rube MCP once an active Figma connection is authenticated through RUBE_MANAGE_CONNECTIONS. It covers five core workflows: getting file data and components (FIGMA_GET_FILE_JSON with a simplify flag for an AI-friendly format that cuts payload size by 70%+, plus listing published components and component sets), exporting and rendering images (PNG/SVG/JPG/PDF at a configurable scale, capped at 32 megapixels, with URLs valid for about 30 days), extracting design tokens (colors, typography, spacing, optionally converted straight to Tailwind config), managing comments and version history, and browsing team projects, files, and published styles. A representative URL-parsing pattern resolves the identifiers every other workflow needs:

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)

Use this skill when automating Figma file inspection, asset export, design-token extraction, comment/version management, or team/project browsing through Rube MCP once the connection is confirmed ACTIVE. Always call RUBE_SEARCH_TOOLS first to get current tool schemas. It only supports Design files (figma.com/design/ or figma.com/file/) - FigJam boards and Slides return 400 errors, so it is not the right tool for those file types. Design-token-to-Tailwind conversion specifically requires passing the full, unmodified tokens object from extraction, including total_tokens and sources - stripping fields before conversion breaks it.

Input is a Figma URL or file/team/project key; output is file JSON data, rendered image URLs, extracted design tokens (optionally as Tailwind config), comment threads, version history, or team/project/style listings. Known pitfalls: node IDs must be passed as a comma-separated string rather than an array, node IDs appear dash-formatted in URLs (1-541) but need colon format for the API (1:541), overly broad ids/depth values can trigger oversized (413) responses so scope should be narrowed, response data may land under data_preview instead of data, and reply comments cannot be nested beyond one level.

Teams automating Figma workflows - design-to-code handoff, asset export, design-token extraction, comment and version tracking - through an MCP-connected agent, who need the specific tool sequences, ID formats, and known pitfalls rather than guessing at the API surface. Team and project browsing has its own constraint worth planning around: a team ID can't be obtained programmatically and must be extracted from a Figma URL first, and team-level endpoints only return published styles and components, not work-in-progress ones still local to a file.