How would you use variables to calculate a real-time cart subtotal?

WHAT THIS TESTS: This question probes whether you understand Figma's advanced prototyping capabilities beyond click-through flows. Specifically it checks if you know how to use number variables, text variables, and expressions to create reactive data-driven prototypes that behave like real software. At the senior level interviewers want to see that you think in systems not screens and that you can model state derive computed values and bind outputs to UI elements without relying on static frames.

A GOOD ANSWER COVERS: A strong response walks through four things in order. First state definition: create a number variable scoped appropriately either at the page or component level to hold the current quantity. Second input binding: attach that variable to an interactive element like a stepper button or text field so user actions mutate the state. Third computed expression: write an expression such as quantity multiplied by 25 to derive the subtotal using Figma's expression syntax to reference the variable. Fourth output binding: link the expression result to the text content of the subtotal label so it re-renders automatically whenever the variable changes. Bonus points if you mention using a text variable or string template to prepend a dollar sign and format decimals.

COMMON WRONG ANSWERS: Red flags include proposing manual frame duplication for each quantity state which creates maintenance nightmares. Another mistake is treating the price as static text and saying you would just type the numbers which ignores the requirement for real-time updates. Some candidates confuse design-system variables with prototyping variables or suggest using plugins instead of native expressions which signals they have not kept up with Figma's native prototyping stack. Finally forgetting to mention variable scope or how multiple cart items would interact shows shallow systems thinking.

LIKELY FOLLOW-UPS: Interviewers often push deeper by asking how you would handle multiple line items which introduces collection or object-like state challenges inside Figma's current limitations. They might ask how you would format currency handle conditional logic like showing a discount above a threshold or persist cart state across frames. Another common pivot is accessibility: how does a screen reader know the subtotal changed when Figma prototypes have limited semantic output.

ONE CONCRETE EXAMPLE: Imagine a cart row component. Inside it define a number variable named qty with a default of 1. Add two buttons plus and minus with interaction triggers that set qty to qty plus 1 or qty minus 1. Then create a text layer for the subtotal and bind its content to an expression reading qty times 25. When the prototype runs tapping plus updates qty to 2 the expression re-evaluates to 50 and the text layer instantly reflects 50 dollars without any extra frames. If you want polish wrap the expression in a string template to render 50 dollars with a dollar sign.