Layout grids and constraints

Layout grids are visual aids that help you organize layouts and align layers within frames.

Constraints allow you to define how layers respond when their parent frame resizes, controlling the layer's relative position and size.

You can combine layout grids with constraints to create powerful and flexible layouts. This gives you more precise control of how layers respond.

Stretch layout grids

When the layout is set to Stretch, the layout grid can automatically adapt to the frame's size. Thus, when you resize the frame, the design content can respond accordingly.

If the layout is set to Stretch, Motiff will use the nearest row or column to the layer as the reference for constraints:

• When vertical constraints are set to top, bottom, top & bottom, or center, rows will be used as the reference for constraints.
• When horizontal constraints are set to left, right, left & right, or center, columns will be used as the reference for constraints.

For example, a card uses a Stretch layout grid, and a button is set with a horizontal constraint to the Left.

In this case, if you drag the card horizontally, the layout grid will automatically respond to the changes in card size, and the button's constraint is the column closest to it. The position of the button is different from when only constraints are added.

Fixed layout grids

Fixed layout grids allow you to define the row height and the column width.

You can fix the layout grid's position within the parent frame:

• Rows: Can be fixed to the top, bottom, or center of the frame.
• Columns: Can be fixed to the left, right, or center of the frame.

When you use a fixed layout grid, Motiff will use the parent frame as the reference for constraints.

For example, a card uses a Fixed layout grid, and a button is set with a horizontal constraint to the Left.

In this case, if you drag the card horizontally, the layout grid remains fixed to the left side of the card, and the button's constraint is its parent frame. The position of the button remains the same as when only constraints are added.