A review of the new Origami Studio
What do you do when you don’t like the prototyping tools available to you? If you are the Facebook design team, you just build your own tool. This is exactly what Facebook did when they released Origami, toolkit for Apple’s Quartz Composer, a few years ago.
To further develop this tool, Facebook recently released a new version of it: Origami studio. We dove in at the deep end to see what Origami Studio has to offer for our design team at Soda Studio.
How Origami Studio was born
The designers at Facebook wanted a prototyping tool that would work fast, that people would be able to work with easily and that would let them make prototypes with rich experiences. This, in their view, would give designers a maximum of freedom to design interactions without being held back by the tool they were using to prototype. Only then, Facebook argues, designers will explore a wide range of ideas.
The result was Origami, which lived inside Quartz Composer. Quartz composer is a visual programming language in the Mac OS X development environment. It allows users to build a process without having to write code. Apparently though, Apple couldn’t keep up with their Quartz Composer updates. Facebook took matters into their own hands and built Origami Studio, a standalone app.
What Origami Studio can do
Building prototypes in Origami Studio involves the use of the patch editor to build the logic behind your app. There is quite an impressive library of patches at your disposal, including switches, animations, boolean operators and even readouts from a phone’s sensors.
The layers panel is a new feature in origami studio, and it gives you a view of the elements you are working with in a way you’ll be familiar with from Photoshop or Sketch. A quick copy and paste from Sketch gives you quite an accurate reproduction of layers from your sketch document that you can then use to build your prototype.
Besides this convenient integration with sketch, it is easy to work with pretty much all screen formats you can think of, including presets for browser windows, iPhones, Android devices, and even smart watches. Origami Studio supports both Android and iOS devices and also provides mirroring apps for both of them, which is great for testing and presenting.
What designers might use Origami Studio for
Origami studio can hardly be compared to easy to use screen-based tools like Invision. Invision lets you build quite an extensive network of screens that users can navigate through. This is something Origami Studio is not great at. When building a prototype with many different screens, I ended up turning on and off large groups of layers upon clicks. This is very hard to keep track of and causes some very bothersome performance issues due to the large amount of layers. With the visual programming you use to build your apps, Origami Studio is much more useful for building micro interactions or showing exactly how a certain page works.
These kinds of prototypes can be used to communicate an idea with other designers, with developers or even to just check whether your idea for say, a certain scrolling animation, looks as cool as you thought it would. Where simpler prototyping tools like Invision or Principle (we’ll come back to that last one in a bit) are often a simplification of what you have in mind, Origami Studio can get you pretty close to the real deal. I could build a simple voice recording app in a matter of minutes and it actually works! The app records sounds and keeps track of the recording time and the number of recordings that have been recorded.
Getting into Origami Studio
This quick recording app does bring us to the fact that Origami Studio can seem a bit daunting and complicated to start using. Even though I was able to build this simple app quite quickly, I had been fiddling around with the app and watching tutorials for a few days to understand how it works. The, rather basic, knowledge of programming I have helped me understand how to build logic using the patch editor, so people with more experience may pick it up quicker. The patch editor is fundamentally different from what you will be used to from programming though, so there will be a learning curve nonetheless. A few days of practice may not seem like all that much, but while using the app I kept running into things I had yet to learn. For an app that is supposed to take away limitations of prototyping tools during the design process, designers may end up putting quite a lot of time into figuring out just how to prototype their idea.
Why designers might go for Origami Studio
So, Origami Studio is good at building small high fidelity prototypes, for example of microinteractions. But so is Principle, and that’s much easier and quicker to use. So should we be using Origami Studio at all? Well, in certain situations it can be very helpful to show someone what you have in mind in a very precise way. Origami Studio may take a while to get the hang off, but once you get acquainted with it, the possibilities it offers are vast. An interaction can be visualised in a lot of detail which enables you to show fellow designers or developers exactly how you want something to work. When a prototype needs to get very close to the end product, Origami Studio seems to be the better choice over Principle. Prototypes you build in Origami Studio are great for tweaking the interaction you have in mind and forwarding exactly that to anyone who needs to see your design. Unfortunately, moving to a standalone app has happened at the expense of a useful feature in this regard: exporting code from a prototype, something you could do in Origami for Quartz Composer, doesn’t seem to work in Origami Studio yet.
What we think
Will we be using Origami Studio on a daily basis from now on? Probably not. Origami Studio seems to be a very versatile and powerful tool that allows designers to take their prototypes to quite a high fidelity. It can also help designer understand and communicate how interactions need to be implemented. For people who don’t mind investing some time to learn how Origami Studio works, it can be a very powerful way to take prototypes to the next level. For quick prototypes of micro interactions however, many designers will probably still prefer the accessibility of a tool like Principle.
