Combine layout guides and constraints

Constraints allow you to define how objects react when you resize their parent frame. Constraints can control both an object's relative position and size.

Layout guides are visual aids that help you align objects within frames. When you use a layout guide within a frame, Figma aligns objects in that frame to the guide.

You can combine layout guides with constraints to create powerful and flexible layouts. This gives you more granular control over how objects respond as you resize them.

Layout guides can have fixed dimensions or stretch as you resize the frame. The type of layout guide will determine whether Figma prioritizes the guide or any constraints.

In our example below, we have applied center constraints to the plus icon in our cards. We can see how Figma determines that object's position, depending on the type of layout guide we use.

Stretch layout guide

If your guide is set to Stretch, Figma will base an object’s constraints on the guide's nearest column or row.

Stretch layout guides adapt to the size of the frame. This allows your designs to respond when you resize the frame. Figma will set the width and height of the guide so that it corresponds to the frame size.

When you use stretch, Figma takes into account the object's constraints, relative to the layout guide.

In our example below, the cards in our design uses a stretch layout guide. Our left screen uses the frame preset for the iPhone 11 Pro, and the right uses the iPad Pro 11".

We can see that Figma has stretched the layout guide to match the card's new dimensions. We can also see that the plus icon is still in the center of the right guide column.

Fixed layout guide

Fixed layout guides let you choose how many columns and rows are in your guide. You can then define both the width of the columns and the height of the rows.

You can then fix the position of a fixed layout guide in the parent frame:

• Row: Fix the guide to the top or center of the frame.
• Column: Fix the guide to the left or the center of the frame.

When you use a fixed layout guide, Figma will honor constraints in relation to the frame and not the guide.

In our example below, the cards in our design use a fixed layout guide. Our left screen uses the frame preset for the iPhone 11 Pro, and the right uses the iPad Pro 11".

Our plus icon uses center constraints. We can see that Figma has set the object's position in relation to the frame and not the layout guide.