How would you structure variables and expressions for a price configurator?

WHAT THIS TESTS: The interviewer wants to know if you treat the prototype as a reactive system rather than a static mock. In Figma, advanced prototyping with variables and expressions lets you build a single source of truth for state. This question specifically checks whether you know how to pick the right variable types, how to compute derived values with expressions, and how to avoid combinatorial explosion when multiple independent choices affect one output.

A GOOD ANSWER COVERS: First, variable selection: use a string variable for the base model because it is a mutually exclusive choice across discrete options, and use a boolean variable for each optional add-on because they are independent toggles. Second, expression architecture: bind the text content of the total price label to an expression that reads these variables, maps the base string to a numeric cost using a conditional that returns 1500 when the base is Pro and 1000 otherwise, and sums the active add-ons with conditionals that add 200 only when extra storage is true. Third, layer wiring: ensure the interactive components update the variables on click, and the text layer consumes the computed expression rather than being edited by hand. Fourth, scalability: mention that adding a third base model only requires updating the conditional expression, not creating a new frame.

COMMON WRONG ANSWERS: Hardcoding every possible total into static text layers and showing or hiding them with boolean variables is a red flag because it creates a maintenance nightmare as options grow. Another red flag is using only string variables for everything and trying to concatenate text instead of computing numbers, which breaks currency formatting and math. A third red flag is duplicating the entire configurator frame for each combination, which ignores variables entirely and defeats the purpose of the question.

LIKELY FOLLOW-UPS: The interviewer might ask how you would handle a percentage discount that applies only when both the Pro base and the extra storage are selected, which tests nested conditionals and boolean logic. They might also ask how you would format the result as currency with a dollar sign, which tests string concatenation or number to string conversion in Figma expressions. A third follow-up could be how to reset the total when the user navigates back to the first screen, which tests variable scoping across flows.

ONE CONCRETE EXAMPLE: Name the string variable base_model with an initial value of Standard and the boolean variable has_storage with an initial value of false. On the base model selector, set the Pro variant to change base_model to Pro on click. On the add-on toggle, set it to flip has_storage to true on click. On the price text layer, bind the content to an expression that reads if base_model equals Pro then 1500 else 1000 plus if has_storage then 200 else 0. When the user taps Pro and then enables extra storage, the text layer updates to 1700 without any additional interactions or hidden layers.