Using Layout Grids and Constraints
Constraints allow you to define how you want Objects to react when you resize the Frame. With Constraints, you can tell an object to stay to the left or right, or make it stretch to fill the space.
Learn more about applying Constraints in our Using Constraints article.
But when we're creating more complex designs, you need more precision and control. That’s where Layout Grids come into play.
Layout Grids are visual aids that help align Objects within a Frame. They provide structure to your designs and ensure they remain logical and consistent.
Learn more about using Layout Grids in our Layout Grids article.
Layout Grids and Constraints
Combining Layout Grids with Constraints provides you with a powerful layout system. You have more granular control over how objects respond when you resize them.
When you use a grid within a frame, Figma will align any objects within the Frame to that grid.
You can also decide if your Layout grids have Fixed Constraints (e.g. to the Left or Top of the Frame). Or, if they will Stretch when you resize the Frame.
If your Grids are set to Stretch, Figma will base an object’s Constraints on the grid's nearest Column or Row.
For example: You have a Stretch Layout grid and set Left and right Constraints on an object. When you resize the Frame, Figma will align the Left and Right co-ordinates of that object with the grid.
If you use a Fixed Layout grid, Figma will prioritise the Layout grid over any Constraints.
For example: You give an object left Constraints, but align it to the center of the grid.
When you resize the Frame, Figma will ignore any Constraints and align the object to the center of the grid.
Tip! You can nest frames within other frames for even greater control. This allows you to define different behavior between Frames or objects.
If you’re familiar with HTML, this works like a <div> element works in a webpage.
Learn more about combining Layout Grids and Constraints in Grid Systems for Screen Design.