Prototyping with Facebook's Origami

I've used Apple's Quartz Composer on and off for years, but it's always been a lot of work to get even a simple prototype up and running. That's all changed now that Facebook have released Origami. I've been using it a lot recently and it's amazing, if you're a UI or UX designer and have yet to build something with it you're seriously missing out.


I know a lot of people find the look of Quartz Composer quite intimidating, but it's really not that bad and Origami makes it so much easier. In case you're still wondering exactly what Quartz Composer is, here's Apple's official definition:

Quartz Composer is a development tool for processing and rendering graphical data. Its visual programming environment lets you develop graphic processing modules, called compositions, without writing a single line of code — Quart Composer User Guide

One last thing before we get started, you'll need to install Quart Composer and Origami. To download Quartz Composer you need to be a registered Apple Developer.

What Are We Building?

We're going to put together a quick iPhone prototype that animates a sign-up sheet into the main view. You could put this together with one of the many other prototyping tools out there, the difference here is we can apply much more sophisticated animations and interactions. In this prototype we'll apply some bounce/elasticity to the sign up sheet as it pops into view.

The gif below is a preview of the what we're going to build. Notice how the background also dims when the login sheet pops up. Pretty nifty, huh?

iPhone Prototype

Best of all, this doesn't even scratch the surface of what's possible. I've never used or seen any other prototyping tool that's as flexible as Quartz Composer and Origami.

Step 1: Setting the Scene

Launch Quartz Composer and pick a "Basic Composition" from the template chooser, this is essentially a blank canvas. Next, drag over the following patches from the Patch Library: Phone Dimensions, Layer Group and Phone, these are all part of Origami. Now connect the inputs and outputs of these patches as shown below to get the iPhone displaying in the "Viewer window".

Step 1

You can open the "Viewer window" by pressing Command-Shift-V, you should see an iPhone on a white background. You'll notice the screen of the iPhone is blank, that's because our Layer Group macro is empty. The Layer Group draws to the iPhone screen because you hooked up the "image" output to the "Screen Image" of the Phone patch.

Double click the Layer Group macro patch to open it, you'll notice it's empty just like our iPhone screen. In the next step I'll walk you through adding some content and interactions. Note: To exit a Macro patch you can press Command-U or use the "Edit Parent" button in the toolbar, this essentially takes you back up a level.

Step 1 macro

Step 2: Adding Some Interactions

Once inside the Layer Group drag and drop these two images (01 Welcome.png and 02 Sign Up.png) in from the finder. You should seen them displayed on the iPhone screen in the Viewer window.

Make sure the "01 Welcome.png" layer is set to draw first (1), you can do this by choosing from the drop down in the top right hand corner of the layer.

Origami Image Drop

To make the prototype interactive, you're going to need to drag in the following patches to the Layer Group: Interaction 2, Switch, Bouncy Animation, and Transition.


Next you need to connect the patches up to bring the prototype to life:

Origami Link

You'll also need to adjust the Transition start and end values to control the position of the sign up sheet. To do this select the Transition patch, and bring up the Patch Inspector (Command-I), set the Start Value to -800 (so the alert is off screen) and the End Value to 0.

If you've done everything correctly your prototype should now hide and show the sign up view when you click on the iPhone screen. You can also have fun changing the friction and tension in the Bouncy Animation patch. I should warn you that this is stupidly addictive, go give it a try.

Step 3: Dimming the Background

While this looks great, what we'd really like to do is dim the background of the app mock-up when the sign up pops into view. To do this you'll need to drag in another Transition patch and hook up the Bouncy Animation to it just like before, but this time we connect the output Value to the Alpha input on our background layer.

Final Layout

That's it! You should now have a basic fully working prototype. If it's not working or you got lost following the tutorial you can download the completed version below.

Examples on GitHub

The best way to get started with Quartz Composer is to just dive in and experiment. I've uploaded this project to GitHub along with a few other examples to help you get started — Have fun!

Further Learning

There seem to be new resources and tutorials for Origami popping up every week. Here's a few of the better ones I've come across in the last few weeks. If I've missed any good resources from the list please let me know.