Introducing Origami for Quartz Composer

For easier interactive design prototyping

Today, the Facebook design team launched Origami (http://origami.facebook.com), a toolkit of patches and examples for Quartz Composer that makes it easier for designers to create interactive prototypes without writing code.

I’ve talked at length about the importance of investing in the right design tools for the job, and we’ve shared the Facebook design team’s use of Quartz Composer in designing Chat Heads and Facebook Home. But one of the most common bits of feedback that we hear is while Quartz Composer looks interesting, it has a pretty significant learning curve.

Most of us know how to drive a car, but it’s pretty damn hard to figure out on your own without somebody who knows it sitting down next to you and walking through how the controls work. It’s kind of the same with Quartz Composer. Luckily, we’ve had such a person at Facebook (*cough*Brandon!*cough*), but as we haven’t quite figured out cloning technology yet, scaling Brandon seemed challenging.

Still, we wanted to take some of the things we’ve learned and built—patches, fixes, documentation—and share them with the broader design community. We hope to continually improve this set of tools in the future.

If you’ve got some free time to tinker around over the holidays, check out Origami. We’d love to hear your feedback through our Facebook group.

Got more questions? Read on.

Why does interactive prototyping matter?

The process of designing should reflect the end product. If you’re designing a poster, then working on a static canvas makes sense. But more and more of us spend our days designing for interaction. We’re creating mobile and tablet UIs that respond to swipes, flings, taps, and presses. We’re designing for a world beyond just looking, pointing and clicking, but that gets into the realm of feel and manipulation—as Bret Victor so eloquently writes.

You can’t imagine designing a physical object without thinking about materials and how something will feel in the hand or respond to its environment. It’s the same with designing apps. For those who design with code, it’s a huge advantage to be able to work directly in the medium of the end product. But learning to code is a pretty big barrier, and even if you know how, it may still not be an efficient way to design. That’s where investing in better design tools comes in.

What is Quartz Composer?

Quartz Composer is an application for your Mac that lets you create motion graphics compositions by connecting dots rather than writing code. Some call it a visual programming language — basically, you place different patches (like functions in traditional programming) on screen. Some patches take inputs or produce outputs, which you can connect to other patches with connectors (“noodles”) to produce a composition.

It’s a lot easier to see how Quartz Composer works in action than to explain technically, so check out the examples included in the download.

How does Quartz Composer compare to other tools for interactive prototyping?

Today, there are a few commonly used ways to prototype:

1. Lightweight, simplified prototyping libraries like framer.js (developed by Koen Bok at Facebook, which we also use quite actively on the design team)
2. Motion graphics applications like AfterEffects or Flash
3. Writing application code (Objective-C or Java)

Like any tool, Quartz Composer has some strong pros and a few cons as well.

Pros:

1. Quartz Composer is state-based rather than time based (like AfterEffects). Which means the user can press a button, and upon pressing that button, something will happen and the state will be changed.
2. Prototyping with Quartz Composer is fast: You can change a composition (edit values, make new connections between patches, swap in a new image) on the fly without having to recompile or wait for that result to take effect in your prototype. This has a pretty significant speed advantage over writing code and having to wait for compile/build (worst case scenario) or even doing a bunch of browser refreshes. Additionally, somebody well-versed in Quartz Composer can throw together a fairly complex mock (how chat heads move around the screen, for example) with a few number of patches.
3. Quartz Composer compositions feel more self-documenting and therefore easier to understand than reading code. This is because the ports (parameters) and outputs are immediately obvious on the screen.
4. Quartz Composer is powerful. It’s built on OpenGL, the same technology that powers graphics in Mac and iOS apps, so you can design things that are hard or impossible to do with other tools, for example, lighting, meshes or ripples.

Cons:

1. Quartz Composer is pretty poorly documented. There aren’t many resources or tools to make it easy to ramp up.
2. The app is pretty buggy. It’s not uncommon to crash multiple times a day.
3. Quartz Composer was traditionally used for motion video graphics and not design prototyping. As such, it wasn’t designed with the design prototyping context in mind.

What, exactly, is Origami?

Origami is a free-to-use set of simple starter patches that allow for a number of common design patterns and interactions. Origami also comes with some example compositions to demonstrate the functionality of the patches.

What kinds of things can you build with Quartz Composer and Origami?

Using Quartz Composer and the provided patches in Origami, you will be able to easily:

1. Drag an image of your design into a device template (iPhone, Android and Windows phone templates are provided) and make that image scrollable within the device.
2. Easily hook in mouse input and keyboard commands to make something happen on the screen.
3. Implement common animations such as sliding panes and drawers, zooming and shrinking photos, rotating icons, etc with springs.

Are you going to release updates?

Yes, we’d like to release more examples, patches, documentation and videos in the future. We can’t promise anything by any date, but we’ll do our best. Meanwhile, if you’d like to contribute, please join our Facebook group and get in touch.

If you try out Origami and find it useful, Drew Hamlin is the person to thank for bringing it to life. He authored many of the patches and drove much of the work to make it publicly and freely available. Huge credit also goes out to Brandon Walkin for his work in advancing, teaching, and making fixes to QC, and Brian Frick for the design of the site. Shoutout also to Austin Bales Mike Matas, and Mac Tyler for their feedback and contributions to this release.

If you end up designing something cool with Origami, please share! We’d love to see it.