What is required to use the Figma Automation skill?

You need the Rube MCP server configured and an active Figma connection authorized via Composio. No manual API keys are required for the initial setup.

Does this skill support FigJam or Figma Slides?

Currently, the core JSON extraction tools support Figma Design files. FigJam boards and Slides are generally not supported and may return errors.

Can I convert Figma designs to Tailwind CSS?

Yes, the skill includes specialized tools to extract design tokens (colors, typography, spacing) and convert them directly into a Tailwind-compatible configuration.

How do I handle Figma URLs to get specific nodes?

You can use the FIGMA_DISCOVER_FIGMA_RESOURCES tool to automatically parse Figma URLs and extract the necessary file keys and node IDs for further automation.

Figma Automation

Name: Figma Automation
Author: davepoon

bydavepoon

•

2,589

•

Design Tools

Automates Figma design workflows, including asset exports, design token extraction, and component management directly within Claude.

Figma Automation enables developers and designers to interact with Figma files programmatically through Claude. By leveraging the Rube MCP and Composio toolkit, users can extract design tokens for Tailwind CSS, export assets in multiple formats, manage file comments, and traverse complex design hierarchies. This skill streamlines the design-to-code handoff process by allowing for automated data extraction, resource discovery, and asset synchronization without leaving the development environment.

Key Features

01Programmatically manage file comments and version history for team collaboration

022,589 GitHub stars

03Extract design tokens and automatically convert them to Tailwind CSS configurations

04Render and download Figma nodes as PNG, SVG, JPG, or PDF assets

05Discover and browse team projects, files, and published component sets

06Traverse Figma file JSON to inspect components, styles, and layer hierarchies

Use Cases

01Reviewing and responding to Figma design feedback within the AI coding workflow

02Automating the sync between Figma design tokens and frontend theme files

03Batch exporting icons and UI assets directly into a project's asset folder

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add davepoon/buildwithclaude figma-automation

For use in Claude.ai and ChatGPT

Download Skill