Understanding Constraints

Working with Constraint values

🧐 Understanding Constraints

Constraints decide how an object should behave when the container (i.e. a frame or the canvas itself) changes in size or breakpoint.

When you drag an element and position it onto your canvas or into your frame, the constraints will be automatically set according to the position. You can override these constraint values manually in the Style Panel.

💻 Working with Constraint values

Constraints already do most of the job for you by automatically changing constraints according to where you place your object. If necessary, you’re able to override this. In other words, you actually don’t need to do anything with it unless you know why you want to change it.

You will notice in the Style Panel a set of values that are set for constraints, a quick overview of those values are:

Horizontal values

Value

Description

Left

Element keeps its position relative to the left side

Right

Element keeps its position relative to the right side

Center

Element keeps its position relative to the horizontal center

Stretch

Element keeps its position relative to both left and right, which will cause its width to scale

Vertical values

Value

Description

Top

Element keeps its position relative to the top

Botttom

Element keeps its position relative to the bottom

Center

Element keeps its position relative to the horizontal center

Stretch

Element keeps its position relative to both the top and bottom, which will cause its height to scale

Did this answer your question?