# Constraints

> Decide where a layer goes when its frame changes size: pinned to an edge, centred, stretched or scaled.

Source: https://uxdeck.app/guide/constraints (checked against uxdeck on 16 October 2026)

Constraints say what a layer does when the frame around it is resized. A close button pinned to the right stays in the top right corner as the frame gets wider. A header pinned left and right stretches with it. A badge centred stays in the middle.

Constraints apply to layers that sit in a frame without auto layout, or that ignore their frame's auto layout. Layers placed by auto layout follow the flow instead (see [Auto layout](/guide/auto-layout)).

## Set a constraint

1. Select a layer inside a frame.
2. In the **Layout** section of the Design tab, find the two constraint menus and the small diagram beside them.
3. Pick a **Horizontal constraint** and a **Vertical constraint**, or click the edges of the diagram.

On the diagram, click an edge to pin the layer to it. <kbd>⇧</kbd>-click a second edge to pin both: left and right together stretch the layer with the frame. Click a centre line to centre the layer on that axis.

A new layer is pinned to the **Left** and **Top**.

## The options

| Horizontal | Vertical | What the layer does as the frame resizes |
|---|---|---|
| **Left** | **Top** | Keeps its distance from that edge. Its size does not change. |
| **Right** | **Bottom** | Keeps its distance from that edge, so it moves with it. |
| **Left and right** | **Top and bottom** | Keeps both distances, so it stretches. |
| **Centre** | **Centre** | Stays the same distance from the frame's centre. |
| **Scale** | **Scale** | Grows and shrinks with the frame, in position and in size. |

Choosing **Left and right** sets the layer's width to **Fill**, and **Top and bottom** sets its height to **Fill**. Choosing a single edge again turns Fill back into **Fixed**.

## See them on the canvas

With one layer selected, dotted lines run from it to each edge it is pinned to. A centred layer shows the frame's centre line across it. Lines hide while you move layers, and stay while you resize the frame.

## Resize without them

Hold <kbd>⌘</kbd> (or <kbd>Ctrl</kbd>) while you drag a frame's handle and its constraints are ignored: the layers inside stay exactly where they are on the canvas. Let go of the key to have them follow again.

## Several layers at once

Select several layers in frames and change a constraint: every one of them takes it, each keeping its own size. Where they differ, the menu reads **Mixed**.

## What it becomes on your site

When you publish or export, constraints become CSS positions. **Right** is written from the right edge, **Centre** from the middle, **Left and right** with both edges and an automatic width, and **Scale** in percentages. A layout built with constraints keeps its shape in a browser window of any width.

## Catches

- **Constraints need a frame.** A layer at the top level of the page, with no frame around it, has none.
- **Auto layout wins.** A layer placed by auto layout has no constraints until you press **Ignore auto layout** (next to Rotation). Then they decide where it sits in the frame.
- **Text that hugs its height keeps it.** With **Top and bottom**, a text layer that hugs its height still takes the height of its words.
- **Changes carry down.** A child that stretched passes its new size on to its own children, which follow their own constraints.
- **For pages that reflow, prefer auto layout.** Constraints keep layers in place; auto layout moves them around each other. A page of sections is easier to keep responsive with [auto layout](/guide/auto-layout) and [breakpoints](/guide/breakpoints).

Constraints are on every plan.