How would you conditionally enable Submit after checking a terms checkbox?
Tests Figma advanced prototyping with boolean variables and conditionals. Strong answer: create a boolean for checkbox state, set it on click, then conditionally enable Submit only when true.
WHAT THIS TESTS: This question evaluates whether you understand Figma's advanced prototyping capabilities beyond basic click-throughs. Specifically, it checks if you know how to use boolean variables combined with conditional actions to create dynamic, state-driven interactions without duplicating screens.
A GOOD ANSWER COVERS: First, create a boolean variable in your variable collection to track the terms agreement state. Second, apply this variable to the checkbox layer so it can control checked or unchecked visuals, or simply use it as a stored state. Third, add an interaction to the checkbox with a trigger like On click and an action to Set variable, toggling the boolean from false to true. Fourth, on the Submit button, use a conditional action with an if statement that checks whether the boolean variable is true before allowing the navigation or success action to fire. Fifth, mention binding the button's visual state, such as opacity or color, to the same boolean so it appears disabled until checked.
COMMON WRONG ANSWERS: Describing a workflow where you manually create separate frames for checked and unchecked states and wire them together with simple interactions. Suggesting component variants alone without variables to handle the logic. Proposing external plugins or code overrides when the native variable system is the expected solution. Forgetting to mention conditionals and only describing setting the variable without checking it before submission.
LIKELY FOLLOW-UPS: How would you handle form validation for multiple required fields using the same pattern? Can you use expressions to count completed fields and enable submit only when all are filled? How would you reset the form state when the user navigates back? What is the performance impact of using many variables in a complex prototype?
ONE CONCRETE EXAMPLE: Imagine a three-step onboarding flow. On the final review screen, there is a terms checkbox and a Submit button. You create a boolean variable named termsAgreed defaulting to false. The checkbox has an On click interaction that sets termsAgreed to true. The Submit button has an On click interaction with a conditional action: if termsAgreed is true, navigate to Success screen; else, do nothing or show an error overlay. You also bind the Submit button's opacity to termsAgreed so it sits at 40 percent when false and 100 percent when true, giving immediate visual feedback.
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.