Learn Origami

Get up to speed in Origami Studio. Learn how to build, preview and share your prototypes.

Common Interactions

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

Screen Transitions

Create screen flows.

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

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

Smarter Interactions

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

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


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

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

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