Design Tokens
46 bites tagged Design Tokens — interview questions with model answers, and 60-second explainers.
Architecting multi-brand, dark-mode theming
Tier tokens into primitive, semantic, and component layers; components consume semantic tokens; themes swap by remapping semantic-to-primitive on a scope like data-theme. scalable theming architecture.
Versioning and distributing token updates safely
Publish tokens as a semver package, bump major on breaking changes, deprecate before removing, communicate via changelogs and migration guides. release discipline for shared tokens.
Transforming tokens for multiple platforms
A transformer like Style Dictionary parses JSON, applies platform transforms, and renders formatted outputs (CSS vars, Swift, Kotlin) via configured platforms. knowledge of token build pipelines.
What design tokens are and why they matter
Tokens are named, platform-agnostic design decisions stored centrally, enabling consistency, theming, and one-place updates. grasp of design tokens as a single source of truth.
Integrating design tokens with Tailwind CSS
Feed tokens into Tailwind's theme config (or v4 CSS theme) so utilities derive from one source; a parallel setup causes drift. tokens plus utility-first integration. maintaining tokens and Tailwind values separately.
Modeling responsive design tokens
Model a token as a breakpoint-to-value map, transform into a base custom property redefined in media queries, components use one var per viewport. tokens that vary by breakpoint. one token per breakpoint.
Token architecture for white-label multi-brand
A shared semantic schema, per-brand primitive and mapping overrides, a build step emitting one bundle per brand, components consume stable semantic names. multi-brand token strategy. forking the system per brand.
Light and dark themes with design tokens
A shared primitives file plus per-theme semantic files, transformed into custom properties scoped by selector, components read the semantics. token file structure for two themes. duplicated stylesheets or hardcoding.
Architect themes on a token foundation
Separate primitive tokens from semantic alias tokens that themes redefine, emit semantics as custom properties per theme scope, components use only semantics. layered token architecture. components reading primitives.
Roll out a design system color change
Update the token source, rebuild outputs, version and publish, bump the app's dependency, verify contrast and visual regressions. end-to-end change management. editing the hex in components or shipping unversioned.
What are design tokens?
Platform-agnostic name-value pairs for design values, transformed into CSS variables or platform code, consumed by components by name. tokens as named design decisions. equating a token with a raw hex used inline.
Categories of Design Tokens
Design tokens fall into tiers: primitive tokens hold raw values, semantic tokens assign meaning by aliasing primitives, and component tokens scope decisions to specific UI parts.
Design Token Naming Conventions
Design token names encode meaning through a consistent, layered structure so values stay portable across themes and platforms. A clear convention like category-type-item-state turns scattered constants into a self-documenting, predictable system that…
Structuring color tokens for a new app
Primitive palette, semantic role tokens, optional component tokens, theming benefit. tiered color-token architecture and why layering matters. a flat list of named colors with no semantic layer, blocking theming and dark mode.
Design tokens for multi-brand button theming
Tokens as named design decisions, primitive-versus-semantic layers, per-brand themes mapping semantic to primitive. token fundamentals and tiered theming. hardcoding hex values per brand instead of a shared semantic token.
Versioning and shipping design tokens via NPM
Semver, deprecate-before-delete with aliases, codemods and migration guides. package versioning discipline for a shared dependency. silently renaming tokens and bumping a minor version, breaking every consumer.
How would you architect Figma components and styles for light and dark themes?
This tests token-based system thinking and Figma variable scoping. A strong answer maps primitives to semantic tokens, binds components to semantic variables, and switches modes at the page level.
How do you implement design tokens in Figma for developer handoff?
This tests design-code token architecture. Strong answer shows three-tier system—primitive, semantic, component—matching developer naming, synced via Tokens Studio or native Variables. Red flag: styles with no developer-facing names or single source of truth.
How would you extract Figma Variables via REST API for Style Dictionary?
Tests Figma Variables to Style Dictionary architecture. Outline: paginate REST endpoint, map modes/aliases to W3C draft JSON, then run Style Dictionary in CI from tokens folder. Red flag: raw API payloads without type normalization or alias resolution.
How would you map Figma Variables to CSS Custom Properties for tokens?
This tests bridging Figma variable collections and modes into maintainable CSS. A strong answer maps collections to semantic CSS custom properties, supports mode switching via data attributes, and mirrors design system naming.
How would you structure a multi-theme color system in Figma and CSS?
Primitives and Semantic collections with theme modes; pipeline to CSS variables; components use semantic tokens only. Token architecture bridging Figma modes to code.
Design Token Documentation as Usage Contracts
A design token dictionary translates raw values into intent: it tells engineers when to use color-action-primary versus the raw hex across web, iOS, and Android. Without usage context, teams treat tokens as magic numbers and drift from the system.
Get Design Tokens bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.