Tokens to code
How to get ready code from tokens right in the plugin: the Tokens → Code tab of the Download window, projects and collection grouping, the CSS, SCSS, SwiftUI, UIKit, Kotlin and XML platforms, options and preview. When you need the Transformer CLI.
Tokens turn into code in two ways. Right in the plugin: the Download window, the Tokens → Code tab, the result downloads as a ZIP archive. Or on a developer's computer and in CI through the Transformer utility: the same formats plus a manifest, repeatable builds from the repository.
| Way | Platforms | Purpose |
|---|---|---|
| The plugin, Download → Tokens → Code | CSS, SCSS, SwiftUI, UIKit, Kotlin, XML | Hand code to a developer quickly, check naming |
| Transformer CLI | CSS, SCSS, Swift, UIKit, Kotlin, XML, manifest | Builds in the project and CI, watches for changes |
Export from the plugin
- In the footer press Export to computer. The Download window opens.
- Switch to the Tokens → Code tab.
- Tick the projects, choose the platforms, set a prefix and options if needed.
- Check the file list in Output Preview and press Export to disk. The plugin saves the
tokens-transformed.ziparchive.
The Tokens → Code tab: the project list with mode and file counts.
Projects and collection grouping
If config.json describes collections and modes, the plugin shows projects: every project is built from its modes and files, for example WUI, CUI, STUI. Untick the projects you do not need.
Collection Grouping and the start of the platform list.
The Collection Grouping section decides where every collection goes: Merge folds it into the project's shared files, Separate puts it into its own folder. The folder icon next to a collection assigns it a custom folder in the archive.
Without a valid config.json the plugin does a flat export: tokens.css, tokens.scss, tokens.swift, tokens.uikit.swift, tokens.kt and XML resource folders.
Platforms and prefix
Target Platforms: CSS, SCSS, SwiftUI, UIKit, Kotlin, XML. The Prefix field with an example result.
| Platform | What you get |
|---|---|
| CSS (Web) | Custom properties --token-path in .css |
| SCSS (Web) | $token-path variables in .scss |
| SwiftUI (iOS) | Swift constants in .swift |
| UIKit (iOS) | UIKit constants in .uikit.swift |
| Kotlin (Android) | Kotlin constants in .kt |
| XML (Android) | values and drawable resources: colours, dimensions, strings, simple drawables |
Prefix is added to every name, for example ds gives --ds-color-primary.
Options
Options and Output Preview: the tree of files that go into the archive.
| Option | What it does |
|---|---|
| Resolve aliases | On: references are replaced with final values, handy for mobile platforms. Off: references are kept, for example var(--other-token) in CSS |
| Split effects (CSS) | Shadows and blurs are emitted as separate variables instead of one value |
| Include descriptions | Token descriptions go into code comments |
Output Preview shows the folders and files of the archive before export.
Naming
Names are built from the token path: color/brand/primary gives --color-brand-primary, $color-brand-primary, colorBrandPrimary and @color/color_brand_primary depending on the platform. If a token has Code Syntax, it takes precedence: the Web key for CSS and SCSS, iOS for Swift, Android for Kotlin and XML. See Scopes and Code Syntax.
Swift code for SwiftUI and UIKit is marked Sendable and suits projects with Swift 6 strict concurrency.
Which tokens reach the code
All variables and styles: colours, dimensions, spacing, radii, opacity, strings, booleans, typography, shadows, blurs, effects, glass, fills and gradients, plus durations, curves and easing. template, composition, grid and custom are not exported; the plugin reports them in the archive diagnostics.
Android XML is deliberately limited to native resources: complex tokens with no resource equivalent are skipped with an explanation.
Transformer CLI
For repeatable builds from the repository use the Transformer utility: it reads the same files and config.json, is configured with a YAML file and can watch for changes.
npm install --save-dev @sxl-studio/token-transformer
npx sxl-transform init
npx sxl-transform sync
The full description of commands, configuration and formats: Transformer.
If something does not work
| What happened | What to do |
|---|---|
| Export to disk is disabled | Select at least one project and one platform |
| Some tokens are missing from the archive | Check the diagnostics in the archive: the template, composition, grid and custom types are not exported, and unresolved references are skipped |
| Names differ from Dev Mode | Dev Mode shows the Code Syntax from $extensions; set it for the tokens you need, and the code gets the same names |
| No projects, only a flat list | The token folder has no valid config.json. Set up collections in Collection Settings |