We’ve already waxed poetically about Facebook’s new app Paper , which reskins the bloated Facebook experience to feel like a top-tier interactive media product. The Facebook feed is reimagined as a grid of cards that put video and images first, and you can explore them through innovative gestures–like tilting your camera to pan through a panoramic photo. Paper is part of a new initiative announced recently by Mark Zuckerberg, to imagine the mega social network as a series of discrete apps –no doubt to compete with the next wave of social media and news startups without offending the users of Facebook’s core service.

But what you might not have heard is the story of the tool behind Paper–Origami. Facebook developed Origami to be a rapid prototyping tool for interfaces, to allow its designers to create and test complex, original animations without the help of the coding team. (And then the company released it free last month for the world’s designers to use, too.)

Origami is a powerful counterpoint to Photoshop, just as Paper is a powerful counterpoint to Facebook’s app.





“Before we started using Origami, we designed using Photoshop–static mockups, arranged next to each other. We’d present them to management and each other in that format,” explains Facebook Product Designer Brandon Walkin. “I think our products reflected that.”

Origami is a powerful counterpoint to Photoshop, just as Paper is a powerful counterpoint to Facebook’s standard app. It allowed the designers to mock up one of Paper’s most complex animations–something you’d never traditionally associate with Facebook UI–a booklet unfolding to reveal a news article. What’s important to note is that this animation isn’t precanned in Origami. It’s truly interactive, always anchored to your thumb and tracking it in real time, while a 3-D lighting system adds depth to the image. Not bad for a piece of software Facebook teaches its designers to use in just an hour and a half.

Origami is largely the child of Walkin, along with fellow product designer Drew Hamlin. Its development started around nine months ago, in conjunction with their work on Paper. As the Paper project’s needs grew, so did the capabilities of Origami. And in fact, almost every animation you see in Paper was prototyped first in Origami before it was handed to Facebook’s programmers to build into the real app.

Origami being used for Facebook’s Paper app.

But Origami is not actually a piece of software that Facebook built from the ground up. It’s a custom plug-in for Quartz Composer, a free Apple app that’s traditionally been used for simple motion graphics–like the lower thirds you might see during a newscast. The problem is that Quartz Composer was never streamlined for interaction design. So the Facebook team slowly chipped away with tweaks and modifications of their own.