Most designers today create static mockups to communicate app ideas. But increasingly apps are anything but static, which means as designers we need a better tool for interaction design.
Origami is a free toolkit for Quartz Composer—created by the Facebook Design team—that makes interactive design prototyping easy and doesn’t require programming.
Quartz Composer is a freely-available Mac OS X application by Apple that's been around for nearly a decade. It was never designed for the purpose of interaction prototyping though: it's primarily a motion graphics tool.
Out of the box without Origami, interaction prototyping with Quartz Composer is complicated. Origami provides a set of tools for Quartz Composer that make interaction prototyping a lot easier.
- Switch Toggles between on and off and remembers its current state.
- Scroll Lets you allow the user to scroll an image.
- Pop Animation Animate a changing value with Bounciness and Speed values on a spring.
- Bouncy Animation Animate a changing value with a spring using Friction and Tension values.
- Classic Animation Animate a changing number with a specified duration and easing curve.
- Transition Takes a number in the range of 0 to 1 and converts it to a range starting with Start Value and ending in End Value.
- Color Transition Fades between two colors.
- Image Transition Fades between two images.
- Interaction 2 Lets you get clicks on Layer patches. It works with Render in Image patches, iterators, and the Phone patch.
- Layer Group Lets you group layers together.
- Progress Takes a value in a given range and outputs the progress of where the value is in the range.
- Hex Color Converts a hex string to a color.
- Cursor Control Allows you to hide or change the OS X cursor when it's over the viewer window.
- Layer Lets you put an image on screen and adjust how it shows up.
- Text Layer Lets you put text on screen.
- Fill Layer Fills the screen with a color.
- Button Shows a button with a customizable label and background. Connect it to the Interaction 2 patch to make it interactive.
- Hit Area Lets you specify an area on screen to get clicks on. Connect it to an Interaction 2 patch to make it interactive.
- Phone Draws a phone (iPhone, Android or Windows Phone) or iPad with a specified screen image.
- Browser Chrome Styles the viewer window to look like a web browser.
- Timer Runs a timer for a specified duration starting with a specified signal. It outputs the state of the timer as well as the time elapsed.
- Counter 2 Represents a number that can be incremented, decremented or set to a specific value.
- Index Switch Switches between multiple index values and remembers its current index.
- Velocity Outputs the difference in value between the previous frame and current frame.
Improvements to Quartz Composer
- Retina support for the viewer
- Automatically add a Layer patch when you drag in an image
- The up and down arrow keys can be used in text fields in the Inspector window
- Disabled patches show up as dimmed
- Redesigned toolbar icons
- Native full screen support in the viewer window
- Connections are maintained when a splitter is deleted
- Fix an issue introduced in 10.8 that replaced spaces with underscores in port names
- Fix a crash introduced in 10.9 when you close a document
- Linear port connections
Requires Mac OS X 10.8 or higher.