Learn Origami

Adding Logic

Add logic to your transitions and flows.

Often when prototyping, we want interactions to only occur sometimes — when something is true or false, or to let multiple things control an interaction, such as two different buttons...

Scrolling Views

Add vertical scroll behavior to your designs.

Scrolling views are easy to build in Origami and highly flexible too. We’re going to learn how to use scroll by creating a basic Messenger prototype. Make sure you download...

Horizontal Scrolling

Create horizontal paging carousels.

Sometimes we want scrolling to be paginated, or in a carousel. We are going to build this Facebook Events prototype, with paginated scrolling, building upon what we’ve learnt in the...

Timed Animations

Create time-based, automatic animations.

Sometimes you would like an animation to occur simply on its own — as soon as a prototype starts, or with only a timer triggering it.

Sometimes you want multiple...

Multiple States

Interact with more than just two states.

We have learnt how to use the Switch patch to transition between two states, but how do we go between more than two, such as in a Tab...

Masking Layers

Add mask behavior to layers and their underlying children.

Masking in Origami is a lot like other design tools, with the added bonus of being able to use masks to create advanced interactions and animations. We are going to...

Orientation

Design for both portrait and landscape modes.

Change the layout of a photo viewer prototype, depending on whether the device is being viewed in a portrait or landscape position.

We will walkthrough the Interface...

Device Motion

Build prototypes using the accelerometer.

Learn how to build a prototype that utilizes the native device motion sensors. In this lesson we are going to use the device’s accelerometer to view a panorama photo as...

Text Input

Capture keyboard input in your prototype.

Use two Text Field components to build a prototype where you can enter information to sign up for a speculative Origami Studio newsletter. Once all of the information...

Introduction to Loops

Automatically repeat layers to create grids, tables, and more.

Using loops is a great way to reduce the complexity of your prototype and save time when repeating common elements. This Facebook Notifications prototype consists of one looped notification, with...

Interactive Loops

Add and capture interaction to instances of your loops.

Looped items in Origami are able to have interaction applied to them like any other layer in Origami would. In this Facebook Notifications prototype, we have applied a Color property...

Prototyping with Data

Request and use live data in your prototype.

Using live data is a great way to make your prototypes feel more realistic. In this tutorial, we’ll build an App Store prototype that downloads live data from

Create a Component

Build a reusable component out of layers.

Save time by creating a personal library of custom components like the iOS and Android component layers built into Origami Studio.

In this tutorial we’ll create a Document component, manage...

Create a System

Distribute a library of components with your team.

Create and share a library of layer and patch components with your team and keep everyone up to date by using an Origami System.

In this tutorial, we’ll...

Audio Metering

Visualize recorded and live audio

Intro

In this tutorial, I’m going to walk through some examples of using the Audio Metering patch in Origami. This patch allows you to measure the peak volume,...