Layout
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, 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.
Related
- Flex layout — automatic arrangement with direction, spacing, and sizing
- Components & behaviors — reusable elements with layout properties
- Preview — test how constraints respond to different screen sizes