Constraints

A child object can be prevented from being scaled when resizing its parent and be anchored to its parent in different ways. This ensures that designs can be presented in different layouts quickly and easily. The feature is perfect for designing UI mockups, e.g., to envisage how dialogs can be resized without affecting the position of every dialog control.

Before
After
Scaling has been disabled for all objects except the text, trophy button and the top lines. Anchoring has been applied to most objects except the text and trophy button.

Using constraints gives you the freedom to design without worrying that design rework will be adversely affected by unwanted object rescaling. By controlling selectively which objects will/won't be scaled and anchored, your design will always respond correctly to scaling.

Constraints only work in parent - child object relationships, i.e. where a parent object (container) contains nested content. A child object's scaling and anchoring is always in relation its container. For example, in UI design, a device mockup could have parent - child object relationships such as artboard - panel, panel - button, etc.

Constraining is exclusively carried out from the Constraints panel. The panel controls:

By default, nested content will scale when its container is resized. A child object is not anchored by default.

Locking aspect ratio

To prevent a child object losing its aspect ratio when its parent is scaled disproportionately, you can set it to Min Fit or Max Fit.

In both cases, if the parent object is resized proportionately, the child object will also scale proportionally.

To prevent a child object from scaling:
  1. Select a child object.
  2. On the Constraints panel, click the horizontal or vertical solid double arrow (or both) in the panel's inner square. A greyed-out dashed arrow means that scaling won't occur when its parent object is resized.
To anchor a child object to its parent's boundaries:
  1. Select a child object.
  2. On the Constraints panel, click a greyed-out dashed line between the inner and outer square to anchor the object to its parent in that direction (top, bottom, left, or right). A solid line means anchoring is being applied.
To maintain a child object's aspect ratio:
  1. Select a child object.
  2. On the Constraints panel, click Min Fit or Max Fit.

SEE ALSO: