emmerson/avocado

An interaction design toolbox

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. 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 node-based visual programming language provided as part of the Xcode development environment in Mac OS X for processing and rendering graphical data. Out of the box, interaction prototyping with Quartz Composer is complicated. Avocado provides a set of ready-to-use components that enable 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.

###Patches in Avocado ####Interactions

• Carousel, creates a swipeable carousel of images
• Bistable, makes an element snap to two positions
• Master Detail, creates a Master-Detail relationship between two views (a-la iOS 7)
• 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

####Animations (coming in 1.0)

• Pulse
• Shake
• Jump

####Global Value

• Save Global Boolean and Retrieve Global Boolean
• Save Global String and Retrieve Global String

####Utilities

• 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.