logo
Resources
Table of content
Motiff AI
Interface
Layers and tools
Layer properties
Design systems
Prototypes
Dev Mode
Collaboration
Import and export
File settings
Account
File management
Team management
Sharing and permissions
Billing
Organization
Apps
Work with support
Help Center/Motiff AI/AI Toolbox/AI Layout

AI Layout

AI Layout is a tool that can temporarily structure the design content. You can select AI builds temporary structure or AI adds auto layout.

When you use AI builds temporary structure to adjust layers, AI will help you synchronize the adjustments with other affected layers. For example, the rest of the layers will move down synchronously when the text becomes longer. The order of the list will be adjusted quickly.

When you use AI adds auto layout, AI will help you smartly create automatic layouts for the selected layers, eliminating the need to manually add them one by one.

AI builds temporary structure

You can use the AI Layout - AI builds temporary structure to quickly adjust the layout of any mobile interface.

After selecting the layer on the mobile interface, there are two ways to enter AI Layout - AI builds temporary structure:

  • Click '24_Toolbar_AIseacted.svg' - AI Layout - AI builds temporary structure.
  • Use the shortcut key: ⇧ Shift + S

Note: Motiff currently only supports mobile interfaces.

Scope of effect

After selecting a layer and enabling AI Layout - AI builds temporary structure, Motiff will structure the current interface where this layer is located. As shown in the figure below, after selecting several layers on the page to start building a temporary structure, AI Layout is applicable to the entire interface. 'Scope of effect.png'

Layer panel

After enabling AI builds temporary structure, a dynamic gradient line will appear on the layer panel to represent AI Layout’s scope of effect. 'Layer panel.png'

To structure the layout of the layers, AI will create new frames or groups based on their structural relationships. In addition, AI will add auto layout properties to existing layers.

In the layer panel, thumbnails allow you to find layers affected by AI:

  • 'AI-vertical left.svg' : Frames with auto layout properties added by AI.
  • 'AI-frame.svg' : Frames created by AI.
  • 'AI-group.svg' : Groups created by AI.

Note: AI Layout will not delete the frames and groups you created.

Usage scenarios

Adjust text structure

When modifying text layers, you need to add layout to all other layers as well. AI builds temporary structure allows you to complete these adjustments quickly.

Adjust spacing

When adjusting the spacing between two layers, each layer must be adjusted individually. AI builds temporary structure allows you to quickly adjust the spacings that have the same value.

Note: To adjust the spacing between two layers, you need to select the parent layer of these two layers. When the cursor hovers over the parent layer, a handle will appear. You can adjust the spacing by changing its value or using the auto layout settings in the right sidebar.

Quick copy

AI builds temporary structure allows you to quickly copy content without manually adjusting the position of other layers in the canvas.

Reorder layers

Typically, when adjusting the order of layers, you need to select and move each layer individually to change the order. AI builds temporary structure allows you to quickly adjust the order between layers and avoid the effort to move them one by one.

Remove a temporary structure

Exit directly

By exiting an AI Layout directly, Motiff will revert the design interface to its original state. Meanwhile, any AI-created frames and groups will be removed.

You can directly exit AI Layout by:

  • Click '16_Canvas_AILayout.svg' next to the frame and select Done.
  • Use the shortcut key: ⇧ Shift + S

Save auto layout

Motiff will save the results of AI Layout and you can continue to use these layouts later.

Click '16_Canvas_AILayout.svg' in the toolbar and select Save auto layout.

Tip: If you need to build a temporary structure, you can exit directly after adjustment. If you need the page to be structured for a long time, you can save the result of the AI layout.

AI adds auto layout

AI adds auto layout allows AI to create auto layouts for layers directly.

For example, when you have confirmed a layout proposal after trials, you can use AI adds auto layout to quickly add a layout without going through the tedious process of adding auto layouts layer by layer from inside out.

After selecting the layer, you can directly exit AI Layout by:

  • Click '24_Toolbar_AIseacted.svg' - AI Layout - AI adds auto layout in the toolbar.
  • Use the shortcut key: ⇧ Shift + ⌘ Command + S