Design Editor
Templates
Hosting
INTEGRATIONS
Constraints
Use Constraints to control an element’s position across breakpoints, increasing the speed of making your designs responsive.
Constraints have officially replaced the Origin tool
In this lesson:
- 1.Understanding constraints
- 2.Working with constraint values
- 3.Constraint exercises
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
Bottom
Element keeps its position relative to the bottom
Center
Element keeps its position relative to the vertical center
Stretch
Element keeps its position relative to both the top and bottom, which will cause its height to scale
Last modified 6mo ago