The

Whole Code

Catalog

Origami Studio

Reviewed July 24, 2019

Origami Studio is a free Mac app for design prototyping created by Facebook. It's main purpose is for designers to prototype small, interactive, and animative app-interactions that will eventually be handed off to developers to be rebuilt into code. It was originally embedded within Apple's Quartz Composer, but was broken out as its own standalone tool. Built by and for designers, Origami is both aesthetically pleasing and functionally intuitive.

Product Feel

Basic Usage

The above video creates a mobile app prototype of a circle that follows the user's finger. It demonstrates:

Click on background and hit shift-enter to start searching:

Live intermediate values

As you interact with the live prototype, you can watch all intermediate values updating live. This is how all programming should be.

Hot-Reloaded Preview

You can make a large number of changes to your prototype's logic without triggering a total refresh. It's so convenient to be able to examine changes instantly without having to re-build temporary state by hand each time.

Implicit looping

Loops, one of the most confusing concepts for non-programmers, is made totally intuitive in Origami. You merely attach the index output port of a loop patch into any property of a layer to duplicate the layer. Instead of looping as a control-flow mechanism ("repeat these lines of code"), it allows for looping over objects. Another way to think of it: functional programming's map made intuitive. In the following video we create a number of circles and spread them out visually by attaching the index port (multiplied by some factor) to the x and y properties of the circle layer.

Components

Abstraction is accomplished through components, which are a group of layers that behave like a single layer. Components can accept inputs, which allow users of the component to modify those properties without worrying about the details. Editing a component takes place on a seperate screen where the inputs are source patches. In the following video we modify the default iOS button switch component to take an extra height argument and hook it up properly. We then attach the time patch to the height argument to show how seamlessly arguments can be used.

Math expression node

One of the common complaints of node-and-wire frameworks is that it can take dozens of nodes for a simple mathematical expression. Clearly a more compact notation is preferred. Origami neatly solves this issue with a "Math Expression" node, which can evaluate any JavaScript math expression. It automatically detects variable names and converts them into inputs. In the following video we create such a node and demonstrate its workings by editing the node input values manually.

Small, but expressive library

The library wasn't large, but it felt like they’ve thought of everything. Whenever I needed something, they almost always had a block for it. This is partly because some of their blocks are quite general and powerful, and partly due to excellent attention-to-detail. There’s no Stackoverflow for Origami Studio, and I didn’t mind at all. (Read that last sentence over again and realize that it doesn't apply to any other programming language. Only spreadsheets.)

Wishes