skills.rest
shawn-sandy
shawn-sandyCOMMUNITY
Explore all skills by this author →
Website𝕏@shawnsandyGitHub

figma-design-tokens

Extract design tokens from Figma and generate CSS, SCSS, JSON, TypeScript, and DTCG files.

Updated Jul 26, 2026
Search Tags:#automation#typescript#css#figma#mcp#design-tokens
One-click install
npx skills add https://github.com/shawn-sandy/skills --skill figma-design-tokens
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-design-tokens
Source: https://github.com/shawn-sandy/skills/tree/main/figma-design-tokens
Command: npx skills add https://github.com/shawn-sandy/skills --skill figma-design-tokens

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @figma/mcp-server-figma, nodejs, python3, and includes scripts (resource) and references (resource) components.

What problem does it solve?

Extracts design tokens (colors, typography, spacing, and more) from Figma designs using the Figma MCP server and converts them into production-ready formats, including CSS custom properties, SCSS variables, JSON (DTCG), TypeScript types, and auto-generated documentation.

Core Features & Use Cases

  • Multi-format output: Generate CSS, SCSS, JSON, TypeScript, and documentation in a single run.
  • Theme support: Automatically handles light/dark modes and multiple themes.
  • Code-ready tokens: Produces structured tokens that are ready for Style Dictionary or direct use in apps.
  • Fallback extraction: If there are no variables, tokens can be derived from node styles with duplicate prevention.

Quick Start

Tell Claude Code to extract design tokens from your Figma file and output them as CSS, JSON, and TypeScript, e.g. "Extract tokens from https://figma.com/file/XYZ and generate CSS and JSON." (No code fences.)

Frequently Asked Questions about figma-design-tokens

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I extract design tokens from Figma and convert them to CSS or JSON?▼

Extract design tokens from Figma designs using the Figma MCP server, then transform them into production-ready CSS custom properties, JSON, SCSS variables, TypeScript, or W3C DTCG formats in a single automated run. The Skill handles multi-format output and theme variations automatically.

Can I generate TypeScript types and documentation from my Figma design system?▼

Yes. Design tokens extracted from Figma variables are automatically converted to typed TypeScript definitions and auto-generated documentation alongside CSS, JSON, and SCSS outputs, enabling immediate use in codebases.

What do I need to set up before extracting tokens from Figma?▼

Configure a Figma MCP server (remote or desktop), ensure your Figma file contains design variables, and have Node.js and Python 3 installed. The Skill then runs the extraction and transformation pipeline automatically.

Does this work with light and dark mode themes?▼

Yes. The Skill automatically detects and handles multiple themes, including light and dark modes, extracting tokens for each theme variant and generating separate outputs or merged theme-aware token files.

What happens if my Figma file has no variables defined?▼

The Skill falls back to extracting tokens from node styles with built-in duplicate prevention, ensuring you still get production-ready token output even without explicit Figma variables.

Can I extract tokens from specific frames or components only?▼

Yes. The Skill supports selection-based extraction targeting specific frames or components within your Figma file, alongside full design-system extraction across all pages and themes.

Related Skills

Explore More Design & Creative Skills→
MercurykzMercurykz

figma

Extract Figma design data via MCP and generate code from nodes.

Community
Intermediate
Higashi-KotaHigashi-Kota

ui-theme

Generate CSS variables and Tailwind theme from JSON design tokens.

Community
Intermediate
guardiatechnologyguardiatechnology

kata-mcp-figma-extract

Extract Figma design tokens and component specifications into JSON and Markdown.

Official
Intermediate
Dragoon0xDragoon0x
4

sync

Export code-defined design tokens to a Tokens Studio-compatible figma.tokens.json file.

Community
Intermediate