States

Every prototype has multiple states it can transition between. In Origami, Switch patches help keep track of which state you are in. They are like light switches and can be toggled with interaction patches.

---

State patches

Switch ⇧S

The Switch patch is like a light switch: turning it on keeps it on, and turning it off keeps it off. They are helpful to build simple two-state interactions, e.g. showing and hiding comments in a popover.

Multiple Switch patches can combined with Logic patches (Or, And, Not) to build on top of each other, e.g. opening a composer with different attachment options which the user can toggle.

Option Switch

Option Switch patches are useful for mutually exclusive states that cannot coexist, e.g. a tab bar. Option Switches are commonly used with Option Pickers to pass different values depending the state. For example, if you wanted to change a navigation bar title between 3 states:

Counter

Counter patches are useful for mutually exclusive states that cannot coexist, and increment in a fixed order e.g. an onboarding flow.

Index numbers represent states

Both Switch and Option Switch patches output a number for the state that is active. Switch patches output a 0 (off) or a 1 (on), and Option Switch patches output a number starting from 0 for the first state, to 1 for the 2nd, and so on:

• Index 0 → Initial state / Off State
• Index 1 → 2nd state / On State
• Index 2 → 3rd state
• Index 3 → 4th state
• ...

---

Summary

• Manage state with Switch, Option Switch, or Counter
• States are represented with integers, starting from 0

---