Design Tokens Transformer

Transform Design Tokens JSON files into platform-specific output formats

Input

Drop JSON file here or click to browse

Maximum file size: 5.0MB

Select Output Formats

CSS Variables

CSS custom properties (--token-name)

SCSS Variables

SCSS variables ($token-name)

SCSS Map

Nested SCSS map structure

Tailwind Config

Tailwind theme configuration object

iOS Swift

Swift class with static properties

Android XML

Android resource XML files

Android Compose

Jetpack Compose theme object

JavaScript (ESM)

ES6 module exports

TypeScript

TypeScript declarations with types

JSON (Flat)

Flat JSON object with dot-notation keys

JSON (Nested)

Nested JSON object structure

Use Style Dictionary

Transform using Amazon Style Dictionary library

Preview

Select output formats to see preview

Loading configurations...