Apply Constraints to define how layers resize
Before you Start
Who can use this feature
Users on Any Figma plan can use Constraints
Users with Edit access to a File can apply and edit Constraints. Constraints can only be applied to objects within Frames.
Constraints tell Figma how objects should respond as you resize their Frames. This helps you to control how designs look across different screen sizes and devices.
You can check out the video below, or continue reading to find out more.
Horizontal and Vertical Constraints
You can apply Constraints along both the x (horizontal) and y (vertical) axis.
We set an object's Constraints to Top and Left by default.
Horizontal Constraints
Horizontal constraints define how an object behaves, as you resize the Frame along the x axis.
- Left maintains the object’s position, relative to the left side of the frame.
- Right maintains the object’s position, relative to the right side of the frame.
- Left and right maintains the object’s size and position relative to both sides of the frame. This may cause objects to grow or shrink along the x axis, when resized.
- Center maintains the object’s position, relative to the horizontal center of the frame.
- Scale will define the object’s size and position as a percentage of the Frame's dimensions. It will then maintain those proportions as you resize it.
For example: The Frame's width is 100px and the object's width is 70px i.e. the object takes up 70% of its parent Frame. If we resize the Frame to 200px wide, Figma will resize the object to a width of 140px, 70% of 200px.
Vertical Constraints
Vertical constraints define how an object behaves, as you resize the Frame along the y axis.
- Top maintains the object’s position, relative to the top of the frame.
- Bottom maintains the object’s position, relative to the bottom of the frame.
- Top and bottom maintains the object’s size and position relative to the top and bottom of the frame. This may cause objects to grow or shrink along the y axis, when resized.
- Center maintains the object’s position, relative to the vertical center of the frame.
- Scale will define the object’s size and position as a percentage of the Frame's dimensions. It will then maintain those proportions as you resize it.
Note: Depending on the object’s position, more than one Constraint may achieve the same result.
Apply Constraints to an object
You can apply Constraints to any object within a Frame.
- You can also apply Constraints to Frames you have nested within other Frames.
- You can apply both horizontal and vertical constraints to objects.
- You can use Constraints to define how objects respond in scrolling Prototypes. Learn more about Prototyping in Figma.
- You can't apply constraints to Groups. A Group will inherit its bounds from the objects contained within it. They aren't considered a single object with bounds.
Note: If you apply Constraints to a Group, we apply these to the individual objects instead.
To set the constraints for an item:
- Select the object or parent within the Frame. The blue dotted line on the canvas shows which constraints are currently applied:
- Adjust the vertical and horizontal constraints in the Constraints settings in the Properties Panel.
- Use the drop down menus to set the object's constraints.
- Or, click on the lines in the interactive diagram to select a constraint.
- If you want the object to stay in the same position, even when scrolling, check the box next to Fix position when scrolling.
Tip! Hold down Shift to select more than one Constraint. For example: Left and Right Constraints.
Ignore Constraints
Sometimes you may want to resize a Frame or object, without using the Constraints that are applied to it.
You can temporarily ignore any Constraints applied to an object by holding down a modifier key.
- MacOS: Hold down Command when you resize
- Windows: Hold down Ctrl when you resize
To resize the object with Constraints, release the modifier key.
Constraints and Layout Grids
Constraints give you a basic framework for positioning objects within a frame. When it comes to more complex designs, we need more precise control and flexibility. This ensures our designs behave when resized.
That’s where Grids come into play. When you use a Grid within a frame, by default, Figma will align any objects within the Frame to that Grid.
Learn more about using Constraints and Layout Grids in Working with Constraints and Layout Grids.