Origami Studio Tutorial #6 | How To Interact with more than just two states – UX Hacker

Origami Studio Tutorial #6 | How To Interact with more than just two states – UX Hacker.

We have learnt how to use the Switch patch to transition between two states, but how do we go between more than two, such as in a Tab Bar for example?

We are going to rebuild this Instagram compose modal to learn how to interact with three or more states, and learn two core patch types while doing so.

Setting up
The starting tutorial files have the basics already set up. Our Layers panel contains a Group named Screens, containing our three compose options (Library, Photo, Video). Our Layers panel also contains a Tab Bar Group, with a tab corresponding to each screen.

Usually we would use a Switch patch to switch between states. A Switch patch however only supports two states. That means we could only switch back-and-forth two tabs.

We have three tabs to switch between in this prototype, so we need to take slightly different approach.

Switching between options
Insert an Option Switch patch by double-clicking on the Patch Editor, typing to find Option Switch, and then pressing Return ⏎. An Option Switch patch supports as many inputs as we need, and lets us use interactions to change between these options.

We know that the three different options we need to switch between in the Tab Bar Group are Library, Photo, and Video. We need to detect interaction on each of these.

Hover over the Library Group in the Layers panel, click Touch, and then Tap. Connect the Tap output of the newly-created Interaction patch to the first input of the Option Switch patch. Repeat this process for the Photo and Video Group layers, connecting to the following inputs in the Option Switch patch.

Tapping on any of the three Tab Bar items in the prototype is detected by its respective Interaction patch, and then passed to the Option Switch. The corresponding option in the Option Switch patch becomes its output.

Zero-based numbering
Options in the Option Switch patch (and also indexes elsewhere in Origami) count up from 0. Our first option is 0, the second is 1, the third is 2, and so on if we had more.

Picking options
Now that we can switch between options and have them pass through as the output of our Option Switch, how do we act on that? Add an Option Picker patch to our Patch Editor by double-clicking on the Patch Editor, typing to find Option Picker, and then pressing Return ⏎.

source