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.
- Bouncy Animation Animate a changing value with a bouncy spring.
- 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
New in 1.2 Converts a hex string to a color.
- Cursor Control
New in 1.2 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.
Improved in 1.2 Draws a phone (iPhone, Android or Windows Phone) or iPad with a specified screen image.
- Browser Chrome
New in 1.2 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
New in 1.2 Switches between multiple index values and remembers its current index.
New in 1.2 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
New in 1.2
- 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.