Co.Design

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

21 Comments

  • Paper looks great, but Origami, for all it seems very impressive, is hardly the first interactive interface design tool to be invented, as you might believe after reading this article. I'm very surprised to learn that before this Facebook were only producing static prototypes in Photoshop. There are far better tools than that already available for that purpose. But I guess they've got one of their own now!

  • I'm confused... I tried to get the Paper app, doesn't seem to exist... Tried to get Origami, my Mac doesn't want to open it saying it's from an unidentified developer... What am I missing?

  • John Tudor

    Paper is only available in the US, you can get it by changing your country within the app store

  • Luca Candela

    Aside the obvious problem with calling Origami a replacement for Photoshop (it's not, it's a completely different thing), the jury is out on the wisdom of using a deprecated tool like Quartz Composer (Apple said very clearly they are not working on it anymore, and it doesn't work well at all with the latest 2 versions of OSX) as the foundation for a professional design workflow.

    The needs of the now at Facebook might be strong enough, and they are such a peculiar company with tons of resources that they can afford to pick without worrying about consequences, but the average Joe Designer can't.

    I really hope Origami doesn't pick up any steam, because it's a bad idea and bad ideas shouldn't take mindshare away from good ones.

  • Check out Paper.js for the developers reading this article. While unrelated... it is much more noteworthy for developing your next (mobile) cross-platform, HTML/JS-based app.

  • I'm sorry, but to call it "a photoshop for interaction design" couldn't be more misleading.

    Like Mike says on the comment below, Origami is nothing more than a plugin to QC and doesn't really offer any tools for creating visual elements (a lot of the workflow relies on importing graphic assets created somewhere else, e.g. Photoshop/Fireworks/Sketch).

    While I admire the efforts put into prototyping early and getting closer to a native feel to help communicate design concepts to developers, I don't think Origami has much future.

  • Origami is more so a "plugin" for Quartz Composer than it is a tool/software. It basically adds additional functionality and changes some existing features to the base Quartz Composer software.

    While Quartz with Origami may be a good rapid prototyping tool for animations and maybe interactions, it is still very difficult to test the effectiveness of these design decisions in the context of a mobile app (such as Paper, Messenger and the native Facebook app). Since Quartz was not built with the purpose of interaction design prototyping it is nearly impossible to test on a mobile device. Thankfully there have been some attempts to bring these prototypes into the actual context of a mobile device. Joris Kluivers has attempted to solve this problem by creating qc-mobile. https://github.com/kluivers/qc-mobile

    I'm hoping the community can improve this contribution made to mobile prototyping. I've yet to test it out for myself, but am excited at the possibilities it could offer.

  • David Gardner

    This is Facebook saying, "Care about us! We're important!" but they aren't. It's just another passing fad. Will the time it takes to make this actually come back to you as dollars? How many people are using "paper?" No one I know. Facebook needs to stop reinventing themselves.

  • Marko Bon

    Although I've found Facebook less and less appealing, it's hardly unimportant as a property. And one thing that makes them important (other than their userbase) is their focus on improving product. Sure they fail a lot (and quite publicly) but that's fine too. It's actually impressive for such a large company to change, morph, update, tweak, screw up, and generally noodle it's way forward. One day their service will be eclipsed but they're clearly not taking the safe route. That's at least how I look at it.

  • Seems to me that besides the incredible UX, Paper is simply a restyling of the app. Central newsfeed with the addition of a few general news topics. flipboard did it better and earlier at the mobile/tablet level and theneeds did it better with content curation!

  • Maulik Suchak

    Yes, they should write 'Origami' with small letters in URL, because its not redirecting to the correct place!

  • Jessie Lacey

    This article confuses me. You say it is released last month and this article is dated March 2014 so maybe you are from the future and it gets released today? Because there are no download links on the link you posted and I am told it gets released today.