Getting a better understanding of both
@makeshowlearn[1]
Origami 2.0
Facebook released Origami 2.0[2]. (Note: I’ll refer to it as Origami to avoid interchanging between Quartz Composer and Origami.) I’m comfortable with Framer and can get along pretty well in Form. But I’m pretty much brand new to Origami.
This is my first deep dive into Origami. Similar to what I did when learning Form[3], I’ll work through the tutorials, look at examples, and will try putting a few prototypes together on my own.
Origami Live
A lot of the excitement around Origami 2.0 is because of Origami Live. You can view Origami prototypes on your device now. Of course, you can still look at things on the Viewer.
Having both options is major. Sometimes you really want to feel things out, which is best on the device. But when you’re positioning elements on screen, it’s quicker to just glance over to the Viewer.
Tutorials and Examples
Origami 2.0 brings a new site along with it that has video tutorials[4], a bunch of examples[5], and documentation for the patches[6].
Previously, resources were pretty scattered for learning Origami. There were a few examples on the Origami site with some notes. Other sites had introductory tutorials and not a ton beyond that. No longer—the new site is a major improvement for people starting out.
Working through the tutorials
I can’t emphasize this enough: the tutorials are great, work through them if you’re new to Origami. Each tutorial builds on the last and by the end you’ve put together a prototype with a good amount of functionality.
One of the interesting things about a lot of video tutorials is seeing how other people use tools. Brandon Walkin[7] narrates each, and it’s cool to see some of the things he does to work faster. Here are some notes I took while working through the tutorials:
- Always use shortcuts. The Origami site lists all of the keyboard shorcuts[8]. I, shift+S, A, T—the interaction starter kit:
- There’s another time-saver shown above: you can hover over any output and add a patch and it’ll automatically connect to the top input port.
- Similarly, you can add a patch between two if you hover over a port and press the shortcut. Here, we add a Delay between a Switch and Animation patch by hovering over the number port and pressing ‘D’.
- Option+Drag to duplicate a patch.
- Another thing shown above: Option+Drag on a port connection and it’ll duplicate that wire. Very handy when wiring up a group of patches connected to an identical far-away output.
- Hover over an Image and press ‘G’ to create a layer group of the same size.
- You can type math into the port values.
Material Design Motion Guidelines
After completing the tutorial videos, I’m in pretty good shape to start making things on my own. For most of the prototypes, I’ll be re-creating examples from the animation section of the Material Design guidelines. A couple reasons:
- I want to focus on learning Origami. By re-creating existing interactions, I won’t be distracted thinking about what to make and I can focus on how to make it.
- I’m interested in Material Design — particularly how Google has emphasized the importance of motion. Animation is one of the first sections[9] you’ll come across in the guidelines. I’d like to improve my understanding of how motion fits in with the rest of the design language.
Here we go.
