arrows-up-down-left-rightTransform

The Transform section controls a layer’s position, size, and orientation inside its parent (the canvas, or a group/container if the layer is inside one). Transform is the core way you place and arrange content in PLAY.

Transform includes:

  • Position: X, Y

  • Size: W, H + Aspect Ratio Lock

  • Rotation: Rotation (degrees)

  • Flip: Flip Horizontal, Flip Vertical

  • Alignment: Left / Center / Right / Top / Middle / Bottom

How Transform Works in PLAY

PLAY does not position layers using pixels. Instead, Transform uses a percentage-based system:

  • X / Y are the layer’s position as a percentage relative to the parent.

  • W / H are the layer’s size as a percentage relative to the parent.

This makes layouts scale naturally as the canvas (or container) changes size.

Parent Space: Artboard vs Groups

Transform is always relative to the layer’s parent:

  • If the layer is not inside a group/container, the canvas is the parent.

  • If the layer is inside a group/container, the group/container is the parent.

circle-info

Example: If a layer is inside a group, X = 50% (Anchor Point = Center) places it halfway across the group, not halfway across the full artboard.

Position

X and Y are measured from the left/top edges of the parent.

X

Moves the layer left/right within its parent using a percentage.

  • 0% = left edge of the parent

  • 100% = right edge of the parent

  • Values can go below 0% or above 100% to position the layer partially or fully off-parent.

Y

Moves the layer up/down within its parent using a percentage.

  • 0% = top edge of the parent

  • 100% = bottom edge of the parent

  • Values can go below 0% or above 100%.

circle-info

Note: The origin of a layer's X/Y is the anchor point of that layer, learn more about anchor points here. For example, aligning a layer visually to the right side doesn’t always mean X becomes 100%. X/Y follow the anchor, not the layer’s outer edge.

Size

W (Width) and H (Height)

Controls how much of the parent’s width/height the layer occupies.

  • W/H can exceed 100% if you want a layer larger than its parent.

  • W/H scale as the parent scales, because they’re percentage-based.

Aspect Ratio Lock

Between W and H is an aspect ratio lock:

  • Locked: changing W automatically updates H (and vice versa) to preserve proportions.

  • Unlocked: W and H can be changed independently.

Rotation

Rotation is measured in degrees.

  • Clockwise is positive.

  • Range: -360° to 360°.

Flip

Flip controls change the visual orientation of a layer:

  • Flip Horizontal

  • Flip Vertical

These flips affect the appearance of the layer and are not intended to change how position/rotation behaves.

Alignment Controls

The alignment row contains six buttons:

  • Horizontal: Left (ALT+L), Center (ALT+C), Right (ALT+R)

  • Vertical: Top (ALT+T), Middle (ALT+M), Bottom (ALT+B)

Clicking an alignment button moves the layer by updating its X and/or Y so it aligns within its parent. Alignment is applied relative to the parent (canvas if not grouped, otherwise the group/container).

circle-info

Not every layer type supports every transform property. Depending on the layer type:

  • X/Y/W/H may appear but be greyed out when they can’t be edited.

  • Other controls (like Rotation, Flip, and Alignment) may be hidden entirely if they aren’t relevant.

Last updated