How would you map Figma Variables to CSS Custom Properties for tokens?

WHAT THIS TESTS: The interviewer wants to know if you can translate a design system's structured data in Figma into a maintainable engineering contract. Figma Variables use collections and modes to store reusable values for colors, spacing, and typography. The question probes whether you understand how to preserve that structure in code rather than treating the design file as a static reference. It also checks your familiarity with design tokens, semantic naming, and theme switching at scale.

A GOOD ANSWER COVERS: First, mapping Figma variable collections to CSS custom properties by mirroring the collection names in your CSS. For example, a Figma collection named Colors maps to a set of custom properties like --color-background-primary and --color-text-default. Second, handling modes such as light and dark by scoping variables under data attributes or class names on a root element, which lets you switch contexts without reloading stylesheets. Third, separating primitive tokens from semantic tokens so raw values like 4px or hex codes live in a base layer while component variables reference them, exactly matching how Figma variables can reference other variables. Fourth, establishing a sync strategy, whether through a build step, a token transformer like Style Dictionary, or manual documentation, so engineers know when Figma variables change.

COMMON WRONG ANSWERS: A major red flag is exporting raw hex codes or pixel values from Figma and pasting them directly into component CSS, which destroys the token abstraction and makes theme updates manual. Another mistake is flattening the hierarchy by giving CSS variables arbitrary names that do not match the design system, forcing designers and developers to maintain separate mental models. A third error is ignoring modes entirely and creating separate component variants for each theme, which duplicates code and breaks scalability.

LIKELY FOLLOW-UPS: The interviewer might ask how you would handle nested modes if a component needs a different color in a dark-themed card inside a light-themed page. They could also ask how you keep tokens in sync across platforms if the same Figma file feeds iOS and web, or how you would automate the extraction of Figma variables into CSS using the Figma REST API or a plugin.

ONE CONCRETE EXAMPLE: Suppose Figma has a Colors collection with a variable named background-primary defined as white in light mode and black in dark mode. In CSS, you define :root { --color-background-primary: #ffffff; } and [data-theme="dark"] { --color-background-primary: #000000; }. A button component then uses background-color: var(--color-background-primary) instead of a hardcoded value. When the design team updates the dark mode value in Figma, you only change one token in your CSS, and every component updates instantly.