Constraints

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).

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. ⇧-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 ⌘ (or Ctrl) 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 and breakpoints.

Constraints are on every plan.