style-dictionary

Style Dictionary

Overview

Set up Style Dictionary to transform design tokens into platform-specific formats. The industry standard for design systems that need to output to web, iOS, Android, and other platforms from a single token source.

When to Use

• Setting up a new design system with multi-platform needs
• Converting Figma tokens to code
• Generating CSS, SCSS, iOS Swift, Android XML from one source
• Adding custom token transforms or formats
• Integrating tokens into a build pipeline

Quick Reference: Core Concepts

Concept	Purpose	Example
Token	Design value with metadata	{ "value": "#3b82f6", "type": "color" }
Transform	Converts token values	color/hex → color/rgb
Format	Outputs to file type	CSS variables, Swift, XML
Platform	Target environment	web, ios, android

The Process

1. Assess token sources: Where are tokens defined? (Figma, JSON, YAML)
2. Identify platforms: Which platforms need tokens?
3. Set up config: Create style-dictionary.config.js
4. Define transforms: Add any custom value transformations
5. Build: Run style-dictionary build

Implementation Checklist

Copy this checklist when setting up Style Dictionary:

Style Dictionary Setup:
- [ ] Install: `npm install style-dictionary`
- [ ] Create tokens/ directory with source JSON files
- [ ] Create style-dictionary.config.js with source paths and platform outputs
- [ ] Add build script to package.json: `"tokens:build": "style-dictionary build"`
- [ ] Run build and verify output files are generated correctly

---

Project Setup

Installation

npm install style-dictionary
# or
yarn add style-dictionary

Directory Structure

tokens/
├── base/
│   ├── colors.json
│   ├── spacing.json
│   └── typography.json
├── semantic/
│   ├── colors.json
│   └── components.json
└── themes/
    ├── light.json
    └── dark.json

build/                    # Generated output
├── css/
│   └── variables.css
├── ios/
│   └── StyleDictionary.swift
└── android/
    └── colors.xml

style-dictionary.config.js