Origami Studio 3 makes app design easier than ever

Origami Studio 3, the latest version of Facebook’s powerful and free design prototyping tool, is equipped with several new features to make designing user interfaces and interactions easier and more intuitive than ever. 

The all-in-one design, animation, and prototyping tool now includes new layout and compatibility features that make for a smooth transition from other tools like Figma and Sketch. And those already familiar with Origami will find Origami Studio 3 allows them to create even more innovative prototypes, with new features that leverage photos and audio.

An important new feature is Canvas, which adds vector drawing capabilities to Origami as well as a new smart, dynamic layout engine. “Canvas makes Origami more of an end-to-end design tool and makes it more intuitive to designers coming from other design tools,” said Connor James, a Product Designer at Facebook.

Designers have said they wanted to track more complex design flows than were possible on a single design area. Canvas was developed to address this. “We’ve also added Quick Interactions as a way for designers to quickly wire up, present, and dismiss animations between screens for more complex flows,” James said.

Origami requires no coding and thus lowers the barrier to entry and speeds the prototyping process for designers. And because it’s a native macOS and iOS app, designers can also implement native hardware APIs into their prototypes and take advantage of features like a camera, a microphone, an accelerometer, and even haptic feedback.

Origami Studio 3 takes this one step further with two new additions: Photo Library and Audio Metering. Photo Library allows Origami to retrieve images and video from Camera Roll on iOS or Photo Library on macOS, letting designers create photo-based layouts and interactions. Audio Metering allows Origami to measure the volume and frequency data from an audio source such as a microphone. This means designers can create visualizations from recorded audio, music, or location-based GPS features, and even use Origami to prototype AI voice recognition assistants.

In response to feedback from the design community, Origami Studio 3 has also added support for Figma and Sketch. Figma has been widely embraced as an end-to-end design tool, and designers can now import their work from tools like Figma and Sketch directly into Origami.

Origami was first released in 2015 as a set of plugins built on top of Quartz Composer, a visual programming language for macOS. Since then it has been released for free to the wider design community and has become a standalone macOS and iOS app. The high-fidelity, app-like prototypes that can be created in Origami convey interactions, animations, and gestures and refine them in a way that isn’t possible with static design tools. At Facebook, features like Facebook and Instagram Stories, Facebook Shops, Instagram Threads, and Facebook Rooms all started as Origami prototypes.

“Origami enabled us to think wild while building [Facebook] Rooms. It is the tool that bridges between a simple idea and an actionable vision,” said Lois Yang, a Product Designer at Facebook.

Recently, Origami played a role in the design of Facebook’s COVID-19 Information Center. “The COVID-19 Info Center was designed and built to unprecedented constraints, at an unprecedented pace, and with unprecedented stakes,” said William Van Hecke, Director, Product Design at Facebook. “We built an end-to-end demo that helped us imagine the full product, and also made use of data and logic to envision the data visualization designs. It would have been impossible to understand the product idea and make decisions about what to build in the time available without the flexibility, fidelity, and speed of Origami.”

More information about Origami Studio 3, including downloads, documentation, and video tutorials are available on the Origami website.