Origami Studio Tutorial For Mobile Prototyping: Getting Started

Building a News Feed

The feed view is pretty basic at the moment. A single story which doesn’t respond to any interaction. Time to fix that!

First, add vertical scrolling to the view. Since this is such a common UI paradigm, Origami Studio makes it really simple. Locate the group called Feed Screen Content within the Feed Screen group — it contains all the content in the feed. On the right hand side, click the Touch button and select Scroll Y in the dropdown. Verify that swiping the feed in the viewer now works correctly.

Our feed is still looking a little thin, with just a single story. You could add multiple stories individually, but this would be tedious and error-prone. Moreover, it would be difficult to update if you later want to make a change across all stories.

Don’t worry, Origami has you covered. Enter Loops! Just like in code, a loop allows you to repeat an operation; in this instance, displaying and laying out a layer or group.

Going Loopy

Add a Loop patch to your project, followed by Multiply (x) and Plus (+) patches. Connect the Index output from the loop patch to the first input in the multiply patch, and the output from the multiply patch to the first input in the plus patch.

Update the second input in the multiply patch to be 190, and the second input in the plus patch to be 50. This tells the prototype to set the output from the plus patch to be 190i + 50, where i is the index in the loop. Connect the output from the plus patch to the Y Position property of News Cell group and watch the feed story is repeated along the vertical axis.

Grid Layout

Building layout manually like this is fairly easy, but Origami provides an easier method that’s more declarative. Delete the four patches added in Going Loopy and insert a Grid Layout patch. Set the inputs for the Grid Layout patch as follows:

• Columns: 1
• X Position: 0
• Y Position: 50
• Width: 375
• Item Height: 190
• Padding: 0

Connect the Position output of the Grid Layout patch to the Position property of News Cell. The Grid Layout patch hasn’t been told how many items to add. To do this, you’re going to use a Loop Builder patch. Loop Builders are like data: they specify the number of some type (text, images, colors) and can be used to populate loops with values.

Find the project folder containing the prototype in the Finder. Locate the News Items directory and drag it, from the Finder, onto the Patch Editor. This creates a Loop Builder patch containing the four images in the directory. Connect the Index output from the Loop Builder patch to the Index input of the Grid Layout patch.

Notice the change in the Viewer: the Feed is back! Finally, connect the Images output from the Loop Builder to the Image property of the Cell Image layer within the News Cell group. Each cell now has a unique image.

Adding Personalized Content

To finish the Feed, add two new Loop Builder patches. The first will be connected to the Text property of the Title layer and the second to the Text property of the Subtitle layer. Create the two patches manually. In the contextual menu (right-click on the patch title) set the number of inputs for both to 4, and the type to Text.

Paste the following text into the patch, one line for each input:

Titles

• i18n
• Top Libraries
• Android Wear
• Transitions

Subtitles

• In this tutorial, learn how to prepare your app to support multiple languages, including regional numeric formats, rules for plurals, and much more.
• What are the best iOS developer libraries? Ask 10 colleagues and you’ll get 10 different answers. This article reveals the most popular — by the numbers.
• In this Android Wear tutorial, you’ll learn how to build an Android app for the Android Wear platform using the Kotlin language.
• iOS supports custom transitions between view controllers. In this tutorial you’ll implement a UIViewController transition animation like the Ping app.

Connect the Strings output of each Loop Builder patch to the Text property in the relevant layer. Your Feed screen should now be populated with dummy data, each cell containing its own personalized content.

More Complicated Transitions

If you own an iPhone and have ever used the Apple News app, you may have noticed the subtle transition when navigating from the main feed to an individual story. The GIF below is a demonstration in case you’ve not. Notice how the push transition animation appears to expand from the center of the image in the item cell, and how the pop animation zooms back to that image. Pretty neat, huh?

In this final section of the tutorial you’re going to learn how to build a prototype with this kind of effect.

Interactions

In order to respond to touch events, the prototype needs to contain interactions. An interaction is defined as a touch event on a specific layer, and Origami provides the Interaction Patch for just this purpose.

Add an Interaction Patch to the prototype. Make sure the Enable input is ticked and set the Layer input by clicking on None and choosing the Cell Image layer.

In the viewer, click on the top most image in the prototype and watch the Down and Tap outputs trigger. Add a second Interaction patch under the first, and this time select the Story Image layer within the Detail Screen Group for its Layer input. These two interactions will form the basis of your transition: clicking the image in the cell to push the Detail Screen, then clicking the Story Image in the Detail Screen to pop back to the Feed.

Next, add a Switch patch, and wire it up so the Tap output from the first interaction turns the Switch on, and the Tap output from the second interaction turns it off again. Wire the output of the switch to a new Classic Animation patch. This Classic Animation is going to drive six transitions to create the effect.