Prototyping complex ideas using Origami Studio by Meta

In the last years, digital products are evolving incredibly fast from almost static experiences to apps that integrate a variety of complex functions. From voice detection, advanced cameras and multimedia features to real time chats and AI integration.

Example of multimedia prototype where you can play and pause the video and control the time. See it live

Some components have multiple states while others change continuously in real time. Moreover, functions are controlled through different inputs and gestures.

The gap between design and development becomes wider, making the design of no-code realistic experiences more challenging.

At this point, some tools have emerged and are evolving to help designers rapidly build complex prototypes as close to the final user experience as possible.

Here is an overview of Origami, a prototype tool designed by Meta and some amazing use cases where I have tested it.

Why Origami?

Since I have tried other tools such as Protopie, at this moment I have found some advantages using Origami:

• It has a small but strong and active community in Facebook. Teams in Google, AirBnb Design, Figma or Microsoft incorporate it into their daily workflows, they contribute frequently to the community and you can interact directly with them.
• It is less explored than other prototype tools, what makes challenging and entertaining to develop new things.
• Users are allowed to personalize and create new interactions, functions and components.
• Accessing and integrating native functions is incredibly simple.
• It is free.

However, it is only available for Apple devices and code can’t be accessed or exported. For my current explorations it is not a key problem.

Example of Camera prototype designed using Figma and Origami. See it live

How it works

Origami has a node based interface. The building blocks, called patches, receive inputs and produce outputs which can then be connected to each other. They are similar to functions in code.

Overview of the Origami Studio interface

Some complex and powerful patches have been created by Origami, but users are also allowed to design personalized ones.

Use cases

While designing prototypes in Figma or similar design tools is enough for many digital experiences, the use of advanced prototyping tools like Origami becomes highly useful when dealing with more complex products. It helps reducing uncertainty before coding.

Prototype to add a signature where users are allowed to draw it. See it live

Native functions

Origami provides patches that make accessing native functions incredibly simple, including voice detection, recording and playback, haptic feedback or gallery and camera access.

Camera prototype based on Origami Camera Picture Tutorial. See it live

Async animations

Prototypes where many animations happen within short periods of time are easier to define. You can specify different states and adjust animation curves and timing accordingly.

Example recording an audio based on Origami Audio Metering Tutorial. See it live

Data

One of the newest features that is allowing designers to make prototypes integrating AI is that it is now possible to use patches to fetch APIs.

To explore all the capabilities of Origami visit the documentation.

Conclusion

I have found Origami really useful to test specific experiences based on device’s native functions. It enables to iterate faster in less time, and also test and reduce uncertainty before developing the product. At the end of the day, it means less cost and a better quality.

It is not necessary to design the entire app in a single complex prototype. The patches tree becomes huge if you try to test many things simultaneously. Designing simpler prototypes you can get really useful insights.

Visit all the prototypes shown in this article here