Facebook Home Was Prototyped Using Apple’s Mac & iOS Development Tools!


Here’s an interesting fact for you. Facebook Home — the new app that deeply-integrates Facebook into Android smartphones (and probably most notable for its system-wide Chat Heads messaging) — doesn’t work as intended on iOS… but it was actually prototyped on Quartz Composer, Apple’s visual development environment distributed as part of Xcode!

Over at Medium.com, Facebook’s product design director Julie Zhuo talks about how Facebook Home was designed.

While in the old days, Zhuo said she might use a tool like Adobe Photoshop to prototype an app design, it’s not the right tool for the job in a day and age in which apps respond dynamically to smartphone physics and sensors. But Quartz Composer can!

[S]omething like Facebook Home is completely beyond the abilities of Photoshop as a design tool. How can we talk about physics-based UIs and panels and bubbles that can be flung across the screen if we’re sitting around looking at static mocks? (Hint: we can’t.) It’s no secret that many of us on the Facebook Design team are avid users of QuartzComposer, a visual prototyping tool that lets you create hi-fidelity demos that look and feel like exactly what you want the end product to be. We’ve given a few talks on QC in the past, and its presence at Facebook (introduced by Mike Matas a few years back) has changed the way we design. Not only does QC make working with engineers much easier, it’s also incredibly effective at telling the story of a design. When you see a live, polished, interactable demo, you can instantly understand how something is meant to work and feel, in a way that words or long descriptions or wireframes will never be able to achieve. And that leads to better feedback, and better iterations, and ultimately a better end product. When you are working on something for which the interactions matter so greatly—in this case, a gesture-rich, heavily physics-based ui—anything less simply will not do.

For those that don’t know, Quartz Composer is a visual programming language that is distributed as part of the Xcode development environment for Mac OS X. And Xcode, of course, is what is used for making software for OS X and iOS.

So what’s ironic about this is that even though Facebook Home can’t function as intended on the iPhone, Facebook’s team prototyped the app using a tool that is distributed as part of the code development toolkit used to make iOS apps!