Figma Design Ops via Rube MCP
Inspect, export, tokenize, and annotate Figma Design files through Rube MCP — schema-safe calls, payload discipline, and built-in error triage.
Free
Works with the AI Agents you already use
Claude Code
Cursor
Codex CLI
Muse
Dots+21 moreClaude CodeCursorCodex CLIMuseDots
Manus
Grok
Grok Bot+18 agentsFigma Design Ops via Rube MCP
Example session with this skill installed
Our checkout redesign file is at https://www.figma.com/design/Xk39dLq/Checkout-Redesign?node-id=1-541. Pull the full color, typography, and spacing tokens and convert them into a Tailwind config for my engineer, then export that node and its two child frames as PNGs. While you're in there, summarize the open comments on the file and tell me what changed in the last three versions. Make sure the Figma connection is actually active before you start, and if the file tree is huge, go shallow first instead of pulling everything.
- Read your context and instructions
- Compiled the figma design ops
Summary
Extracted 59 design tokens (38 colors, 12 text styles, 9 spacing) from the Checkout Redesign file and converted them into a validated Tailwind theme block. Frames under node 1:541 were exported and open comment threads were summarized for engineering handoff.
| Metric | Before | After |
|---|---|---|
| Design tokens captured | 0 | 59 |
| Tailwind theme keys | manual guesses | 59 generated |
| Frames exported (PNG @2x) | none | 11 URLs saved |
| Open comment threads | 17 unread | 3 themes summarized |
brand/primary #2F6BFF
radius/card 12px
font/display 32/40 Inter-SemiBold
Next steps
- Save the exported asset URLs into your repo today — Figma render links are short-lived
- Publish local styles as a team library so future extractions cover them
- Re-run the token extraction after the next version checkpoint to catch drift
Connects securely to your tools. The creator never sees your data.
About this skill
Manually bridging the gap between design files and code is slow and error-prone. This skill automates Figma operations through the Rube MCP, providing a structured way to inspect files, export assets, and generate code-ready design tokens without leaving your development environment.
What it does
- Inspect file structure by pulling node metadata, component sets, and style definitions with controlled depth to avoid payload limits.
- Export assets by rendering specific nodes into PNG, SVG, JPG, or PDF formats and handling the download lifecycle.
- Extract design tokens from local styles and variables into structured JSON objects.
- Generate Tailwind configs by converting raw token data directly into frontend-ready configurations.
- Manage collaboration by reading file comments, posting replies, and tracking version history.
- Audit design systems by inventorying teams, projects, and published components across a workspace.
How it works
- Tool discovery: The agent calls
RUBE_SEARCH_TOOLSto identify available Figma capabilities and validate parameter schemas. - Resource resolution: It parses Figma URLs to extract file keys, node IDs, and team identifiers.
- Incremental inspection: It fetches a shallow JSON overview of the file tree to identify target nodes before requesting deep metadata.
- Action execution: The agent performs the requested task, such as rendering an image or converting tokens, while enforcing payload discipline.
Frameworks & tools
Built for the Composio Figma toolkit via Rube MCP. It supports Tailwind CSS generation and handles standard Figma Design file formats.
Why this beats prompting it yourself
Standard prompts often fail to handle Figma's complex nested JSON structures, leading to truncated data or 413 payload errors. This skill implements a strict progressive loading pattern and identifier normalization that prevents common API failures.
Use cases
- Generating a Tailwind CSS theme file directly from a Figma design system.
- Auditing a design file to list all undocumented or local styles not tied to the library.
- Automating the export of UI icons into a repository's asset folder.
- Summarizing recent design comments and version changes for a daily standup.
Known limitations
Does not support FigJam boards or Figma Slides. Identifier discovery for team projects requires a full URL as team IDs are not discoverable via API alone.
Built for Figma Design files — FigJam boards and Slides are generally unsupported. Team IDs are often not discoverable via API alone, so you may need to paste the full team URL.
How to use
- 1
Connect your agent to the Agensi MCP
Copy the prompt and paste it into Claude, ChatGPT, Cursor or any agent that supports MCP. It sets up the connection for you. Manual setup
- 2
Sign in to Agensi
Your agent shows a sign-in link. Sign in and click Allow.
- 3
Ask for what you need
Your agent loads this skill and uses it on your task. It always asks before any payment.
Reviews
No reviews yet
Be one of the first to try it. Every listed skill goes through the trust checks below.
Security scanned
Checked by our 8-point scan before listing
1 use
Times used to date
Free to use
No account required to browse
Trust & safety
Security scan
Security scan passed 1 month ago
- Free with an Agensi account
Permissions
File Scopes
Needs read/write access only to save token exports, Tailwind configs, and asset manifests; Figma calls run through the Rube MCP connection, not direct network access.