About layout grid

Grids are a common tool for organizing layouts in design. In Motiff, pixel grids allow you to precisely control the position of layers, while layout grids give you simpler and more flexible control over the layout.

About layout grids

Layout grids can help you align and layout designs, providing a visual layout structure and maintaining the logic and consistency of layouts when design dimensions change.

Layout grids can only be applied to frames. You can apply them to the top-level frame or other types of frames.

Add layout grids

Layout grids can be applied to any frame. Components are also frames.

You can add layout grids by following these steps:

1. 1.After selecting the frame layer, click in the layout grid module of the design panel.
2. 2.Motiff adds a grid inside the container by default.
3. 3.You can click to modify properties.

Layout grid properties

Motiff supports three types of layout grids: grids, rows, and columns.

You can click to change the type of layout grid.

Grid

The grid is suitable for scenarios that require precise control of dimensions, such as designing icons.

The size and color of the grid can be adjusted. For example, in a default grid size of 10, each square has a side length of 10 px.

Rows and columns

Rows and columns are suitable for responsive interface design for web pages and mobile devices.

For rows and columns, you can define their height or width, number, color, and other properties.

• Layout methods: Motiff supports fixed and stretch layout methods.
  • Fixed: Allows the layout grid to be fixed in a certain position within the frame. For example, when the layout grid type is Rows, the fixed methods include Top, Bottom, and Center.
  • Stretch: Allows the layout grid to automatically adapt to the size of the frame and respond to changes in the dimensions of the frame.

When the layout method is different, the properties that can be set may also differ.

• Offset: When the layout method is top, bottom, left, or right, you can control the distance of rows and columns to the corresponding edge.
• Width: When the layout method is set to stretch, you can control the distance of the created rows and columns to the boundaries on both sides.
• Gutter: You can adjust the distance between each column or row.

You can use a single layout grid or repeat the above steps to add multiple layout grids and combine them to organize more complex layouts.

Show and hide layout grids

When you temporarily do not need layout grids but do not want to delete them directly, you can toggle the visibility of the layout grids to avoid unnecessary visual interference.

Show and hide all layout grids

You can select Layout grids in the view/zoom options of the toolbar to show or hide all layout grids in the file.

You can also use shortcuts to toggle:

• macOS: ⇧ Shift + G
• Windows: Shift + G

Show and hide individual layout grids

You can show or hide individual layout grids in the design panel.

1. 1.Select the frame that has a layout grid added.
2. 2.Find the layout grid modal in the design panel.
3. 3.Click / to hide or show the corresponding layout grid.

Layout grid styles

Layout grids can be created as styles for reuse in design.

Create grid styles

1. 1.Select the layer for which you want to create a style.
2. 2.In the design panel, click icon next to the layout grid to open Grid styles.
3. 3.Click in the upper right corner of the Grid styles.

1. 4.In the popup for creating a style, enter the name of the style and click Create style.

Use grid styles

1. 1.Select the layer where you want to use the style.
2. 2.In the design panel, click icon next to the Layout grid modal to open Grid styles.
3. 3.In the Grid styles, you can see local styles and styles from the referenced libraries.
4. 4.Select the style you want to use to apply it to the layer.

Layout grids and constraints

When a layout grid is added to a frame, the constraints of the inner layers may be affected by the layout grid.

When horizontal direction constraints are left, right, left & right, or center, the constraint will refer to the nearest column.

When vertical direction constraints are top, bottom, top & bottom, or center, the constraint will refer to the nearest row.

Learn more about combining grids and constraints.