CheatSheetsHero

Browse / Origami Studio Cheatsheet

April 24, 2025 23:24
Prototyping
design
facebook
interactiondesign
origamistudio
Download PDF
Missing something?

Origami Studio Cheatsheet

Unlock the power of interactive design with this comprehensive guide to Origami Studio basics, patches, shortcuts, and essential tips for creating compelling prototypes.

Origami Studio Basics

Interface Overview

Viewer: Simulates your prototype on a device. Can change device type, orientation, and scale.

Layer List: Hierarchical view of all visual elements (layers) in your prototype.

Patch Editor: Where you connect patches to define logic, interactions, and animations.

Inspector: Shows properties of selected layers, patches, or the project itself.

Patch Library: Searchable list of all available patches.

Assets: Area for importing images, videos, and other media.

Toolbar: Contains tools for adding layers, patches, comments, etc.

Timebar: For animating properties over time using keyframes.

Working with Layers

Add Layer:

Cmd + L or + button in Layer List. Choose from Device, Scroll, Text, Image, etc.

Group Layers:

Select layers, Cmd + G. Creates a Group layer containing selected items.

Ungroup Layers:

Select group, Cmd + Shift + G.

Rename Layer:

Double-click layer name in Layer List or select and press Enter.

Duplicate Layer:

Select layer, Cmd + D.

Delete Layer:

Select layer, Delete key.

Connect Layer Property to Patch:

Click arrow next to property in Inspector. Creates a patch in Patch Editor.

Add Mask Layer:

Place mask layer directly above the layer(s) you want to mask in the Layer List. Mask layer’s shape determines visible area below it.

Working with Patches

Adding & Connecting

Add Patch:

Double-click anywhere in Patch Editor or Cmd + Return. Type patch name and select.

Connect Patches:

Click and drag from an output port (right side) to an input port (left side).

Disconnect:

Click the connection line and press Delete.

Auto-connect:

Drag patch from Library to Patch Editor - it often suggests connections.
Or drag a layer from Layer List into Patch Editor to create patches for its properties.

View Patch Info:

Select patch, Inspector shows its properties and description.

Enable/Disable Patch:

Right-click patch, select ‘Enabled’.

Group Patches:

Select patches, Cmd + G. Creates a Subgraph patch.

Edit Subgraph:

Double-click a Subgraph patch to open its internal editor.

Basic Patches

Constant:

Outputs a fixed value (Number, Color, Text, etc.).

Interaction:

Handles user input (Tap, Drag, Pinch, etc.).

Transition:

Animates a value between a start and end over time.

Spring:

Creates realistic spring/physics-based animation.

Switch:

Toggles between two values based on a boolean input.

If:

Outputs one value if condition is true, another if false.

Counter:

Increments or decrements a value on trigger.

Lerp (Linear Interpolation):

Calculates a value between two points based on a factor (0-1).

Advanced Patches

Bistable:

Holds its state (true/false) until triggered to switch.

Feedback:

Creates a loop where the output of a patch feeds back into its input (useful for state management).

Accumulator:

Adds input values cumulatively.

Loop:

Repeats a trigger signal.

Delay:

Delays a trigger signal by a specified time.

Sample & Hold:

Outputs the value it received last time it was triggered.

Combine:

Merges multiple signals into one (e.g., combining X, Y, Z into a 3D Vector).

Separate:

Splits a combined signal into its components.

Shortcuts & Tips

Essential Shortcuts

`Cmd + N`

New Document

`Cmd + S`

Save Document

`Cmd + P` or `Cmd + Return`

Open Patch Library

`Cmd + L`

Open Layer Library

`Cmd + G`

Group Layers/Patches

`Cmd + Shift + G`

Ungroup Layers/Patches

`Cmd + D`

Duplicate

`Spacebar`

Pause/Play prototype in Viewer

`Cmd + 1`, `Cmd + 2`, `Cmd + 3`...

Switch Viewer Scale (100%, 50%, Fit, etc.)

Workflow Tips

Organize with Subgraphs: Group related patches into subgraphs (Cmd + G) to keep your Patch Editor clean and understandable.

Use Comments: Add Comment patches (C) to explain complex logic or sections of your patch graph. Essential for collaboration.

Test on Device: Use the Origami Live app (iOS/Android) or Mirroring via USB/Wi-Fi to test on actual devices. Crucial for performance and touch interactions.

Name Layers & Patches: Use descriptive names. This makes finding elements and understanding the patch graph much easier.

Iterate Quickly: The live preview in the Viewer and on device allows for rapid iteration. Make a change, see the result instantly.

Learn Basic Math/Logic: Many interactions rely on simple math (Add, Multiply, Lerp) or logic (If, Switch). Understanding these is key.

Start Simple: Don’t try to build everything at once. Prototype core interactions first, then add complexity.

Explore Examples: Open and study the example files provided with Origami Studio to learn how complex interactions are built.

Debugging & Testing

Print Patch: Add a Print patch to see the value of a signal in the Console at a specific point in the graph.

Watch Patch: Drag a connection line away from an input/output. A Watch patch is created, showing the live value of that signal.

Viewer Debug: The Viewer often shows visual cues or error messages. Hovering over layers can show hit areas.

Console: Check the Console window (Cmd + Option + C) for Print patch output and system errors.

Step Debugger: Use the Step debugger (usually near the Play button) to pause execution and step through triggers.

Isolate Issues: Temporarily disconnect parts of your patch graph to narrow down where an issue is occurring.

Check Connections: Ensure ports are compatible (color coding helps - numbers connect to numbers, triggers to triggers, etc.) and that connections go from output to input.

Restart Viewer/Origami: Sometimes a simple restart of the Viewer or the application can resolve unexpected behavior.