How would you implement a light and dark mode theme switcher?

WHAT THIS TESTS: Your grasp of Figma variables as a multi-context system, not just static tokens. The interviewer wants to see that you understand modes let a single variable store multiple values and that you can switch contexts without rebuilding frames. They also care whether you think about design system scalability and maintainer ergonomics.

A GOOD ANSWER COVERS: First, create a dedicated variable collection for color primitives or semantic tokens, and open the variables modal from the right sidebar. Second, define two modes inside that collection, typically named Light and Dark, where each color variable contains a distinct hex value per mode. Third, apply those variables to every relevant layer property on your component, such as fills, strokes, and effects, instead of hard-coding hex codes or using detached styles. Fourth, switch the mode on the component frame, a parent container, or the entire page to toggle the theme instantly. Fifth, mention that adding a third theme like high contrast only requires creating a new mode and entering new values, with zero reapplication to layers.

COMMON WRONG ANSWERS: Duplicating the component frame and manually changing every fill to a dark color. Swapping between separate color styles or libraries instead of using one variable collection. Hard-coding color values and claiming variables are only for spacing. Forgetting that modes are set per collection, so you need to select the right scope when switching. Ignoring the distinction between primitive variables and semantic variables, which makes theme swaps fragile and error-prone when requirements change.

LIKELY FOLLOW-UPS: How would you handle a third theme, such as high contrast or a brand seasonal variant? What happens if you need different spacing for mobile versus desktop, and how would you layer that alongside color modes? How do you communicate these variables to developers, especially when modes map to CSS custom properties or theme objects? Have you run into performance issues or confusion with deeply nested mode overrides on large component sets?

ONE CONCRETE EXAMPLE: Suppose you are building a primary button. You create a semantic collection named Colors with a variable called Action Primary. In Light mode, Action Primary is set to 0055FF. In Dark mode, the same variable is set to 4D9FFF. You apply Action Primary to the button fill. When the page mode is set to Light, every button instance renders blue. When you switch the page to Dark, every button instance automatically shifts to the lighter blue without selecting any layers. If the team later requests a high contrast mode, you add a third mode to the collection, set Action Primary to 0000FF, and the entire library updates instantly.