figma-design-tokens
CommunityTurn Figma tokens into production-ready formats.
Authorshawn-sandy
Version1.0.0
Installs0
System Documentation
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.)
Dependency Matrix
Required Modules
@figma/mcp-server-figmanodejspython3
Components
scriptsreferences
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: figma-design-tokens Download link: https://github.com/shawn-sandy/skills/archive/main.zip#figma-design-tokens Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.