Manage light and dark themes with Variables and Modes

WHY THIS MATTERS The interviewer wants to confirm you understand design tokens and Figma's variable system well enough to build maintainable, multi-theme systems rather than brittle duplicated files.

A GOOD ANSWER COVERS Structure variables in two layers. A primitives collection holds raw, mode-agnostic values like blue-500 or gray-900. A semantic collection holds intent-based tokens such as color-surface, color-text-primary, and color-border, and this collection has two modes, Light and Dark. Each semantic token is an alias pointing to a primitive, but the mapping differs per mode: color-surface aliases white in Light and gray-900 in Dark, while color-text-primary aliases gray-900 in Light and gray-50 in Dark. Critically, every component and frame fill binds to the semantic token, never to a primitive or raw hex. To switch themes you simply set a frame or page to the Dark mode, and all bound colors update at once.

COMMON WRONG ANSWERS Duplicating the entire UI kit into a separate dark file, which doubles maintenance. Hardcoding hex values on components. Skipping the semantic layer and binding components straight to primitives, so a brand color change forces edits everywhere. Putting light and dark in two separate collections instead of two modes of one collection.

LIKELY FOLLOW-UPS How do you add a third theme like high-contrast. How do variable modes map to engineering tokens and CSS custom properties. How do you handle component-specific overrides. How do you keep primitives and semantics in sync as the palette evolves.

ONE CONCRETE EXAMPLE A button uses color-surface for its background and color-text-primary for its label. In Light mode the button renders white with dark text; switching the enclosing frame to Dark mode flips it to a dark surface with light text automatically, with zero component edits, because both fills resolve through the same semantic tokens.