Constraints help control how elements behave when the container (frame or section) they are in changes size. They ensure your elements stay positioned and scale properly across devices and breakpoints. This works by anchoring the element to certain sides of the container, relative to its position.
The constraints are blue dotted lines on the canvas. They are also represented in the constraints editor, found in the style panel on the right.
How to turn off auto constraints
Go to the constraints editor in the style panel.
Open the dropdown to the left.
Select which side you want the element to anchor its position to.
Alternatively, you can deselect 'auto' by selecting the side you want it anchored to directly from the panel. This will update the dropdown selection to the side you choose.
Constraints Settings
Constraints are divided into horizontal and vertical settings. Here's a breakdown of how these work:
Horizontal Constraints
Value | Description |
Auto (default) | The constraints automatically update based on the element's position. |
Left | The element stays the same distance from the left side of the container. |
Right | The element stays the same distance from the right side of the container. |
Center | The element stays centered horizontally within the container. |
Stretch | The element stays the same distance to the left and right, causing its width to scale as the container resizes. |
Vertical Constraints
Value | Description |
Top (default) | The element stays the same distance from the top of the container. |
Bottom | The element stays the same distance from the bottom of the container. |
Center | The element stays centered vertically within the container. |
Stretch | The element stays the same distance to the top and bottom, causing its height to scale as the container resizes. |
Example Scenario
Let's say you have a button at the bottom of a card, and you want it to stay at the bottom when the card's height increases.
If the button is set with a vertical constraint to the top of the card, it will stay the same distance from the top when the card gets taller. To make the button stay at the bottom instead, adjust the button's vertical constraint to the bottom of the card. Now, the button will maintain its position relative to the bottom, not the top.