Auto layout

How to use auto layout

Auto layout is a powerful tool in Motiff. You can use Auto layout to complete your design work efficiently.

There are many common design scenarios where auto layout can be used, such as:

• Buttons that change responsively with text content.
• Lists that can adaptively add, delete, and duplicate items.
• Create responsive interfaces by nesting auto layout frames.

For auto layout, the following features cannot be used simultaneously:

🚫 Constraints cannot be applied to the child layers of an auto layout frame, unless the layers have absolute position enabled. Learn more about Constraints.

🚫 Smart selection cannot be used on the child layers of an auto layout frame.

Operate auto layout

Add auto layout

Auto layout is a property of a frame. Learn more about Frame.

You can add auto layout to a frame, components, or other selected layers. This includes:

• Frame
• Components or component sets
• Groups or selected layers

There are three ways to add auto layout to a selected frame or layer:

• While selecting a frame, click next to the auto layout in the right sidebar.
• Right-click the layer and select Add auto layout.
• Select the layer and use the shortcut keys: Shift + A .

Add/edit/remove child layers

Add child layers

Any layer can be added to the auto layout.

1. 1.Drag the layer into an auto layout frame.
2. 2.Use the blue indicator to choose where to place the layer.

Duplicate child layers

In auto layout, you can duplicate child layers. Motiff will automatically add a copy to the right (for horizontal arrangement) or below (for vertical arrangement) of the original layer:

1. 1.Select the child layer in the auto layout.
2. 2.Use the shortcuts to copy:
   • macOS: ⌘ Command + D
   • Windows: Ctrl + D

Adjust child layers order

You can change the order of child layers in auto layout:

1. 1.Select the child layer in the auto layout.
2. 2.The following methods can reorder the child layers:
   • Use the arrow keys on the keyboard to move the child layer to a new position.
   • Drag the child layer to a new position.

Remove child layers

You can delete child layers from the auto layout frame in the following three ways:

• Delete: Select the child layer and use Delete or Backspace key.
• Hide: Click to hide the layer.
• Remove: Select the child layer and drag it out of the auto layout frame.

Delete auto layout

You can delete auto layout, and the auto layout frame will revert to a regular frame.

There are three ways to delete auto layout:

• Select the auto layout frame and click next to the auto layout in the right sidebar.

• Right-click the auto layout frame and choose to delete auto layout.

• Select the auto layout frame and use the shortcut keys:

  • macOS: ⌥ Option + ⇧ Shift + A
  • Windows: Alt + Shift + A

Basic properties of auto layout

Direction

Direction refers to the arrangement direction of child layers within the auto layout frame.

• Vertical: Arrange child layers along the y-axis. This can be used to create lists, timeline, etc.
• Horizontal: Arrange child layers along the x-axis. This can be used in scenarios like a navigation menu.
• Wrap: Arrange child layers in multiple rows. Child layers will flow horizontally and wrap to the next line automatically.

Each auto layout can only set one direction. If you want to build multiple directions, nesting is required.

Spacing

You can adjust the arrangement of child layer spacing within the frame by setting the spacing type.

• Fixed spacing (Default setting): The spacing between child layers is a fixed value. No matter how the frame size changes, the spacing between child layers remains a fixed value. You can set the fixed value of spacing in the canvas or from the right sidebar.
• Auto spacing: The spacing between child layers becomes as large as possible to fill the remaining space inside the frame, under the premise of retaining paddings. You can set the spacing to Auto by choosing from the dropdown menu, typing in the word auto, or clearing all values in the spacing input box.

Adjust spacing in the canvas area

The following methods can adjust the spacing of auto layout in the canvas area:

• Select the auto layout frame and hover the mouse over it. When the pink handles appear, drag the handles to adjust the spacing size.
• Select the auto layout frame, click the spacing area, and enter the spacing value in the input box.

Adjust spacing in the right sidebar

The following methods can adjust the spacing of auto layout in the right sidebar:

• Enter the value directly.
• Use the arrow keys in the input box to adjust the value.
• Hold the icon in the input box or hold ⌥ Option and drag back and forth.

When the auto layout frame’s direction is set to Vertical or Horizontal, you can set the horizontal and vertical gap between items respectively. When the frame’s direction set to Wrap, then you can set both horizontal and vertical gap between items.

Padding

Padding refers to the distance between the boundaries of the auto layout frame and its child layers.

You can set the padding uniformly in the vertical or horizontal direction or have different values for the top, bottom, left, and right padding separately.

Padding can be adjusted through the canvas or the right sidebar.

Adjust padding in the canvas area

The following methods can adjust the auto layout's padding in the canvas area:

• Select the auto layout frame and hover the mouse over it. When the pink handles appear, drag the handles to adjust the padding size.
• Select the auto layout frame, click the padding area, and enter a numeric value in the input box to set the padding size.

The following shortcuts can be used to adjust multiple paddings simultaneously:

Adjust padding in the right sidebar

In the right sidebar, you can adjust the vertical (top and bottom) and horizontal (left and right) paddings separately.

If you want to set different paddings for all sides, click in the right sidebar and set different numeric values for the paddings of each side.

Alignment

You can set the alignment of child layers on the auto layout frame, but you cannot control the alignment of individual child layers individually.

The direction and spacing type of the auto layout frame determines the alignment options you can use.

In the right sidebar, you can adjust the alignment through interactive illustrations.

When the gap between items is set to Auto, you have only three alignment options for each direction:

• Horizontal auto layout: top, center, bottom.
• Vertical auto layout: left, center, right.

Resize auto layout frame

The auto layout frame can responsively resize based on the size/number of child layers. Child layers can also responsively resize based on the size change of the frame.

You can control how the frame and child layers adjust their size through response types.

Adjust response types in the design panel in the right sidebar. There are three types of response: Hug contents, Fill frame, and Fixed. The response types for width and height needs to be set separately.

Hug contents: You can set the auto layout frame to Hug contents. After setting, the size of the frame will change according to the number/size of child layers. Under the premise of retaining spacing and padding, the frame will minimize its size to wrap around the child layers.

Fill Frame: You can set the auto layout child layer to Fill frame. After setting, the size of the child layer will change according to the size of the frame. Under the premise of retaining spacing and paddings, the child layer will stretch to fill the remaining space inside the frame.

Fixed: You can set the auto layout frame or auto layout child layer to Fixed. After setting, the layer will no longer responsively adjust its size based on the frame or based on the changes in child layers.

Minimum and maximum dimensions

You can set minimum or maximum width and height to any auto layout frame and its child layers.

• Click to open the Width dropdown menu. Select Add min width… or Add max width…. Enter a value in the field to set the minimum or maximum width.
• Click to open the Height dropdown menu. Select Add min height… or Add max height…. Enter a value in the field to set the minimum or maximum height.

If a layer contains a min or max setting, its width or height icon will have two lines that are positioned on either side. You can hover over these icons to preview the limits on canvas.

To remove a min or max setting, open the Width or Height dropdown and choose Remove min/max width/height.

Advanced properties of auto layout

Canvas stacking

The covering method for overlapping layers can switch the order of child layers when they overlap.

When multiple child layers overlap, the one arranged after is on top by default.

You can change the visual order of the overlaps that are visible on the canvas.

After selecting the auto layout frame, click to open more settings and make a selection:

• First on top: The child layer arranged in front within the auto layout frame is on top.
• Last on top: The child layer arranged behind within the auto layout frame is on top.

Align text baseline

Setting text baseline alignment can adjust the alignment relationship between text and other text or text and other layers.

When content is arranged horizontally, the alignment options support selecting Text baseline alignment.

Next to the alignment options, you can click to open more settings and click next to text baseline alignment to enable baseline alignment.

Absolute position

Absolute position allows child layers to be precisely placed on their parent layer without being controlled by auto layout rules, while still staying inside the auto layout frame in the layer list.

To enable absolute position, select the child layer of the auto layout frame, then click in the right sidebar.

Complex applications of auto layout

The operation of auto layout is convenient, but its powerful feature goes far beyond that. You can explore the complex applications of auto layout through the following usage scenarios.

Auto layout and constraints

You cannot apply constraints to child layers of an auto layout frame unless that object has enabled absolute position. Instead, you can use response types to define how layers respond to frame resizing.

Nesting in auto layout

You can nest a horizontal auto layout within a vertical auto layout to build more complex responsive interfaces.

In the example, a responsive card is made through a three-layer auto layout nesting structure:

• The first level: User ID and description are a vertically nested auto layout.
• The second level: User information and user avatar are a horizontally nested auto layout.
• The third level: User profile, texts, and images are a vertically nested auto layout.

You can nest auto layout in the following ways:

• Drag an auto layout frame into an existing auto layout frame.
• Create a new auto layout frame around the selected auto layout frame (and other layers).

Auto layout in components

Components themselves are frames, and you can add auto layout to components.

You cannot add multiple auto layouts by selecting multiple components. Instead, you need to select each frame and add auto layout separately.

The following table shows the features of auto layout in terms of components and instances: