Facebook Updates Origami User-Interface Design Tool

Origami, the user-interface design tool Facebook used to help create or improve applications including Instagram, Messenger, Paper, Slingshot, Hyperlapse and Rooms, released two major updates. Origami Live for iOS allows developers to run their Origami prototypes on the iPhone and iPad. And the new version of Origami for the Mac, Origami 2.0, adds new features including code exporting, gesture support, sketch integration and a presentation mode. Product designer Brandon Walkin offered more details on Origami Live and Origami 2.0 in a post on Facebook’s engineering blog: Since releasing Origami, the most common feature request has been the ability to run prototypes on iOS. We're excited to release this feature today. Just install Origami Live from the App Store, plug in your device and you'll instantly be able to interact with your prototype right on your iPhone or iPad while editing it live. You can quickly try new ideas -- using multitouch, device sensors, etc. -- and fine-tune them with ease, without writing any code. Then, with your device in hand, your team members or users can try out a high-fidelity prototype that looks and feels like a final product. 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. This is usually a very time-consuming process, in which the designer creates many detailed specs and the team spends time iterating to get the product to be close to the prototype. Often, the product doesn't quite match the prototype in the end. 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 snippets for the animations you’ve created in your Origami file. Your engineers can copy and paste sections of this file into their code to quickly get animations identical to what’s in the prototype. No specs required. We've improved the way you can present your prototypes. In Origami 2.0, 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 -- 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, he or she 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. With our new Sketch plugin we're introducing today, it is 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. If you're a Photoshop user, Origami also supports live links to Photoshop files. Developers: What will you do when you get your hands on Origami Live and Origami 2.0?

Social Pro Daily

Facebook Updates Origami User-Interface Design Tool

Origami, the user-interface design tool Facebook used to help create or improve applications including Instagram, Messenger, Paper, Slingshot, Hyperlapse and Rooms, released two major updates.

David Cohen

About

Subscriptions

Events

Publications

WORK SMARTER - LEARN, GROW AND BE INSPIRED.

Subscribe today!

David Cohen