Skip to main content

Can you create a random flow by connection multiple screens to a single screen? Where you are directed to a new screen randomly, every time you start the flow. No same screen appears each time you hit next.

There is no apparent built in way to introduce randomness in prototypes, but you can achieve a pseudo-random effect by using a component loop.


Feel free to open and inspect the prototypes below.


With variables


In this example, I’ve created a randomizer component that changes between two variants every millisecond for infinity. Every time it changes, it adds 1 to a variable, and resets to 0 if it goes beyond 100, effectively limiting its range. When clicking the button, I grab the number from that variable and enter it into the box.


To adjust this for your use case, limit the random range to the amount of destination frames you have, and add a conditional that navigates to a frame depending on what the random number is.



Without variables


To achieve the same effect without variables, create five looping variants for the button, just like in the previous example, and then connect each variant to a destination frame.


You lose the ability to animate the button since its variants are used for the loop, but you can probably create a transparent randomizer and overlay it over a normal button to keep this functionality.



Reply