Origami

Interaction // Prototype

Abstract

“A new tool for designing modern interfaces, built and used by designers at Facebook.” - Origami Team

As a prototyping tool, Origami quickly caught my eye. Notorious for its stiff learning curve, I wanted to wrap my head around the mystery.

(On first launch, an empty canvas - when you gaze long into an abyss the abyss also gazes into you.)

Compatibility

Thankfully, Origami was built to coexist.

Examples

I downloaded example files from the Origami site and began fiddling.

The first was a stoplight simulator. It leverages an Options Picker patch connected to an Option Switch. The Switch controls multiple variables using a numerical string, allowing the Picker to vary between three states.

Clicking the stoplight manipulates the visible color, which changes slowly based on a timer - an interesting concept, yes?

First Attempt

After dabbling with examples, I attempted a simple menu / escape animation (left). I built three duplicate shapes, two of which rotate, and one with flexible opacity.

The second animation (right) utilizes a Pop-Animation patch hooked up to some Transitions. I wanted to play around with the bounciness of it to get something that turned out light and fluid - voilà!

Below is the patch layout for these two animations. Beginning with a simple tap interaction, each patch influences an input until a meaningful output is reached.

As a designer, this structure bodes well with my mind. The in-out flow of each patch feels mathematical and deliberate.

Results

Origami Studio is an excellent all-purpose tool for any platform. It's all-purpose, because the patches can create simple page transition, or complex timed-conditional-3D elements - the only limitation is creativity.

For visual designers, Origami is a smooth transition into prototyping. The patch UI feels more natural than frame based options (such as Atomic & Principle) and code-based prototyping (e.g. Framer).

I'll continue to fiddle with Origami in the future and see where it goes!