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.
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.
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.
The next thing we need is a way to get back to our Screen Main. A Hit Area named Dismiss Boomerangs has already been created for this purpse, inside of Screen Boomerangs.
Like before, make that interactive by hovering over Dismiss Boomerangs, clicking on Touch, and then clicking Tap.
Now tapping on the cross in our prototype should take us back to Screen Main, and clicking on the thumbnail should take us to Screen Boomerangs.
Changing transitions types
One minor detail is that the Boomerangs actually come out from the side in this prototype, whereas in the real app they come from the bottom. Screens in Origami support both of these transition types.
Go to the Transition property of our Screen Boomerangs and it from from Push to Modal.
Now clicking on the thumbnail should bring Screen Boomerangs up from the bottom, and tapping on the cross should bring Screen Boomerangs back down.
Finishing the flow
Add this Screen to our flow by hovering over Open Share, clicking on Touch, and then clicking on Tap. Like before, connect the Tap output of this to Present Screen Share.
Tapping on the first thumbnail should now take us to the Share Screen. The last screen transition we want to add is returning back to Screen Boomerangs.
Again we’ve already set up a Hit Area for this under Screen Share called Dismiss Share. Hover over Dismiss Share, click Touch, and then click Tap. Connect the Tap output of this new Interaction to Dismiss Screen Share.
Interaction within screens
We should have our whole screen flow worked out now. Anything we want to do within screens is just as easy.
For example, we can make the Boomerangs grid scrollable. The Boomerangs layer itself goes beyond the height of the Viewer, with a few more thumbnails.
Open Screen Boomerangs in the Layers panel. Hover over the Boomerangs layer, click on Touch, and then click Scroll Y.
Offset within screen transitions is a standard iOS Push transition behavior, however not crucial to creating screen flows. To create an offset in this prototype we need to first know what the Screen Share offset is.
Hover over Screen Share, click on Touch, and then click the X Offset output.
You might offset change as we go between the two screens. Connect this outputted value to the X Offset property of the Screen Boomerangs by clicking and dragging into the Layers panel.
Now when we go between screens, the outputted Screen Share Offset affects the Screen Boomerangs Offset input too.