Origami and Material Design
Getting a better understanding of both
@makeshowlearn
Origami 2.0
Facebook released Origami 2.0. (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, 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, a bunch of examples, and documentation for the patches.
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 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. 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 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.
I tried re-creating this point of origin video from the Responsive Interaction: Material Response section:
When building these prototypes, I found there were usually a few key questions I’d need to answer to build the idea out. Usually they led to learning a useful technique.
Sometimes I knew the questions from the start:
How do I scale the box up and down when tapping the boxes icon?
Interaction, Switch, Animation, Transition. This combination comes up really often.
How do I capture taps close to, but not on the icon?
We can use a transparent hit area to connect the interaction patch to instead of connecting it directly to the icon.
Sometimes questions came up as I went along:
How do I make this thing grow from the bottom-left?
Making the box grow was pretty straightforward using what I learned from the tutorial, but it was growing from the center.
To fix this, we just set the layer’s anchor point to bottom-left.
How do I create a pulse?
For whatever reason, I thought this would be trivial. Just make it grow and fade out by transitioning the layer’s scale and opacity. Which is fine for a single pulse. But on the second tap you’d see it shrink and fade in, reversing the animation instead of starting a new growing pulse.
My first step in solving this was to make mess of things. I made sure to note this. Animations and Transitions, great. Delays. A couple Samplers. Let’s throw a few XOR gates in there too!
When things seem too complicated, they probably are. There’s usually a simpler solution.
Let’s pull this pulse out.
Let’s try that one more time, how do I create a pulse?
Instead of an Animation, I ended up using a Stop Watch and a Delay to stop it and reset the values without reversing the animation. I’m guessing there’s a better way to restrict animations to when values are increasing.
(I just saw a Timer patch that looks like it might be able to replace the Stop Watch and Delay combination. It’s good to look through the patches and learn how they work. I’m continuing to learn about new patches and how built in settings can achieve things I was trying to do with multiple patches.)
I re-created this setup from one of the Form examples after remembering it had a pulse. It’s pretty cool that you can use similar, and sometimes identical, patch combinations between Origami and Form.
Even this solution looks a little complicated but the great thing about patch-based interfaces is how reusable everything is. You can copy and paste groups of patches from project to project and they usually just work. With code, it’s not as easy to copy and paste parts of projects.
How do I get the Touch patch to record proper coordinates from Origami Live?
This issue was a little odd.
In the Viewer, this setup worked as expected. I could click and the pulse would originate where I clicked.
However, in Origami Live, the x/y position didn’t seem to be picked up. Tapping the iPhone screen started a pulse, but the x/y came from my laptop’s cursor position.
To fix this, we can add some Sample & Hold patches:
We sample the value when pressing down on the screen. This fixed things and Touch worked over Origami Live.
I tried re-creating this lift on touch video from the Responsive Interaction: Material Response section:
How do I create the touch response?
We can reuse the pulse from earlier by placing it inside the a layer group with the box image.
How do I create a shadow transition for the lift effect?
Shadow patches didn’t seem to work through Origami Live. Instead, each box is made of two images created in Sketch. The first image is the white box for the starting state.
Below that image is the white box with the shadow styling for the end state. This image with the shadow is set to 0 opacity then fade it in on tap.
I tried re-creating this hierarchical timing video from the Meaningful Transitions: Hierarchical Timing section:
How do I sequence similar animations?
The Slinkin’ Park example from the Origami examples uses a technique where Animation patches are chained by connecting the Animation’s progress output to the number input of the next Animation patch.
We’re using the same technique, but making sure to attach the Progress output to the proper Animation input. At first, I started with this:
But it’s just going left-to-right with the top row followed by the bottom. By moving the Progress outputs around, we create the order that leads the eye from top-left to bottom-right.
This is slower than the guideline video, how would I speed it up?
The Animation patch is set to the highest speed, so we can’t increase that. There are a we a few options (and probably a bunch more I’m not aware of yet).
- Scale up the Progress values to reach 1 faster using Progress patches or Math patches. Then add Range patches on the Scale input to keep the values from going over 1.
- Switch the Pop Animation patches to Classic Animation patches combined with Delays to be more precise about the animation timing.
I tried re-creating this example from the Meaningful Transitions: Consistent Choreography section:
There was one major question here.
How will I create an arc?
I thought there might be a patch that somehow lets me attach a vector path. Didn’t find anything immediate. Then I knew there was probably an example somewhere for creating a circular path, and from there we could get to a quarter-circle.
Eventually, I found a solution and think this short guide should help others find solutions, too.
Workflow for starting a new prototype
For the most part, these were the steps I would use when starting a prototype or when stuck trying to do something.
- Look for an existing example. There’s a good chance that someone’s made something similar to what you have in mind. This can save a ton of time.
- Search the Facebook group for specific patch names. You’ll probably have some idea of what approach to take.
- Search Google for the patch names or some idea with “quartz origami” to hopefully get more recent results. And then just “quartz” because a VJ might’ve done something similar but way more psychedelic.
- Post a question to the group. Include an image of the composition to help explain what’s wrong. A video of the issue here is very useful too.
- If it’s pretty complex, link to a .qtz file. If you have anything confidential, then re-create a generic version of the portion you’re having an issue with and share that.
This is based on paging in Google’s iOS app:
How do I darken the back pages and have them brighten as they come forward?
Each page is a layer group and I have a black overlay with opacity set based on the front card’s y-position.
How do I make something where you can throw the cards for short distances?
In the real app, you can do small swipes on the screen to move the pages a little bit. Or just drag things up and down and they’ll hold position. I can get the cards to hold position based on how far I swipe.
To add the flick for different movement lengths…still not sure! I’m guessing it has something to do with velocity values to create flicks. It’s one of the key reasons the Google app paging interaction feels good. I’ll keep at it.
This example isn’t quite Material Design-related. It’s inspired by a nav bar animation by Jeff Broderick. And I found it through Mike Rundle’s Motion Design for iOS, where it’s used as an example.
I like using it as an example to start with because it combines a few very common things: touch interaction and animations for position, scaling, and opacity. And I’ve made this example with Form and with Framer, so it’s good for comparing workflows.
Origami and Form
Will building this with Origami be exactly the same as building this in Form?
Not exactly, but pretty much. For certain things like setting up switches and animation, Origami and Form work pretty similarly.
How is Origami different from Form?
For this particular example, it’s not much different. Otherwise, here are some quick points:
- Origami lets you view prototypes on your monitor with the Viewer.
- Origami Live runs over USB while Form Viewer runs over Wi-Fi.
- Origami Live lets you switch out of the app (to, say, text a friend) and come back in and the device will reconnect. With Form, you need to reconnect each time.
- Origami has the Classic Animation patch, so you can get precise with animation timing. Form doesn’t have an equivalent.
- Form prototypes run natively on the device so performance is really good. Origami Live works really well but if anything’s slowing down my laptop then that’s apparent in Origami Live also.
- Some non-Origami patches don’t work over Origami Live, which can cause hiccups. All Form patches work.
- Form lets you drop pins on wires that show signal values. I really like this for debugging and tracing issues to figure out where things are breaking.
- Form has a more advanced gesture system for things like pinch interactions.
Origami and Framer
How is building this prototype different from building it with Framer?
Designing with patches and wires puts you in a different mindset than programming. With Form I started seeing this, and working with Origami more it’s becoming even more evident. I’m really enjoying it. Part of that might be that it’s a shiny new toy.
Community
Framer has one of the most helpful communities I’ve seen online, period. The Facebook group has tons of helpful people, and then a good number of people beyond that who are seemingly waiting and eager to help. The Framer team is also in answering questions.
Origami’s Facebook group has nearly twice the number of members as Framer but it isn’t quite as active. Facebook designers are in there answering questions, which is great. (In particular, Brandon Walkin and Julius Tarng have been incredibly helpful in the group for Origami 2.0's first week.)
My guess is that this has to do with the number of experts. A lot of Framer questions are essentially general programming questions, and there a lot of CoffeeScript/JavaScript experts. There aren’t nearly as many experts in the Origami community. I think this will change as time goes on with the improved Origami resources.
Sharing
The Framer team has really focused on making sharing easy and it’s a major reason the community has grown so quickly. Framer Studio makes sharing one click away. You can view prototypes in the the browser. I’m more likely to click and view a Framer prototype than I am to download and open an Origami prototype.
Learning curve and resources
Origami’s learning curve is high. I think Facebook’s acknowledged this and is actively working to lower that barrier. The tutorials and examples on the new site are an excellent start.
Framer’s learning curve depends on how comfortable you are with code. The range is huge. If you’re a programmer wanting to prototype some designs, Framer is a great way to get started. If I were a designer with no programming experience, I’d start with Origami and see if it clicks quickly. (That said, I think programming can be really valuable for designers.)
New tool for the Toolbox
Origami, Form, and Framer have similarities and differences. There are also a bunch of other great tools for lower fidelity prototyping. Each one might be better than the others depending on the situation. It’s one thing to know how to use them, but it can be more important to know when to use them.
I’m excited to see where Origami and all the other interaction design tools are heading.
Thanks!
You can follow me on Twitter at @makeshowlearn. I’m also posting shorter things on designsprints.com—mostly about Framer, Form, and now Origami. I’m planning to record screencasts for some of the examples in this post and I’ll post them there as well.
