Build modern 3D User Interfaces

with Origami Studio & Sketch

A collection of free and open sourced resources for Origami Studio and Sketch, designed to help you learn, explore and iterate design ideas for modern interfaces in Virtual Reality and Mixed Reality.

Origami Studio

Updated 19 November 2016

New Patches and Examples

Updated 23 February 2017

Github

Updated 22 February 2017
Visit the offical origami.design website for more examples, tutorials and support.
Examples are accompanied by Sketch documents, Sketch a popular design tool thats works natively with Origami Studio.
Stacks Image 36301
Stacks Image 36461

Download and install Origami Studio

Stacks Image 36470

3

Download and install Origami Studio

Stacks Image 36480

Download Origami Live for iOS or Android

Stacks Image 36489

4

Download Origami Live for iOS or Android

My Image
Stacks Image 36749
Stacks Image 36742
Stacks Image 36763
Stacks Image 36761
Stacks Image 36740
Stacks Image 36755
Stacks Image 36744
Stacks Image 36752

Origami v1 - v2 (2013 - 2015)

Most designers today create static mockups to communicate app ideas. But increasingly apps are anything but static, this is why I use Origami a tool for interaction design by the Facebook Design Team. A tool built upon a development language called Quartz Composer that I have 10 years experience developing with.
Origami is a tool for designing modern user interfaces. Allowing quick creation of prototypes that run on your iPhone or iPad, ideal for quick iterations and the added bonus of exporting code snippets for your engineers to use.
Inaddition Origami can prototype for desktop websites and apps with features like text input, custom cursors, FaceTime camera, OS X drag and drop, and a resizable web browser frame for prototyping responsive designs.
Facebook created Origami to help them design and build many of their products, including Instagram, Paper, Messenger, Slingshot, Rooms, and Groups.

Archived Examples

Requirements

Stacks Image 16904

1

Register as an Apple Developer

Stacks Image 16917

1

Register as an Apple Developer

Stacks Image 16934

2

Download and install Quartz Composer

Stacks Image 16949

2

Download and install Quartz Composer

Stacks Image 16962

3

Download and install Origami 2.0.2

Stacks Image 16973

3

Download and install Origami 2.0.2

Stacks Image 17051

4

Download Origami Live for iOS

Stacks Image 17062

4

Download Origami Live for iOS

iBeacons

UI designed for interactive guide system based in muesums and house holds.

Touch Preview

Touch Preview UI including my OpenAL custom music player plugin

Maze 3D Orientation

Example of collisions and 3D device orientation

Guess Who

Using Messenger Platform play a game of Guess Who

Paraxeling UI

3D orientation example naviagtion, paraxeling effect.

Image Grid Mode

Media Grid prototype built in Quartz Composer and Origami. Inspired by iTunes (iOS)

Cloth Mechanics

Multi Touch mesh cloth mechanics using the POP framwork

Live Twitter Feed

Real time twitter search feed for displaying incoming tweets with a specific search parameter

Color Palette

Generates a color palette from an inputted image
My Image

Pinch, Zoom, Rotate, Drag

Useful multitouch gesture for display and zooming into images.

Grid Layout

Multitouch grid layout for mobile application prototypes. Dynamically adjust the rows and columns.

Transitions

Transitions between application screens or inputted images

Apple Watch clock faces

Working Apple Watch clock faces

Create Account

UI to demostrate creating an account

Circular Image Scrolling

A continuous circular scrolling UI mechanism with rubber tension, magnet forces and snapping at boundaries.

Scroll Wheel UI

Touch control scroll wheel UI with behavioural force and inerition

BBC Radio

Inspired to recreate the scrolling dial navigation prototype.

Contacts Page

iOS contact page. Demonstrates iterated contacts list, frame scrolling, and swipe for options.

Paraxeling UI

3D orientation example naviagtion, paraxeling effect.

Image Grid Mode

Media Grid prototype built in Quartz Composer and Origami. Inspired by iTunes (iOS)

iTunes player

iTunes sender and receive plugin for Quartz Composer and Origami.

Stacks Image 13092

Philips Hue

Precise position based iBeacon and Philips Hue application concept.

Image Scrolling

Multiple image scrolling with magnetic force and snap to boundaries. Includes phone model transitions and parallax example. Look inside composition for keyboard controls

Phone Transitions

Phone model transitions for different mobile models