The X and Y properties define the position of a Layer within its parent’s coordinate space. Together, they determine where the Layer is placed on the Layout Canvas relative to its parent’s alignment settings.

The input field for these properties accepts any number, whole or decimal.

Coordinate System: #

• X controls horizontal position.
  • Negative X values move the Layer left.
  • Positive X values move the Layer right.
• Y controls vertical position.
  • Negative Y values move the Layer up.
  • Positive Y values move the Layer down.

The point that these coordinates translate from depends on the Layer’s alignment.

Alignment and Origin point: #

Each Layer’s Horizontal and Vertical Alignment settings determine its origin point, where (0, 0) starts from within the parent Layer or Layout.

• Horizontal Alignment:
  • Left:
    • X = 0 aligns to the left edge of the parent.
  • Center:
    • X = 0 aligns to the center of the parent.
  • Right:
    • X = 0 aligns to the right edge of the parent.
• Vertical Alignment:
  • Top:
    • Y = 0 aligns to the top edge of the parent.
  • Center:
    • Y = 0 aligns to the vertical center of the parent.
  • Bottom:
    • Y = 0 aligns to the bottom edge of the parent.

For example, a Layer with Left–Top alignment will treat its top-left corner as the origin (0, 0). All X and Y offsets are measured from there.

Relation to Parent Layers: #

When a Layer is placed inside another Layer (such as a Group, Stack, or Grid), its X and Y coordinates are relative to that parent’s coordinate space.

If a Layer is at the top level of the Layout (no parent), its coordinates are relative to the Layout.

Stack & Grid Layers: #

In Stack and Grid Layers, child placement is managed automatically by the parent’s Layout behavior.

• The parent determines the base position of each child based on its Layout rules (horizontal, vertical, or grid-based).
• The X and Y properties on each child can then be used to apply offsets from that automatically determined position.
  • This is useful for fine-tuning spacing or applying small positional adjustments without breaking the structured Layout.