Describe how you would use variables and conditional logic to simulate input validation

WHAT THIS TESTS:

This question tests your fluency with Figma's advanced prototyping features, specifically variables, string binding, and conditional interactions. At the senior level, interviewers want to see that you think in terms of state machines and dynamic data rather than static artboards. They are checking whether you understand how to capture user input, evaluate it at the right moment, and branch the experience based on that evaluation. It also reveals whether you know the difference between prototype logic and production code, since Figma uses a visual node-based approach rather than scripting.

A GOOD ANSWER COVERS:

A good answer hits five specific mechanics in order. First, create a local string variable to hold the password value and bind it to the text input layer so that every keystroke updates the variable. Second, add an On Click interaction to the Submit button that opens the conditional logic panel. Third, write a condition that evaluates whether the password variable length is less than 8. Fourth, branch the outcome: if the condition is true, navigate to an error state frame or set a boolean variable to true that controls the visibility of an error message layer; if false, navigate to the success or dashboard frame. Fifth, mention resetting the error state, either by setting the boolean back to false on input change or by ensuring the error layer is hidden by default so the prototype can be retested immediately.

COMMON WRONG ANSWERS:

The biggest red flag is proposing multiple hardcoded frames for every possible password length or error state, which ignores the variable system entirely. Another red flag is suggesting you check the condition on text input rather than on submit, because the requirement explicitly says after the user clicks Submit. Some candidates also forget to bind the input field to a variable and instead describe changing text manually, which breaks the realism of the prototype.

LIKELY FOLLOW-UPS:

An interviewer might ask how you would handle additional rules, such as requiring a number or special character, which would involve adding more conditions with AND or OR logic. They might also ask how you would show real-time feedback, like a strength meter, which would require evaluating length on input rather than click, or how you would manage focus states and keyboard accessibility within Figma's constraints. They could also ask how you would scale this to a design system, suggesting the use of reusable component properties alongside variables.

ONE CONCRETE EXAMPLE:

Imagine the password field is named Input Password and the Submit button is named Btn Submit. Create a string variable called password. Bind Input Password to password using the text content property. On Btn Submit, add an On Click interaction. Add a condition: if password.length is less than 8, then Set Variable showError to true and navigate to the same frame so the error message layer becomes visible. Else, navigate to the Dashboard frame. The error message layer uses a boolean variable showError to toggle visibility, so the same frame handles both valid and invalid states without duplication.