How do you structure and tokenize animation and transition values?

WHAT THIS TESTS: This question evaluates whether you understand design token architecture beyond simple variables, specifically for motion. Interviewers want to see if you can create abstraction layers that separate raw values from intent, ensuring that animation feels consistent across platforms and can evolve without hunting down hardcoded values in component files.

A GOOD ANSWER COVERS: First, establish primitive tokens for the raw building blocks, such as duration values at 50ms, 100ms, 200ms, 300ms, 500ms and easing curves like linear, ease-out, or custom cubic-bezier definitions. Second, create semantic tokens that assign meaning to those primitives, for example feedback-duration or navigation-easing, so that a button hover and a tooltip share the same responsive timing language. Third, add component-specific tokens or roles that map semantic motion to actual UI elements, like modal-enter-duration or switch-toggle-easing, which lets you retarget an entire component family by changing one alias. Fourth, mention cross-platform delivery using tools like Style Dictionary or the W3C Design Tokens Community Group specification to transform web cubic-bezier values into native iOS or Android interpolators. Fifth, discuss governance such as naming conventions, single source of truth in JSON or YAML, and preventing direct consumption of primitive values by components.

COMMON WRONG ANSWERS: Hardcoding 300ms or ease-in-out inside CSS files for every component shows a lack of systems thinking. Using only raw milliseconds without semantic aliases forces designers and developers to guess intent and makes global changes brittle. Another red flag is ignoring platform differences by assuming web CSS transitions map one-to-one to native animations without transformation logic. Proposing a single global duration for all interactions also signals inexperience with accessibility and context-specific motion needs.

LIKELY FOLLOW-UPS: How would you handle reduced motion preferences at the token level? What is your strategy when a brand needs a faster perceived motion language across all products? How do you version or deprecate a token that hundreds of components consume? Can you explain how composite tokens might bundle duration, easing, and delay together for complex choreography?

ONE CONCRETE EXAMPLE: Imagine a modal dialog. The primitive layer defines duration-300 and easing-decelerate. The semantic layer maps those to feedback-duration-emphasis and feedback-easing-enter. The component layer consumes modal-backdrop-fade and modal-content-slide, both pointing to the same semantic tokens. When the design team decides modals should feel snappier, they update the semantic alias to duration-200, and every modal instance across web, iOS, and Android updates without touching component code.