Tokens to Code

#What Tokens to Code does

Tokens to Code converts token JSON into developer-ready output files.

Two runtime paths are available:

1. Inside the plugin (Download -> Tokens to Code)
2. Transformer CLI (@sxl-studio/token-transformer) for local automation and CI/CD

#Plugin flow (Download -> Tokens to Code)

#Supported plugin platforms

• css
• scss
• swiftui (outputs .swift)
• uikit (outputs .uikit.swift)
• kotlin (outputs .kt)
• xml (Android XML resources bundle)

#Settings in the plugin

#Output structure from plugin

The plugin exports a ZIP archive: tokens-transformed.zip.

Warning (XML): Android XML output is intentionally native-limited. Simple resources and supported drawables are emitted; complex runtime-only token structures are skipped with diagnostics.

#Naming and code syntax

#Base naming

• CSS: custom properties (--token-path)
• SCSS: Sass variables ($token-path)
• Swift: Swift identifiers
• Kotlin: Kotlin identifiers
• Android XML: resource names (@color/..., @dimen/..., @string/..., drawable XML files)

Swift, SwiftUI, and UIKit outputs include Sendable support types for Swift 6 strict-concurrency projects.

#$extensions.figma.codeSyntax support

When present, naming may be overridden per platform:

• Web for CSS
• iOS for Swift
• Android for Kotlin / XML

Examples:

{
  "$extensions": {
    "figma.codeSyntax": {
      "Web": "var(--color-primary)",
      "iOS": "Color.primary",
      "Android": "@color/primary"
    }
  }
}

#Alias behavior

#Resolve Aliases = OFF

• Best for CSS cascading systems.
• Aliases are kept as references when possible (for example var(--other-token)).

#Resolve Aliases = ON

• Best for mobile targets where literal final values are usually required.
• Alias chains are resolved before emit.

#Type coverage

The code pipeline supports simple and composite token families used by SXL Studio token packs, including:

• colors, dimensions, spacing, radii, widths, opacity, text/string/boolean
• typography
• shadows, blur/backdrop blur, effects, glass
• fills and gradients
• duration and cubic-bezier values

Important runtime notes:

• template, composition, and grid are skipped in Transformer defaults.
• Unsupported tokens produce diagnostics (warning/error depending on config policy).

#CSS effects split

When Split Effects is enabled, effect-like tokens can produce multiple CSS variables instead of one packed value.

Use this when you need granular control in codebases with separate shadow/blur/backdrop pipelines.

#Transformer CLI (@sxl-studio/token-transformer)

Use CLI for repeatable local builds and CI/CD.

#Install

npm install --save-dev @sxl-studio/token-transformer
# or
pnpm add -D @sxl-studio/token-transformer
# or
yarn add -D @sxl-studio/token-transformer

#Commands

# smart incremental transform (default command)
npx sxl-transform sync --config ./sxl-transform.config.yaml
# or, with pnpm
pnpm exec sxl-transform sync --config ./sxl-transform.config.yaml

# full rebuild
npx sxl-transform sync --config ./sxl-transform.config.yaml --force

# validate config only
npx sxl-transform validate-config --config ./sxl-transform.config.yaml

# create starter config
npx sxl-transform init --path ./sxl-transform.config.yaml

#CLI capabilities

• YAML config only (.yaml / .yml)
• Incremental stateful rebuilds (smart mode)
• Full rebuild mode (force)
• Action modes for token issues (ask, debug-stop, debug-continue, autofix, skip)
• Debug report generation for issue triage

#Platforms in CLI config

• css
• scss
• swift
• uikit
• kotlin
• xml (Android resources)
• manifest (JSON metadata for docs, Storybook token viewers, devtools, audits, and migrations)

#Transformer config shape (YAML)

Required top-level sections:

#Minimal valid example

version: 1
source:
  tokenDir: ./tokens
  configFile: config.json
  include: ["**/*.json"]
  exclude: ["config.json", "**/diff-id*.json"]

options:
  remBase: 16
  collisionStrategy: error
  unsupportedTypes:
    default: warn
    types:
      template: skip
      composition: skip
      grid: skip

tokenSets:
  - id: root
    selectors:
      - collection: Core
        mode: Default

outputs:
  - id: css-root
    platform: css
    outputDir: ./design-system/css
    resolveAliases: false
    splitEffects: true
    showDescriptions: true
    files:
      - tokenSet: root
        output: root.css

  - id: tokens-manifest
    platform: manifest
    outputDir: ./design-system/manifest
    files:
      - tokenSet: root
        output: tokens-manifest.json
        options:
          includeResolvedValue: true
          includeReferences: true

#Recommended checks

In a product repository, validate config before adding the transform to CI:

npx sxl-transform validate-config --config ./sxl-transform.config.yaml
npx sxl-transform sync --config ./sxl-transform.config.yaml --mode smart

#Related sections

• Token JSON format
• Token types
• Scopes & Code Syntax
• Export Variables & Styles
• Composition