Introducing Origami Live and Origami 2.0

Just over a year ago, we released Origami — a free tool for designing interactive user interfaces. We’ve used it here at Facebook to design many of our products including Instagram, Messenger, Paper, Slingshot, Hyperlapse, and Rooms. Since releasing Origami, our number one feature request from designers has been the ability to run Origami prototypes on iPhone and iPad as well as on their computer.

Today, we’re excited to release Origami Live for iOS along with a major new version of Origami for Mac. Origami Live is a new app that lets you use your Origami prototypes on your iPhone or iPad. Alongside it, we’re releasing Origami 2.0, which has a ton of new features, including code exporting, powerful gesture support, Sketch integration, presentation mode, and more.

Origami Live

Origami Live has changed how we design products at Facebook. It lets us interact with our prototypes on an iPhone or iPad while we edit them live. We can quickly try new ideas — using multitouch, device sensors, etc. — and fine-tune them with ease, without writing any code. Then we hand over our device to team members or users and have them try out a high-fidelity prototype that looks and feels like a final product.

When I was on the Paper design team, we prototyped nearly the entire app in Origami. It allowed us to be creative and stumble into new ideas we may not have otherwise. As an example, we wanted to improve how people viewed photos in News Feed. Most other feed UIs show photos scaled to fit the screen. The majority of photos are in landscape mode, so they’re quite small, and details are difficult to see. You usually have to tap the photo to view it slightly larger, and then use two fingers to zoom in and pan it. For Paper, we wanted users to be able to see details in photos seamlessly while reading the feed.

So, we wondered, what if a photo filled the screen and you could pan through it by rotating your phone from side to side? Within a few minutes, we were able to plug in the rotation of the phone to the position of the photo. We could then quickly tweak our prototype to figure out details of how it would work. Should the photo move with the phone as you rotate it, or should it move in the opposite direction? How much physical movement should translate into movement of the photo on the screen? We saw that requiring too much rotation made panning strenuous, but requiring too little made it difficult to pan to specific positions. We were able to adjust this value by moving a slider with one hand on our mouse while rotating the phone with the other, quickly landing on a value that felt right.

We even used Origami to build the detailed logic that filters the noisy accelerometer and gyroscope data from the phone into smooth movement of the photo. Much of that same logic is still used in Paper. Origami takes something that would normally be the domain of the engineers and puts it within the hands of the designers. This feature might not have been made if we didn’t have Origami Live.

Origami 2.0

Code Export

When you design and build Origami prototypes, you’re creating a high-fidelity replica of the end product. Once you’ve landed on something you like, you work with your engineers to make the real product look and feel like the prototypes.

Our first step here was to unify the animation engine between Origami and our apps on every platform. We open-sourced the animation engine we were using in Origami as Pop for iOS, Rebound for Android, and Rebound JS for the web. This did wonders for making our products feel as good as our prototypes because we could actually make all the animated interactions identical, rather than spend time creating rough approximations.

We still found it was more tedious than it needed to be to get the implementation to match the prototype. We spent a lot of time spec’ing animations with spring properties, start and end values, and so on.

In Origami 2.0, we’re solving this problem with a new feature called Code Export. With the click of a button, you can export your prototype as code. It generates files for iOS, Android, and the web with code for the animations you’ve created in your Origami file. Your engineers can copy and paste sections of this file in their code to quickly get animations identical to the prototype.

Presentation Mode

When I started at Facebook five years ago, we would usually present static mockups to management when we were trying to explain our design proposals. We’d have a bunch of mock-ups side by side, and we’d scroll through them and explain what would happen as you went from screen to screen.

These days, we’re expected to present high-fidelity, animated, fully interactive prototypes. When we’re presenting, the large display shows a hand holding a phone or a tablet, and as we’re explaining design decisions, we interact with our prototypes — tapping, scrolling, and swiping. This gives the people we’re presenting to more context and a better understanding of what the final product will look and feel like.

In Origami 2.0, we’re releasing this workflow to designers everywhere. You’re able to go into full screen, show off your prototype in a phone with a hand and a touch point in front of beautiful backgrounds — like a mountain top, subway station, or even a Beyoncé concert. Personally, I’m fond of the one where you’re using your phone on a canoe (but somehow also paddling?). This gets presented all while you’re controlling the prototype with an iPhone or iPad running Origami Live or with your trackpad. If you want to show someone a multitouch or phone rotation interaction, they can use it on the device and the screen will be mirrored live on the TV to the rest of the room so others can see what’s going on.

Sketch Integration

With our new Sketch plugin we’re introducing today, it’s much easier to keep your prototype in sync with your latest visuals. Origami 2.0 lets you link up layers in your Origami prototype with Sketch layers. With the press of a button, you can update every asset in your prototype with the latest graphics from your Sketch document. This all happens immediately, while the prototype is still running — so you can even update assets while using your prototype. If you’re a Photoshop user, Origami also supports live links to Photoshop files.

Learning Resources

Another bit of feedback we got from Origami users was that it was hard to learn. We didn’t have a lot help on our site to get designers up and running. While Origami is very powerful — letting you create just about anything you can imagine — it’s got a learning curve. With this new release, we’re making it much easier to learn Origami. Our new site now has a suite of tutorial videos — ramping up from teaching the very basics of Origami to building advanced prototypes. Anyone should be able to get up and running fast just by going through the tutorials.

We also have an examples page with sample prototypes showing how to build common interactions and UI patterns. If you’re trying to figure out how to do something, there’s a good chance it’s on this page. Just download the file to see how it’s made.

That’s not all! There’s also a documentation section that details each Origami component and covers the fundamentals.

Even More

Origami 2.0 comes with even more features, such as powerful scrolling capabilities, easy-to-use swipe gestures, one-tap keyboard shortcuts so you can build complex functionality incredibly quickly, and more. Get started by downloading Origami.

We’re excited to see what people create with Origami.