Basics

Layers

Layers

Layers in Origami Studio are similar to layers in Sketch and Photoshop: every layer has style attributes (position, size, an image or color) and can be ordered and organized.


Add a layer with the layer insertion popover using N or the + button in the toolbar.

Layer Groups

Layers can be grouped by selecting any number of layers and pressing G. Layer groups in Origami Studio have their own size and position, and clip layers within.

Layer Properties

Layer properties are similar to ports on patches. The values of these input ports determine the appearance of the layer.

Layer Property Patches

To adjust layer properties via patches, click on the property in the inspector, and a blue layer property patch is created with the name of the layer and a single input port that writes a value to that port.

Rectangle

  • Opacity 1

Clicking on the Opacity port on a Rectangle's property will add this patch to the Patch Editor.

You can also drag a cable directly from a patch to a layer property in the inspector.

If a property has multiple coordinates (ex: Position X/Y, Size W/H), you can click on the coordinate specifically, ex: X

Rectangle

  • Position X 0

… or click on the property as a whole, ex: Position

Point

  • X 0
  • Y 0
  • Z 0

Rectangle

  • Position X 0 Y 0

Clicking on a property with multiple coordinates (ex: Position, Size, Rotation) will automatically insert a Point patch, which can expose additional coordinates (ex: Z) that aren't shown by default.

Masking

Layers can be masked by other layers. Pressing M will turn the layer to an alpha mask, clipping the layer right above it. To add additional layers to be masked, you can select the layers and press M.

All masks are alpha masks, which can let you do advanced masks like gradient masks or composite masks based on a group of shapes.

Components

There is a growing collection of pre-built components for quickly prototyping with standard components on Android or iOS. Components are listed in the layer insertion popover.

Create custom components by selecting layers and pressing G to group them into a component. Double-click the component to enter it and make changes. Add it to your Library and share it with others by pressing C.


Summary

  • Layers are similar to layers in other apps like Sketch and Photoshop, and can be grouped and masked
  • Animate and change layers by clicking on layer properties in the inspector to add a corresponding patch in the Patch Editor.
  • Use pre-made components to speed up your workflow, and create your own library to share.