Skip to main content

I created a prototype in Figma of a step-by-step sequence of 5 stages for a barbecue assistant:



  1. Index

  2. Guests

  3. Date

  4. Location

  5. Meat


Frame 1


In the first step (Index), you can choose which will be the second step. At the top of the screen, there’s a numerical sequence from 1 to 5. Below that, there’s a button to proceed. If you choose “Guests,” you’ll follow the normal order of screens (2, 3, 4, 5) when clicking forward. However, if you choose “Meat,” then the order should be 5, 2, 3, 4, and so on.


Since any of the next options could be the number 2, how can I create rules using variables and conditional statements to update the sequence in the prototype?

Hi @Jose_Luis


You only need one variable to achieve this: a string variable. I’ll name it start-stage, but feel free to use any name you prefer in your file 😉


On the view containing the first stage, you have to add an interaction for each item, which will consist of two actions:



  1. Set the variable start-step to the step number. For example, for “Invitados,” it would be 2.

  2. Navigate to the frame that contains the connected step.

    It should look like this

    image


Then, in every stage, on your “Adelante” button, add an interaction. The goal here is to check what the start-stage was and, based on that and your current position, decide where to go next. Basically, you want to check:



  • Is the current stage the start-stage? If so, go to stage 2, unless start-stage was 2, then go to 3.

  • Is the next stage the start-stage? If so, jump to it; otherwise, go to the next stage."


Hope it helped

Reply


Terms & ConditionsCookie settings