Basics

Interactions

Interactions

Interaction patches output information about user interactions (touches, swipes, key presses) in the viewer. Add interactions by hovering on a layer and pressing the Touch button, or by searching in the Patch Library.


Interaction patches

  • Interaction I This is the bread and butter of interaction in Origami. It can tell you when a user touches down or taps on a particular layer. It also provides the position of the touch within its parent group, and the amount of force applied when using a laptop, phone, or tablet that supports 3D Touch.

  • Scroll This is another common interaction in Origami. It lets you scroll a layer vertically or horizontally, with customizable physics. It can be set to Paging mode, which is useful for prototyping carousels.

  • Pop Switch This helps you quickly prototype a two-state, swipeable interaction (ex: swiping a card left and right). It also supports two-finger pinching in addition to swipes.

  • Long Press and Double Tap Captures long presses and double taps when connected to an Interaction patch.

  • Drag Make any layer draggable.

  • Keyboard K This shows whenever a key is pressed in the viewer.

  • Hover Allows you to capture hover interaction with a mouse.

Notes on touch detection

Layers need to be enabled and have opacity larger than 0 to receive touches. Touches in Layer Groups are propagated and shared with the parent groups, allowing you to build scrolling layer groups with tappable layers inside.


Summary

  • Interaction patches pass information about user interactions.
  • Interactions for a particular layer can be captured by using the Touch menu.
  • There are multiple types of interaction patches for capturing different types of interactions.