On this page

Every object on your canvas has a position and size. Layout controls give you precise placement with coordinates and dimensions, and constraints let you define how objects respond when their parent frame resizes — pin to an edge, stretch between edges, or scale proportionally.

## Position and size  
The **Size & Position** section in the Properties panel controls where an object sits and how large it is.

| Property     | What it controls         |
|--------------|--------------------------|
| **X**       | Horizontal position       |
| **Y**       | Vertical position         |
| **W**       | Width                    |
| **H**       | Height                   |
| **Rotation** | Angle in degrees         |

### Lock aspect ratio  
Click the lock icon between the width and height fields to constrain proportions. When locked, changing one dimension automatically adjusts the other to maintain the ratio.

### Absolute positioning  
When an object is inside a [flex layout](/content/docs/core-concepts-flex-layout/index.html), it participates in the auto-layout flow by default. Toggle **absolute positioning** to pull it out of the flex flow — the object stays at its set X/Y coordinates while siblings continue to arrange automatically.

## Constraints  
Constraints define how an object behaves when its **parent frame** resizes. They're set in the **Constraints** section of the Properties panel using an anchor point picker and dropdown menus.

### Horizontal anchoring  
| Option              | Behavior                                                      |
|---------------------|--------------------------------------------------------------|
| **Left**            | Pinned to the left edge. Distance from the left stays fixed. |
| **Center**          | Centered horizontally. Stays in the middle as the parent widens. |
| **Right**           | Pinned to the right edge. Distance from the right stays fixed. |
| **Left + Right**    | Pinned to both edges. The object stretches as the parent widens. |
| **Scale**           | Scales proportionally with the parent's width.              |

### Vertical anchoring  
| Option              | Behavior                                                      |
|---------------------|--------------------------------------------------------------|
| **Top**             | Pinned to the top edge. Distance from the top stays fixed.   |
| **Center**          | Centered vertically. Stays in the middle as the parent grows. |
| **Bottom**          | Pinned to the bottom edge. Distance from the bottom stays fixed. |
| **Top + Bottom**    | Pinned to both edges. The object stretches as the parent grows. |
| **Scale**           | Scales proportionally with the parent's height.             |

### How resizing works with constraints  
When an object is pinned to one side, it resizes from the **opposite** side — the pinned edge stays put. For example, an object pinned to the left will grow or shrink from its right edge.

**Left + Right** (or Top + Bottom) pins both edges, so the object stretches to fill the gap as the parent resizes. This is useful for elements like full-width headers or sidebars that should always span the parent.

**Scale** maintains the object's proportional position and size relative to the parent. If the parent doubles in width, the object doubles too and stays in the same relative spot.

## Troubleshooting  
### My object moves unexpectedly when I resize the parent  
Check the constraint settings. If no constraint is set, the object defaults to top-left anchoring. Set the anchoring to match how you want it to behave.

### My object isn't stretching with the parent  
Use **Left + Right** (horizontal) or **Top + Bottom** (vertical) anchoring. Single-edge anchoring pins position but doesn't stretch.

### Absolute positioning isn't available  
This option only appears for objects inside a flex layout. If your object isn't in a flex container, it's already freely positioned.