Facebook Develops A Photoshop For Interaction Design, And It's Free For Anyone To Use

To design the groundbreaking app Paper, Facebook built an in-house IxD tool first. And then the company shared it with the world for free.

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.)

"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.

They made many practical changes, like building patterns that ensured Quartz was speaking the language of pixels, allowing designers to manipulate layouts at their core level. They also rethought the product to be less intimidating and more accessible.

"We actually spent a ton of time and energy trying to make the terminology and organization really approachable and friendly, so a student wouldn’t find it confusing or overly technical," Walkin tells Co.Design. A perfect example is a pathing tool where you set two points, and the system fills in the rest. You might use it to quickly animate a graphic flying across a page. Quartz Composer would call this (linear) Interpolation. Facebook calls it Transitions—playing off the idea that a designer would use it when transitioning between two screens. (That name took the team three weeks to decide upon, but the team considers the time well-spent.)

Facebook firmly believes that Origami can strengthen the work of young designers in high school and college today, driving them to think about fluid interaction design rather than static image design. And Facebook is training all of its own designers to use Quartz Composer and Origami from here on out.

A skeptic might ask, should Facebook really give away the software for free? Facebook is, after all, a business. If Origami really is the next big thing in rapid interface prototyping, wouldn’t the company be better off keeping that advantage in-house, and out of the hands of competition at Twitter and every other app and social media platform?

Ultimately, Facebook wants to move interaction design forward as a field, confident that it will ultimately make Facebook a better product. And there may be some personal pride at stake, too. "I actually feel pretty passionate that, if you’re competing based upon a tool, you’re losing," Hamlin tells Co.Design. "We want design at Facebook to be awesome. We don’t want that through some tools advantage. We want it to be by solving the best problems, and being the best place to work."

Download Origami here.

Add New Comment