Figma Tokens

Bridge the gap between design and code by extracting, transforming, and syncing design tokens from Figma into your codebase as CSS variables, Tailwind config, or theme objects.

Features

• Token Extraction — Pull colors, typography, spacing, and shadows directly from Figma files
• Multi-Format Export — Output as CSS custom properties, Tailwind config, SCSS variables, or JSON
• Theme Generation — Automatically create light/dark theme variants from your token set
• Diff Detection — Identify which tokens changed since your last sync
• Design System Mapping — Map Figma component variants to code component props

Quick Start

claude skill install figma-tokens

Usage

# Extract tokens from a Figma file and generate Tailwind config
/figma-tokens extract --format tailwind

# Compare current tokens with last synced version
/figma-tokens diff

How It Works

Connects to the Figma API to read your design file's style definitions and local variables. Transforms raw Figma data into structured design tokens following the W3C Design Token specification. Outputs platform-specific formats ready for direct integration into your build pipeline.

Compatibility

Works with Claude Code, Codex, Gemini CLI, Cursor, Windsurf, and Aider.