Origami Studio Tutorial #1| Adding logic to your transitions and flows – UX Hacker

Origami Studio Tutorial #1| Adding logic to your transitions and flows – UX Hacker.
—
Often when prototyping, we want interactions to only occur sometimes — when something is true or false, or to let multiple things control an interaction, such as two different buttons having the same effect.

This is called adding logic, and we’re going to learn how do this in Origami by building an Instagram Direct Messages prototype.

Know some code?
If you’re coming from a code-based background, such as JavaScript or Framer (CoffeeScript), Origami might be a bit different than you are used to. We recommend that you visit Coming From Code before continuing.

Setting up
You should notice when you open the file that some core interactions have already been created.

The basis of this prototype is centered around the direct messaging functionality found in Instagram. We have our Send To layer, which opens the Direct Messages Modal Group, and the Cancel layer which in turn closes it.

On closer inspection, our prototype contains the Direct Messages Hit Area. Interacting with this layer causes the Switch to Turn On, and tapping on the Cancel layer causes the Switch to Turn Off.

Or
Ideally a Tap on Color Fill would also close Modal. Hover over Color Fill in the Layers panel and click Tap under the Touch menu.

A new Interaction patch should appear on the Patch Editor.

In the Viewer, try opening Modal and then tapping on Color Fill. Looking at our new Interaction patch we can see see that our tapping is detected.

source