Skip to main content

Constraints and absolute positioning

Constraints decide how a layer follows its parent frame when the frame changes size. Absolute positioning takes a child of a Flex or Grid frame out of the flow, so that constraints apply to it too. Also called: anchoring, pinning, ignore auto layout.

Add min/max constraints in the Properties panel header menu is a different thing: it sets a min and max size.

Where constraints apply​

Where: Properties panel → Constraints → the two dropdowns (tooltips Horizontal anchoring and Vertical anchoring).

Horizontally a layer is set to Left, Center, Right, Left + Right or Scale; vertically to Top, Center, Bottom, Top + Bottom or Scale.

  • The section is hidden when any selected layer is an in-flow item of a Flex or Grid frame, because the layout places it. An absolutely positioned child of such a frame has it.
  • A frame applies constraints to its direct children whenever its size changes: a resize on the canvas, a typed width or height, or a size that a layout gives it, such as a Fill item growing. Artboards, components and instances count as frames.
  • Left + Right, Top + Bottom and Scale change the child's size. A child frame then applies its own children's constraints, and a Flex or Grid child lays out its items again.
  • Scale resizes the layer's box only. Stroke width, corner radius and text size stay as they are.
  • Preview applies constraints too. The artboard takes the size of the viewport, so its children move and stretch as the viewport is resized (keeping a header in place).

With sizing, text and min/max​

  • On one axis of a frame, Hug content and a stretching constraint exclude each other. Setting the frame to Hug content changes its Left + Right, Top + Bottom or Scale to Center. Choosing one of those three on a Hug content frame sets the axis to Fixed (sizing modes).
  • A layer that sizes itself, a Hug content frame or an auto-sized text layer, grows away from its anchored side. Anchored Right it grows to the left, Bottom upward, and Center to both sides.
  • Resizing the parent on the canvas leaves a text layer at the size of its content: width and height when set to Auto width & height, height when set to Auto height. Left + Right, Top + Bottom and Scale don't resize it on those axes.
  • Min and max size limit a stretched or scaled layer. At the limit, a Left + Right or Top + Bottom layer keeps its left or top gap.
  • The three stretching constraints exclude a variable binding on Width or Height (Width and Height).

Inside instances​

  • Resizing an instance moves and resizes the layers inside it by the constraints set in the main component. The resize gives the instance a size of its own.
  • Constraints are locked on layers inside an instance; set them in the main component (what an instance can override).

Resizing a frame without moving its children​

Hold Ctrl while you drag a resize handle of a frame. Its children keep their place and size on the canvas, whatever their constraints are. Keep the key down until you release the pointer.

  • In-flow items of a Flex or Grid frame are still laid out.
  • The key has no effect on an instance. The layers inside it always follow their constraints.

Absolute positioning in a managed layout​

Where: select children of a Flex or Grid frame → Properties panel → the toggle next to the X and Y fields (tooltip Use absolute positioning).

  • The layer leaves the flow. The other items close up, and padding, gap, alignment and item order no longer apply to it. In a Grid it occupies no cell (placing items).
  • X and Y, disabled for in-flow items, become editable, and the Constraints section appears. The layer stays where the layout had put it, and from then on follows the container's size changes by its constraints.
  • It can't be set to Fill, and the auto margin and grid placement controls are hidden (sizing modes).
  • It adds nothing to the size of a Hug content container, so it can stick out of it.
  • Its place in the Layers panel decides what it covers (order and stacking) and never changes the order of the in-flow items.
  • Turned off, the layer returns to the flow, in a Flex frame at its place in the Layers panel, and a Fill setting it had applies again.