Origami Studio

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, with a bias towards game UX / UI

Origami Studio

Updated 1 October 2017

Patches & Examples

Updated 23 February 2017

Github

Updated 22 February 2017
Visit the offical origami.design website for more examples, tutorials and support.
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

Components

Custom made layout components made for Origami Studio whilst working at Sprung Studios
  • Stacks Image 36941
  • Stacks Image 37091
  • Stacks Image 37093
  • Stacks Image 37095
  • Stacks Image 37097
  • Stacks Image 37099
  • Stacks Image 37101
  • Stacks Image 37103
  • Stacks Image 37109
  • Stacks Image 37111
  • Stacks Image 37117
  • Stacks Image 37119
  • Stacks Image 37121
  • Stacks Image 37125
  • Stacks Image 37133

Carousel

Introducing my 3D Carousel Component for Origami Studio
My Image

Virtual Reality

Interactive and rotating VR hands in various poses to be used with your VR design prototypes
Stacks Image 36749
Stacks Image 36742
Stacks Image 36763
Stacks Image 36761
Stacks Image 36740
Stacks Image 36755
Stacks Image 36744
Stacks Image 36752

Custom Device

Simulated devices for Origami Studio, these device have custom dimensions, scale, frame and hand images.
Stacks Image 36983
Stacks Image 36985
Stacks Image 36989
Stacks Image 36987

Peripherals

Xbox and PS4 controller support for VR and Console UI testing
Coming Soon
My Image
Stacks Image 36798
Stacks Image 36885

Patches

Reusable patches to help with frequently used process's
My Image

Utilities

Three dimensional objects to help with wireframing VR/AR designs concepts

Test Cards

Example test cards to easily display logic when shuffling loops
Graphics are designed by Webshocker. You can order the physical playing cards for at http://webshocker.net
Stacks Image 36832

3D Shapes

Three dimensional objects to help with wireframing VR/AR designs concepts
Stacks Image 36812
Stacks Image 36802
Stacks Image 36820

Moveable

Unity style controller for Origami Studio
Stacks Image 36994
Stacks Image 36851
Stacks Image 36854

Guides

Design guides and device information for debugging and alignment tests
Stacks Image 36807
Stacks Image 37057
Stacks Image 37060

Origami v2 Quartz Composer (2014 - 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

Origami v1 Quartz Composer (2013 - 2014)

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