Prototype a conditional Submit button with Figma variables

WHAT THIS TESTS: This question evaluates whether a designer understands Figma's modern prototyping paradigm beyond basic click-throughs. At the senior level, interviewers want to see fluency with variables, conditional logic, and expression-based interactions introduced in Figma's advanced prototyping updates. The core concept is state management: using local variables to capture user input, evaluating that state at runtime, and dynamically updating UI properties without creating redundant artboards. It also reveals whether the candidate understands the difference between presentational components and interactive logic layers.

A GOOD ANSWER COVERS: First, the candidate should mention creating local variables scoped to the prototype, specifically string variables for the email and password fields and a boolean variable for the button's enabled state. Second, they should describe wiring each input field to update its corresponding string variable on text change, typically using the Set Variable interaction. Third, they need to explain the conditional check: on each input change, evaluate whether both string variables are not equal to empty strings. Fourth, they should describe toggling the boolean variable based on that conditional result and binding the Submit button's interactive property, such as its main component variant or navigation action, to that boolean. Optionally, they might mention using the boolean to swap between disabled and enabled visual styles via variant properties or layer visibility.

COMMON WRONG ANSWERS: A major red flag is suggesting manual duplication of frames to represent every possible state, such as empty form, email only, password only, and both filled. This indicates the candidate is stuck in a pre-variables workflow and lacks scalability thinking. Another red flag is confusing component properties with prototype variables, for example claiming that auto-layout or variant switching alone can detect text content without any variable binding. A weaker answer might also omit the conditional logic entirely and suggest an on-click check on the button itself, which fails the requirement that the button becomes enabled reactively as the user types.

LIKELY FOLLOW-UPS: The interviewer might ask how to handle validation beyond emptiness, such as regex email checking, which in Figma would require more granular conditionals or nested if-statements if supported. They might also ask how to scale this across multiple forms, prompting a discussion about variable collections, modes, or component properties paired with variables. Another follow-up is error handling: how would you show inline validation messages using variables, or reset the form state after submission.

ONE CONCRETE EXAMPLE: Imagine a login frame with two text inputs and a primary button. Create local variables named emailInput and passwordInput as strings, and isFormValid as a boolean defaulting to false. On the email input layer, add an interaction trigger for On Change that sets emailInput to the typed text, then add a conditional that checks if emailInput is not empty and passwordInput is not empty, setting isFormValid to true if both pass, else false. Repeat the same logic on the password input. Bind the Submit button's click interaction to only fire when isFormValid is true, and bind its visual state to a variant property driven by that same boolean so it appears grayed out when false and blue when true.