Try Out Quartz Composer and Origami

In late Jan, I watched a talk – Bringing Beautiful Interactions to Android Apps from Facebook about how they use Quartz Composer(QC) when developing Facebok Home (and chat head). Compare to other prototyping tools, QC can better illustrate animations and interactions. It is quite impressive and I actually installed QC the day after and tried to play on it. But when I first opened it, I was totally lost, not saying it is hard to use, but it is obvious that there is a learning curve on this tool. I did not spend more time on it that time but kept it in my TODO list.

Two weeks later, Facebook released Origami, an extension of QC. Followed with some articles about how it is used in Facebook. Yesterday I gave it another try. This time I am more serious compared to last time. My target is at least understand (not fully) how it works and be able to do a simple demo to my team.

Let’s start

This time I started with the documentation, not saying it is poorly documented, but it is not much fun to read it(my bad)… Then I went for tutorials, after a quick look of some articles on QC (not Origami), I had little concept of patches (but missed macro patch…), then I think maybe I can understand the Origami examples.

When I opened the “Photo Grid” example, I only see three patches, I knew that there must be some hierarchy hidden from the interface, I tried to use the patch inspector to look around but have no idea where to go, I was stuck again. Then I found this video on Origami’s twitter, which turned out was everything I needed.

It is the visual version spaghetti code // 6:50

Short notes

  • “Phone” patch is the basic component for the phone prototype, which displays an image in device frame.
  • Use “Render in Image” for the content to display.
  • Double click the “Render in Image” patch to edit the macro patch of it.
  • A “Layer” patch will be automatically added when you drag in an image.

Reference

prototyping, ux

Comments