Advanced prototyping with variants that change state using variables

Let’s say that when the user clicks an answer you:

• Set variable “ButtonNextState” to “Enabled” (Or whatever your component variant name for that state is)
  And
• Set variable “AnswerClicked” to “True”

You can use a Conditional (Or “Check If/Else” in UI3) on your button instance. (Not in your Component):

On click
**If** "AnswerClicked" == True
Navigate to [Question 2]

You can leave the Else empty, in which case the button does nothing, or you can use it to trigger a message like “Please select an answer”

As the interaction is on the instance, Figma doesn’t care which variant of the instance you’re showing.

If you need to do 2 checks, for example you want the user to go to a “fail” page when they get 3 questions wrong:
When they click the (wrong) answer:

• Set Variable “WrongAnswers” == “WrongAnswers” + 1

and on the “Next” button:

On click
**If** "AnswerClicked" == True AND "WrongAnswers" < 3 //(less than 3)
Navigate to [Question 2]
**Else**
Navigate to [Fail]

On the next page you can reset the variable for “AnswerClicked” to “False” with the “After Delay” option on the frame and setting it to 1ms. (We really need a “On load” option for this, but this workaround works for now)