Transforming tokens for multiple platforms
knowledge of token build pipelines.
a transformer like Style Dictionary parses JSON, applies platform transforms, and renders formatted outputs (CSS vars, Swift, Kotlin) via configured platforms.
WHAT THIS TESTS: This evaluates whether you understand the parse, transform, and format stages of a token build and the tooling that automates cross-platform output.
A GOOD ANSWER COVERS: Tokens live in a single, platform-neutral JSON source. A build tool such as Style Dictionary, or the Tokens Studio export plus a transform step, reads that source and resolves references and aliases so semantic tokens point at primitives. It then applies platform-specific transforms: converting pixels to points or dp, hex to UIColor or Compose Color, and renaming to each platform's casing convention. Finally, formatters render the transformed tokens into concrete files: CSS custom properties for web, a Swift enum or struct for iOS, and a Kotlin object or Android XML resource for Android. You configure one platform block per target with its transforms, format, and output path. This whole pipeline runs in CI on every token change so all platforms stay in sync automatically, and the generated files are committed or published as packages.
COMMON WRONG ANSWERS: Proposing to manually copy values into each platform's files, which drifts immediately. Describing only an export with no transform or format stage, so units and color formats are wrong per platform. Forgetting alias resolution, leaving references unresolved. Not automating in CI.
LIKELY FOLLOW-UPS: How do custom transforms and formats work when a built-in does not fit. How do you handle composite tokens like typography or shadows. How do you publish and version the generated outputs.
ONE CONCRETE EXAMPLE: A color.brand.primary token of #6344D6 in JSON; Style Dictionary emits --color-brand-primary: #6344D6 for web, a static let brandPrimary = UIColor(...) for iOS, and a val brandPrimary = Color(0xFF6344D6) for Android, all from one run.
Read the original → styledictionary.com
Get five bites like this every day.
Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.