Understanding Constraints

Working with Constraint values

Best Practice

Understanding Constraints

Constraints decide how an object will behave when the container (i.e. a frame or the section itself) changes in device size or breakpoint. It is essentially setting up a fixed anchor position for your element which is maintained across all device sizes.

When you place an element onto a section or within a frame, the constraints will automatically be set according to the position the element is placed. The constraints settings are visible at the top of the style panel on the right of the canvas. You can adjust constraints either by interacting with the element directly or by changing the values of the elements in the style panel.

💻 Working with Constraint values

Vev already does the heavy lifting for you by automatically changing the constraints’ values as you move and adjust your object’s position on the canvas. Although, if you’re aiming for precision, you may want to manually input the values of the constraints. For example, if you want all text boxes across different sections in your project to have the same position.

Here is a quick overview of the constraints components and what they do:

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

Bottom

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

🌟Best Practice

Element positioned at the bottom left of a section:

❌ Bad Constraint setting: Top left

In the example above, you can see that the element with the bad constraint setting does not adjust as the section height increases, this is because its position is set to be relative to the top. Since the distance to the top did not change, the element stayed in place. See the below for a proper constraint setting for this example.

✅ Good Constraint setting: Bottom left

In the above, you see the element with the good constraint setting is responsive to the section’s height changes as the position is set to be relative to the bottom, thus the element moves with the changes; maintaining the set distance to the bottom.

The position of an element at the bottom should be set to be relative to the bottom, likewise, an element at the top should be set to be relative to the top. You should always pay attention to your constraint settings in the style panel to ensure your elements are set to be effectively responsive.

Related Articles

Auto Layout

Sizing Components

Project Breakpoints

Spacing Options

Understanding the Safe Zone

Did this answer your question?