Does this skill require the Figma desktop app?

Yes, this skill connects through the Figma Desktop MCP server to securely access the Figma variables API and extract data from your open files.

Can it handle multi-mode themes like Light and Dark mode?

Yes, it detects Figma variable collections and modes, allowing it to generate the appropriate theme-switching logic or separate token sets for different modes.

What types of design data can it extract?

It extracts all Figma variables including colors, numbers (spacing/sizing), strings, and booleans, as well as typography properties like font families and line heights.

Which code formats can I export to?

You can generate tokens in CSS Custom Properties, TypeScript/JavaScript, JSON, Sass/SCSS, Tailwind configuration files, and Style Dictionary format.

Figma Design Token Extractor

Name: Figma Design Token Extractor
Author: TheBushidoCollective

byTheBushidoCollective

•

Design Tools

Extracts design tokens and variables from Figma files to automatically generate production-ready CSS, TypeScript, and JSON configuration files.

This skill bridges the gap between design and development by programmatically accessing Figma via the MCP server to identify primitive and semantic tokens. It analyzes Figma variable collections including colors, spacing, and typography, handling complex hierarchies and theming variations like light/dark modes. By automating the export of tokens into formats like Tailwind configs or Style Dictionary JSON, it ensures your codebase remains perfectly synchronized with your design system while eliminating manual entry errors.

Key Features

01Supports primitive and semantic token hierarchies

02Automates light and dark mode theming variations

03Connects directly to Figma variables API via MCP server

04Provides token documentation and integration guides automatically

05Generates CSS, TypeScript, SCSS, Tailwind, and Style Dictionary formats

0695 GitHub stars

Use Cases

01Bootstrapping Tailwind configurations directly from designer-defined variables

02Synchronizing a web project's CSS variables with updated Figma design systems

03Converting Figma collections into Style Dictionary format for cross-platform consistency

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add thebushidocollective/han figma-extract-tokens

For use in Claude.ai and ChatGPT

Key Features

01Supports primitive and semantic token hierarchies

02Automates light and dark mode theming variations

03Connects directly to Figma variables API via MCP server

04Provides token documentation and integration guides automatically

05Generates CSS, TypeScript, SCSS, Tailwind, and Style Dictionary formats

0695 GitHub stars

Use Cases

01Bootstrapping Tailwind configurations directly from designer-defined variables

02Synchronizing a web project's CSS variables with updated Figma design systems

03Converting Figma collections into Style Dictionary format for cross-platform consistency

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add thebushidocollective/han figma-extract-tokens

For use in Claude.ai and ChatGPT