Learn Origami
Get up to speed in Origami Studio. Learn how to build, preview and share your prototypes.
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...
Previewing and Sharing
Preview your prototype on both simulated and physical devices.
Prototypes made in Origami can be simulated on screen as well as natively on mobile devices, allowing you to view changes as you make them. Prototypes can be exported to...
Coming From Code
See how Origami differs from programming.
Using functions and adding logic to your prototypes is straightforward in Origami, but a little different to what you might expect if you come from a programming background. If you...
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 horizontal 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...
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...