Concepts

Coordinates

Coordinates

Origami Studio use pt/dp coordinates instead of pixels. Specify position or size in pt/dp, and Origami will handle rendering layers at the appropriate density. For instance an iPhone 7 is 375x667 in points, but 750x1334 in pixels.

By default, the origin (x: 0, y: 0) is in the center of the device screen. On the X axis, coordinates increase as you move right, and decrease as you move left. On the Y axis, coordinates increase as you move down, and decrease as you move up.

For illustration, below is a Layer Group of height 400 pixels and width 300 pixels:

0, 0
150, -200
-150, 200

Anchor Point

Anchor points change the origin of the coordinate system for that patch. Anchor points can be defined in the Patch Editor with a Point patch, where X and Y are any decimal 0-1.

Top Left (0, 0)
Top Center (.5, 0)
Top Right (1, 0)
Center Left (0, .5)
Center (.5, .5)
Center Right (1, .5)
Bottom Left (0, 1)
Bottom Center (.5, 1)
Bottom Right (1, 1)

Here’s an example of a Text Layer positioned from the “Top Left” Anchor Point:

Button Text

From the bottom right:

Button Text

If you want to inset it by 40 pixels, give it an X Position of -40 and a Y Position of -40.

Button Text
-40, -40

Pivot

The pivot port changes the point about which a layer scales and rotates, and can be controlled separately from anchor points. Pivots can be defined in the Patch Editor with a Point patch, where X and Y are any decimal 0-1.

A
Center (.5, .5)
B
Top Left (0, 0)
C
Center Right (1, .5)