Design Tokens

Code examples and demonstrations

Back to Examples

Design Tokens Transformer

Transform Design Tokens JSON files into platform-specific output formats

Help

Input

Drop JSON file here or click to browse

Maximum file size: 5.0MB

Output

Select Output Formats

Web

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

iOS Swift

Swift class with static properties

Android

Android XML

Android resource XML files

Android Compose

Jetpack Compose theme object

Data

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

Transformation History

Loading configurations...

UXLab Examples

Back to main site