Prototyping with origami

Människa Maskin
Feb 27 · 5 min read

The best way of exploring new product ideas is to create some kind of prototype. By spending some time on this you could quickly get a feeling about how the product will (or at least could) turn out.

A prototype could be anything from a pile of papers (that is where we usually start our investigation of new ideas) to something fully interactive that you could actually try out on the designated medium for your service.

Facebook recently released the first full version of Origami Studio — a tool that is made for the purpose of prototyping applications. On our last design sprint we decided to try it out for the first time to see where it could take us. Here is our findings. (for a deeper understanding, walk through the tutorials on the Origami website)

Easy to get started

You do not need more than a few minutes with Origami to create a simple mockup of a mobile application. We started with the iPhone 7 template. Then we added some iOS screens. For each screen we added an image with the right dimensions (750x1334 pixels).

By adding some hit areas and interaction patches connected to the present/dismiss properties on the different screens, we had a very simple prototype where you could navigate through the different screens in the application.

Try it out on your phone

After adding the interactions above, it was time to test the prototype on an iPhone. To do so, we needed to download the application Origami Live to the phone and connect it to the computer, then export a runnable version of the prototype to the phone. After that, the phone can be disconnected from the computer and the prototype will stay on the phone. Perfect if you want to demonstrate the application or put it in the hands of some test users!

Scrolling with a native feeling

A very common interaction in mobile applications is vertical scrolling. Adding this to an Origami prototype is very easy as well. Start with creating an image of the content you want to scroll through — preferably higher than the screen height of the device you want to run it on. Then click on the touch button on your image object and choose Scroll Y. That is basically it (you might need to adjust the image position a bit).

Working with Sketch

If you are creating your design or wireframes in Sketch, it is fairly easy to make your prototype more alive. Copy/paste your content from Sketch right into Origami. Then you can use interaction patches to change the different properties such color, position and size of your objects.

Visualised programming

As described in the beginning of this post, it is quite easy to get started with Origami. But prototyping in Origami becomes more and more like some kind of visualised programming the more advanced your prototype gets. Here is an example with a sliding menu.

To make a menu slide in from the left by pressing a button, you need to connect an interaction patch to the button object. Then you need to connect the interaction patch to a switch patch. The switch needs to be connected to an animation patch. The animation needs to be connected to a transition patch and the transition needs to be connected to the X position property of the menu object.

This screenshot illustrates that quite much logic needs to be added to create what seems to be a quite simple interaction. Because of this, you might need to have some basic experience in programming. On the other hand — if you have created the interaction once, you could just copy/paste it into where you want to use something similar next time.

Prototype a few things at the time

Our first approach was to create a very rich prototype with all the different interactions we could think of. Then we realised that there are a few issues with having too much content in the same project.

It felt hard to keep a good structure of all the different patches laid out in the same workspace and eventually Origami started to feel a bit slow. Even though it would be a great experience to have everything in the same demo application on your phone, it might be better to keep the different screens in separate origami files. At least when working with the prototype. Then you could copy/paste everything into the same project when you are finished with the different details.

By looking at the different tutorials that the Origami team provides, you get the feeling that the tool is intended to be used in this way where a single origami file just demonstrates one or two features.

Start with what is necessary

If you are creating an early stage prototype of your project, it is wise to not spend too much time on the details. Start with creating the interactions that are absolutely necessary. Then — if you have a lot of time for it — you could try to do the more advanced stuff to enrich the experience.

The sky’s the limit when it comes to creating cool animations and interactions in Origami, but you will need some practise. It is quite easy to end up with what looks like a spider web of patches in your workspace.

But this is just the beginning

Origami is getting a lot of new updates at the moment. There are a lot of small things that could be improved and hopefully they will in a near future.

Creating a prototype of our latest project idea took around four hours (after a few days of learning the tool) and the result was a quite solid interactive prototype ready for user testing and evaluation. Try Origami next time you want to create a prototype — after all it is free and will give you a lot of value.

Människa Maskin

Written by

Stockholm based web and app studio -