Constraints
Control how a layer repositions and resizes when its parent frame changes.
What constraints do
Constraints define the relationship between a child layer and its parent frame. When the parent is resized, constraints determine whether the child stays in place, moves, stretches, or scales with it.
Constraints are set independently for the horizontal (X) and vertical (Y) axis.
Horizontal constraint options
| Option | Behavior |
|---|---|
| Left | Layer stays anchored to the left edge of the parent. |
| Right | Layer stays anchored to the right edge of the parent. |
| Left and Right | Layer stretches horizontally to maintain distance from both edges. |
| Center | Layer stays horizontally centered in the parent. |
| Scale | Layer scales proportionally with the parent. |
Vertical constraint options
| Option | Behavior |
|---|---|
| Top | Layer stays anchored to the top edge of the parent. |
| Bottom | Layer stays anchored to the bottom edge of the parent. |
| Top and Bottom | Layer stretches vertically to maintain distance from both edges. |
| Center | Layer stays vertically centered in the parent. |
| Scale | Layer scales proportionally with the parent. |
How to set constraints
- Select a layer inside a frame.
- Open the Constraints section in the right inspector.
- Choose a horizontal and vertical constraint option.
Tips
- Use Left + Top for fixed-position elements that should stay in a corner regardless of frame size.
- Use Left and Right (stretch) for content that should always fill the frame width, like a navigation bar.
- Use Center for elements that should stay centered in the parent as it resizes, like a modal dialog.
- Resize the parent frame while watching the child to verify the constraint behaves as expected.
- Constraints interact with auto-layout — if a frame has auto-layout enabled, child positioning is controlled by layout rules instead of constraints.