Getting Started

An introduction to using Origami Studio.

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.

With our Sketch layers already on the macOS Clipboard.
With our Sketch layers already on the macOS Clipboard.

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.

The Origami Studio interface.
The Origami Studio interface.

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.

Change the Anchor by clicking on the desired point, or by clicking and dragging to the desired point.
Change the Anchor by clicking on the desired point, or by clicking and dragging to the desired point.

Adding interaction

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.

The first two outputs, Down and Tap, should flash when Photo is tapped.
The first two outputs, Down and Tap, should flash when Photo is tapped.

Transitioning values

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.

Start input should be `0.38` and End input should be `1`.
Start input should be 0.38 and End input should be 1.

Connecting patches

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.

Be sure you are connecting from the Down output.
Be sure you are connecting from the Down output.

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 0.38 and 1.

Adding animation

The next thing we want to do is add animation. Double-click on the Patch Editor and begin to type 'animation'. Press Return when Pop Animation appears.

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.

Left-to-right flow

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.

Tap states

We would like this Transition to occur when we tap on Photo, not just when we press Down. Try connecting the Tap output of the Interaction patch to the Number input of the Pop Animation patch.

Creating a new connection to an input will replace an older one.
Creating a new connection to an input will replace an older one.

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.

Switching states

We need to add a Switch patch to our Patch Editor. Double-click on the Patch Editor and begin to type 'switch'. Press Return when Switch appears.

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.

Multiple transitions

Interaction, Switch, Pop Animation, and Transition make up the bulk of your prototyping in Origami. Mostly because they can be re-used and extended upon for other interactions.

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.

Finish by clicking and dragging from the output of the new Transition patch to the Layer Inspector of the Info Group, and connecting to the Opacity property.

You can also drag to the layer name in the Layers panel. The layer will expand to show its properties.
You can also drag to the layer name in the Layers panel. The layer will expand to show its properties.

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.

Your patches and their values should looks similar to this.
Your patches and their values should looks similar to this.

Changing transition type

Lastly, add one more Transition patch to the Patch Editor. Right-click or Control-click this Transition patch and change the Type to Color in the drop-down menu.

We want the starting fill color to be white, and the end to be black. Like before, connect the output of the Pop Animation Progress into the Progress input of the new Transition patch.

Finally, connect the output of our Transition patch to the Color property of the Color Fill layer.

You can also drag to the layer name in the Layers panel. The layer will expand to show its properties.
You can also drag to the layer name in the Layers panel. The layer will expand to show its properties.

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).

Next Up

Previewing and Sharing

Preview your prototype on both simulated and physical devices.