Origami Studio Tutorial #4 | How to Create Screen Flows – UX Hacker

Origami Studio Tutorial #4 | How to Create Screen Flows – UX Hacker.
—
Creating screen flows in Origami is easier than you might think, and still allows for some more complex interactions within screens.

We are going to recreate the Instagram Boomerang interface, with scrolling behavior in one of the screens. It even has some of the more advanced iOS behavior such as offset as the screen moves.

Screen
The starting tutorial files have three Screen layers set up already. If you need to add more, click on the New Layer button ⇧⌘N and type to find Screen.

Screen start state
Screens are presented by default, so right now, they are stacked on top of each other. Click Screen Share and change the Start State to Dismissed.

Restart the prototype by clicking on the Restart Prototype button in the Viewer toolbar, and then repeat the process for Screen Boomerangs; click on the Screen Boomerangs layer, change the Start State to Dismissed, and then click the Restart Prototype button.

The last screen is Screen Main. It is a regular Group layer since it is not going anywhere.

Linking screens
The first screen transition is from Screen Main to Screen Boomerangs. We need a Hit Area to take us there.

A Hit Area named Open Boomerangs exists within Screen Main, covering the thumbnail in the Viewer. Make it interactive by hovering over Open Boomerangs, clicking on Touch, then clicking on Tap.

Connect the Tap output of the Open Boomerangs Hit Area to the Present property of Screen Boomerangs. Tapping the thumbnail in Screen Main should now open Screen Boomerangs.

source