Distributing design tokens across web, iOS, and Android

WHAT THIS TESTS This evaluates whether you understand design tokens as a build-and-distribution problem, not just a list of variables, and whether you can keep three platforms in sync.

A GOOD ANSWER COVERS Establish a single source of truth: tokens authored once in platform-agnostic JSON, ideally following the W3C Design Tokens format with explicit types like color and dimension. Run a transformation tool, commonly Style Dictionary, that reads that JSON and emits platform-native artifacts: CSS custom properties for web, a Swift file of static constants or a UIColor extension for iOS, and colors.xml plus dimens.xml for Android. The transform layer handles type conversions, for example hex to UIColor RGBA, pixels to dp, and naming conventions per platform. Wire this generation into CI so a token change produces a versioned release, and distribute outputs as packages each platform depends on, an npm package for web and native artifacts via their package managers.

COMMON WRONG ANSWERS Maintaining a separate color and spacing definition in each codebase, which guarantees drift the moment one platform updates. Treating tokens as design-only and hand-copying values into code. Skipping types, so a transformer cannot correctly format a color versus a dimension.

LIKELY FOLLOW-UPS How do you handle semantic versioning? Treat token changes like an API: patch for value tweaks, major for renames or removals. How do you support theming? Author base and theme token sets and generate themed outputs, or emit references for runtime switching on web. How do designers contribute? Sync from a design tool export into the JSON source so the pipeline starts at the design file.

ONE CONCRETE EXAMPLE A token color.brand.primary with value #0052CC lives in tokens.json. The build emits --color-brand-primary: #0052cc; in tokens.css, a Swift static let colorBrandPrimary = UIColor(red:0, green:0.32, blue:0.8, alpha:1), and a colors.xml entry color_brand_primary. A designer changes the hex once; CI regenerates all three artifacts and publishes new package versions, so web, iOS, and Android pick up the identical color without anyone editing platform code by hand.