Constraints allow you to specify how you want an object to respond, when the Frame it is contained within is resized. Constraints can be applied to Frames, as well as individual objects.
This is perfect for when you want to control how a design looks across different screens sizes or devices. For example, when you want your navigation bar to remain the same size on all phones or tablets.
You can set both the horizontal and vertical constraint for each object or parent, as well as determine how an object will respond to scrolling during Prototyping. Learn more about Prototyping in Figma.
In this article, we'll cover:
- What Horizontal and Vertical Constraints are available.
- Using and Applying Constraints.
- Working with Grids and Constraints.
Check out the video below, or keep reading to find out more.
You can apply both Horizontal and Vertical Constraints:
The Horizontal constraint determines how you want the object to behave when its containing Frame is resized horizontally.
- 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 horizontally, when resized.
- Center maintains the object’s position, relative to the horizontal center of the frame.
- Scale will fix the object’s size and position as a percentage and scale it accordingly. For example: if the object takes up 70% of the frame or parent, horizontally, with 10% offset on the left and 20% on the right, the same proportions will be maintained when it is resized.
The Vertical constraint determines how you want the object to behave when its containing Frame is resized vertically.
- Top maintains the object’s position, relative to the top of the frame.
- Right 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 vertically, when resized.
- Center maintains the object’s position, relative to the vertical center of the frame.
- Scale will fix the object’s size and position as a percentage and scale it accordingly. For example: if the object takes up 10% of the frame or parent, vertically, with 5% offset from the top and 75% from the bottom, the same proportions will be maintained when it is resized.
Tip! Depending on the object’s position to the frame, more than one of the constraint options may achieve the same result. In this situation, any unnecessary constraints will be greyed out.
To set the constraints for an item:
- Select the object or parent within the Frame.
- Go to the Constraints section in the Properties Panel.
- Use the first drop down menu to set the Horizontal constraint.
- Use the second drop down menu to set the Vertical constraint.
- Or, use the diagram (to the left of the drop down menus) to set the object’s constraints. The blue lines indicate which constraints are currently selected.
Tip! You can hold down the shift key to select multiple constraints e.g. left and right, or top and bottom.
- If you want the object to remain in the same position when scrolling - like a navigation bar - check the box next to Fix position when scrolling:
Tip! If you'd like to resize something and ignore the constraints, hold down the [Command] (Mac) or [Control] (Windows) key when resizing.
Working with Grids and Constraints
Constraints are great at giving you a basic framework for where object are positioned within a frame. But when it comes to creating more complex designs, we need more precise control and flexibility to ensure our designs behave when resized.
That’s where Grids come into play. Not familiar with Grids? Learn more about adding and using grids.
When you use a Grid within a frame, by default, Figma will align any objects within the Frame to that Grid. However, you can also determine if your Grids have fixed constraints (to the Left or Top), or if they will Stretch when the Frame is resized.
If your Grids are set to Stretch, an object’s constraints will always be based on the nearest column or row. For example: if you set a Left and right Constraint on an object in a stretchy Grid, its left and right coordinates will move as the grid is resized.
If you are using fixed grids (that aren’t set to stretch) then Figma will prioritise your layout, over the object’s Constraints. For example: if you align an object to a Grid in the center, we will ignore any Constraints on the individual item and position the object so that it remains in the center of the Grid.
Tip! In Figma, you can nest frames within other frames for even greater control. If you’re familiar with HTML, this works similarly to how a <div> element works in a webpage. Learn more about combining Layout Grids and Constraints in "Grid Systems for Screen Design" on Figma’s Medium page.
Frames are containers or working areas within your canvas, similar to an Art board. Frames have their own dimensions and constraints and you can place objects within a frame, as well as nest frames within other frames.
Objects are elements of your design that have been added to a canvas, like shapes, images, text and vector networks.
Constraints determine how an object or objects will respond, when a frame or design is resized.
Components are a collection of objects or layers that together form a single UI element (e.g. a button) that can be reused across your designs. When it comes to Constraints, Components are treated like Frames, as opposed to Groups.
Groups are a collection of objects that have been placed together, and are nested within a frame. Unlike a Frame, a Group doesn't have its own size or constraints.
Layout Grids are visual aids that give structure, balance and coherence to your design by helping to keep objects aligned within Frames. They are not visible on the final design.
Stretch Grids are grids that will scale when a design is resized. Any objects within a stretch grid will retain their constraints.
Non-stretch Grids are grids that are fixed within the frame, in both size and position. When a design is resized, they will ignore an object's individual constraints and ensure it aligns with the grid instead.
New to design, or want a refresh? Make sure to check out Figma's Design Dictionary for detailed descriptions of common design terms.