Dynamic Counter: State in Figma

WHY IT EXISTS: Static mockups show state A and state B side by side, but real apps transition between states inside a single component. Designers needed a way to prototype numeric controls that actually accumulate or decrease values during user testing, without building a coded frontend. Dynamic counters bridge that gap by letting a Figma prototype hold simple numeric state.

THE MENTAL MODEL: Think of it as a spreadsheet cell wired to two buttons. One cell holds the current count, a text layer displays that cell, and the buttons contain formulas that add or subtract one. In Figma terms, the spreadsheet cell is a local number variable, the formulas are prototype interactions with simple math, and the display is a text layer whose content is bound to that variable.

HOW IT WORKS: Start by creating a local number variable with a default value such as zero. Build your counter component with a text layer for the number and two button layers for increment and decrement. Bind the text layer to the variable so it always reflects the current value. Then add prototype interactions to the buttons. On tap, use the Set Variable action to change the number variable by a fixed amount, such as plus one or minus one. If you need guardrails, add a condition so the decrement button only fires when the variable is greater than zero. Because the text layer is bound to the variable, the display updates instantly across every instance of the component.

WHEN TO USE IT: Use dynamic counters whenever you are usability testing flows that require quantity selection, such as adding tickets to a cart, setting a timer, or configuring a multi-step wizard. They also shine in design system documentation, where a single interactive component can demonstrate minimum, maximum, and default states without maintaining separate frames.

WHEN NOT TO USE IT: Do not use dynamic counters when the numeric logic grows complex, such as calculating tiered pricing, inventory limits pulled from an API, or multi-field validation. Figma variables handle simple arithmetic and conditionals, but they are not a programming environment. If the counter needs to influence other unrelated components on the same page, you may hit the limits of variable scoping and end up with brittle workarounds.

ONE CANONICAL EXAMPLE: A conference ticket quantity stepper on a checkout page. The component shows the current ticket count, a minus button disabled at zero, and a plus button capped at ten. Each tap updates the variable, which simultaneously changes the displayed count and could theoretically feed a total price variable elsewhere on the page. During testing, stakeholders can tap through the flow and watch the numbers react exactly as they would in production, surfacing edge cases like zero-state copy or maximum-inventory messaging before engineering writes a line of code.