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.