Origami StudioReviewed 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.
- 👍 Feels very powerful, like a programming language
- 👍 Beautiful interface, gorgeous design
- 👍 Very intuitive to write in
- 👍 Familiar for designers (layers and groups) & imports from Sketch
- 👎 Gets cluttered quickly, and then difficult to read
The above video creates a mobile app prototype of a circle that follows the user's finger. It demonstrates:
- adding a circle layer
- adding the mouse "patch" (or node)
- attaching the "point unpack" patch to an output port via searching
- attaching the x and y outputs to the x and y of the circle layer
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.
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.
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.
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
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.)
- Direct manipulation of shapes (moving them, changing their size)
- Clicking on a shapes revealing the layer
- Better support for using and creating variables (broadcasting).
- Array manipulation
- Custom JS patches
- More complicated centralized state, that can be affected from multiple inputs
- Scrub backwards and forwards through time
- See how values change on a timeline (not just the current value), like here:
- Stack overflow-type forum (instead of Facebook group)
- Export to code
- Use it via web browser