Avocado is an open source interaction design toolbox built by IDEO. It enables designers to make quick interactive prototypes without writing a line of code. Built on top of Facebook's Origami framework, Avocado provides ready-to-use patches that can be easily combined to create fully-customized prototypes.
We're always in search of ways to collaborate and build more effectively at IDEO, and this library is an experiment that helps us be lean when prototyping interactions. Curious to learn more about the story behind Avocado? Visit our IDEO Labs post.
We hope Avocado can be of use to you, and please feel free to share your ideas here on GitHub or tweet to @AvocadoByIDEO.
###Getting started with Quartz Composer
####What is Quartz Composer? Quartz Composer is a visual programming language provided as part of the Xcode development environment in Mac OS X. Prototyping interactions with Quartz Composer is not immediate. Avocado provides a set of ready-to-use components that enables designers to quickly create interactive prototypes.
####Some resources
- The 4-Minute Guide to Quartz Composer
- Learning Quartz Composer Book
- Apple's Guide to Quartz Composer
- Understanding coordinates in Quartz Composer
- A temporary fix to the Drag Drift bug in Quartz Composer
- Facebook Origami's Community
####How to test the prototypes on a device? Download LiveView. To increase the framerate you can use this trick.
###Getting started with Avocado To get started with Avocado simply register as an Apple Developer, download Quartz Composer, and install Avocado.
Here are some frequently asked questions and some examples. Below you can find a description of all the patches included in Avocado.
####Interactions
- Carousel, creates a swipeable carousel of images. Information on its current state is provided through the Carousel Info patch
- Bistable, makes an element snap to two positions. Information on its current state is provided through the Bistable Info patch
- Master Detail, creates a Master-Detail relationship between two views
- Flip, creates a card that can be flipped back and forth
- Hit Grid, creates a grid of Hit Areas. To retrieve which element has been clicked use Hit Grid Info
- iOS Keyboard, provides an interactive keyboard. To retrieve the text being typed use iOS Keyboard Info
####Animations
- Nod
- Pulse
- Jiggle
- Jump
####Global Value
- Save Global Boolean and Retrieve Global Boolean
- Save Global String and Retrieve Global String
####Utilities
- Keyboard 2, meant to replace the standard Keyboard patch. It provides information on which key is being pressed
- Delay Value, delay any value by the specified amount of time
- Gate, stops the propagation of a signal
- Invert, flips a boolean value
- Map to Range, remaps a value to a new range
- Absolute Value, returns the absolute value of a number
- String to Number, turns a string of numbers into a number
###Feedback If you have any thoughts or contributions for how we can continue to evolve this experiment, feel free to share your ideas here on GitHub or tweet to @AvocadoByIDEO.