Style Dictionary

Generate design tokens for every platform from a single source of truth. Style Dictionary transforms JSON tokens into CSS variables, Tailwind config, iOS/Android color resources, and Figma tokens.

This skill builds Style Dictionary v4 token pipelines with the W3C Design Tokens Community Group format. Covers transforms for px→rem, color references, theming (light/dark/brand), platform outputs (CSS, SCSS, JS, iOS Swift, Android XML), and integration with Tokens Studio for Figma.

When to use

Use when scaling a design system across web and native, when consolidating ad-hoc color/spacing constants into tokens, or when integrating Figma Variables into code.

Examples

Multi-theme token pipeline

Output CSS variables for light, dark, and brand themes

Set up Style Dictionary v4 to output light/dark CSS custom properties plus a Tailwind theme.colors extension from a single tokens.json

Figma Tokens Studio integration

Sync Figma variables to code

Wire Tokens Studio Figma export through Style Dictionary into CSS variables and a TypeScript color enum