Create a counter where clicking '+' increases the number by one
Tests Figma number variables and Set variable action. Use a number variable on the text, then add an On click trigger on the plus button with Set variable and an expression to add one. Red flag: using duplicate frames instead of a single dynamic variable.
WHAT THIS TESTS: This question checks whether you understand Figma's prototyping variables beyond basic click-throughs. The interviewer wants to see if you know the difference between static designs and dynamic prototypes, and whether you can use a number variable with an interaction to mutate state. At the senior level, they also care if you mention expressions or conditionals, but for a beginner prompt, simply knowing the Set variable action is the baseline.
A GOOD ANSWER COVERS: First, declare a number variable in the local collection and bind it to the text layer that shows the counter value. Second, select the plus button and create a prototype interaction using an On click trigger. Third, set the action to Set variable, choose the counter variable as the target, and set the value using an expression that adds one to the current variable value. Fourth, confirm the text layer is actually consuming the variable so the display updates automatically without extra frames.
COMMON WRONG ANSWERS: A major red flag is suggesting multiple frames where each frame shows a different hardcoded number and the plus button simply navigates to the next frame. That reveals you do not know how variables work in Figma. Another red flag is using a string variable instead of a number variable, which prevents math operations. Some candidates also forget to apply the variable to the text layer before setting up the interaction, which means the prototype logic runs but nothing visible changes.
LIKELY FOLLOW-UPS: The interviewer might ask how you would add a decrement button, which is the same pattern with a subtract expression. They could ask how to prevent the counter from going below zero, which introduces conditionals. They might also ask how to reset the counter, which is another Set variable action hardcoded to zero. If the role is senior, expect a question about scoping the variable across components or using variable collections for dark mode toggles alongside the counter.
ONE CONCRETE EXAMPLE: Imagine a quantity selector for an ecommerce cart. You have a frame with a label reading 1 and two buttons, plus and minus. You create a number variable named qty, apply it to the label text, then add an On click interaction to the plus button. The action is Set variable, target is qty, and the value is an expression that reads qty plus 1. When you play the prototype, each click increments the label in real time within the same frame.
Read the original → help.figma.com
Get five bites like this every day.
Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.