Welcome to Origami. We'll be building a simple prototype, and by doing so learn the fundamentals of using Origami as well as importing from design tools such as Sketch. Follow along by downloading the files that accompany this tutorial.
Copying from Sketch
Importing from design tools like Sketch is as simple as copying and pasting. First off, make sure you have the Sketch file from our lessons file open. Next, select the Photo layer (a landscape image of the Golden Gate Bridge), go to Edit > Copy ⌘C. In a new Origami prototype, navigate to Edit > Paste ⌘V.
We can then go back to Sketch and do the same thing with our Info Group, which contains a few text layers, an image, and a gradient. Navigate to to Edit > Copy ⌘C, head back to Origami and navigate to Edit > Paste ⌘V.
Origami Studio interface
On the left of the screen is the Viewer; where we see and interact with our prototype. On the right we have our Layers, and our Layer Inspector which lists the properties of the currently-selected layer. The middle area is known as the Patch Editor.
Organizing our layers
Start by selecting the Photo layer. We'd like this to be centered, so move the Anchor the center. Do the same with our Info Group; change the Anchor so that it sits at the bottom of the screen.
The first thing we want to do is add interaction to the Photo layer. To add interaction to a layer, hover over the layer in the Layers panel, click the Touch menu, and then click Tap.
This is our first patch; an Interaction patch. We'll cover patches in detail a little bit later on, but for now, keep an eye on the Down and Tap outputs whilst tapping on Photo in the Viewer. Both of these outputs flash corresponding to when Photo is pressed Down, and when released, which equals a Tap.
We want this to transition between two values of Scale. A Scale of
1 and a Scale of whatever fits in screen, which is about
0.38. The next patch we want to add is a Transition patch, since we are transitioning between two values. Add this patch by double-clicking on the Patch Editor ⌘⏎, beginning to type 'transition', followed by Return ⏎.
Make the Start input on the Transition patch equal
0.38 by typing
0.38 into the Start input field. Change the End input value to
1, since we know that's the Scale we want Photo to end at.
Connect the Down output of our purple Interaction patch to the Progress input of the Transition patch. Do this by clicking and dragging from the Down output into the Progress input of the Transition patch.
Connecting patches to layer properties
We need to connect the Transition output to the Photo layer's Scale property. Like we did with connecting Down to Progress, we can make connections from patches to layer properties.
Click and drag on the Transition output and connect it to the Scale property of Photo, this time directly in the Layers panel. You should now see that pressing Down on Photo causes the Transition to occur instantly between
Insert the Pop Animation patch between the two existing patches by connecting the Down output of the Interaction patch to the Number input of the Pop Animation patch, and then the Progress output of the Pop Animation patch to the Progress input of the Transition patch.
You might start to see that everything in the Patch Editor flows from left to right. Now when I tap and hold Down on Photo, this Transition is eased — or animated.
You might see that it is triggering but not holding that state. That is because a Tap only lasts for one frame, and triggers when you release your finger.
Like we did with the Pop Animation, insert this patch the Interaction patch and Pop Animation patch. Connect the Tap output of the Interaction patch into the Flip input of our Switch patch. Finally, connect the output of the Switch patch into the Number input of our Pop Animation patch.
Now a Tap will trigger a Flip on the Switch patch, which is sent onwards to the Pop Animation, and then to the Transition patch. That value will remain until we Flip the Switch back by tapping on Photo.
We know that we want our Text layers to hide and show, as well as the background Color Fill to change colors. All of this should be happening within the same physical interaction to our Photo changing in Scale.
Double-click on the Patch Editor ⌘⏎ and begin to type 'transition'. Press Return ⏎ when Transition appears. Connect the existing output of the Pop Animation patch into the Progress input of this new Transition patch.
We want our Info to start at an Opacity of
0 and end at on Opacity of
1, so we don't need to make any changes to the default inputs of this Transition patch.
Changing transition type
Now when we interact with the prototype, the Color Fill layer transitions from a white fill color when Photo is scaled down (zoomed out), to a black fill color when Photo is scaled up (zoomed in).