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'](https://static.motiffcontent.com/public/resource/cms/image/ts7knedft.svg) - **AI Layout** - **AI builds temporary structure**. * Use the shortcut key: ⇧ Shift + S :::wk-block{.note} 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'](https://static.motiffcontent.com/public/resource/cms/image/q1s7wlzbx.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'](https://static.motiffcontent.com/public/resource/cms/image/pasibpnzp.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'](https://motiff.fbcontent.cn/public/resource/cms/image/5erc12di3.svg) : Frames with auto layout properties added by AI. * !['AI-frame.svg'](https://motiff.fbcontent.cn/public/resource/cms/image/1pflarzl4.svg) : Frames created by AI. * !['AI-group.svg'](https://motiff.fbcontent.cn/public/resource/cms/image/kmtpm42l8.svg) : Groups created by AI. :::wk-block{.note} 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 text structure](https://static.motiffcontent.com/public/resource/cms/video/fa0baeee-023f-4855-a7be-1bde782343bb.mp4) ### 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. :::wk-block{.note} 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. ::: ![Adjust spacing](https://static.motiffcontent.com/public/resource/cms/video/8a56352b-1167-4202-83a2-29338d5e2073.mp4) ### Quick copy **AI builds temporary structure** allows you to quickly copy content without manually adjusting the position of other layers in the canvas. ![Quick copy](https://static.motiffcontent.com/public/resource/cms/video/5ebcd36d-72f8-4542-8d55-ba30df01ba95.mp4) ### 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. ![Reorder layers](https://static.motiffcontent.com/public/resource/cms/video/c459a501-0743-43b7-94e2-92c6498424cb.mp4) ## 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'](https://static.motiffcontent.com/public/resource/cms/image/m26ih2nsp.svg) next to the frame and select **Done**. * Use the shortcut key: ⇧ Shift + S ![Exit directly](https://static.motiffcontent.com/public/resource/cms/video/bd46c545-ce78-42fc-88a6-fd8bf3ea08e0.mp4) ### 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'](https://static.motiffcontent.com/public/resource/cms/image/m26ih2nsp.svg) in the toolbar and select **Save auto layout**. ![Save auto layout](https://static.motiffcontent.com/public/resource/cms/video/07a1697d-d81f-4d91-82b5-1e61179e547e.mp4) :::wk-block{.tip} 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. ![AI adds auto layout](https://static.motiffcontent.com/public/resource/cms/video/0dcbaae1-1c35-4733-9e46-1002c9c007cc.mp4) After selecting the layer, you can directly exit AI Layout by: * Click !['24_Toolbar_AIseacted.svg'](https://static.motiffcontent.com/public/resource/cms/image/qvoa2bwfb.svg) - **AI Layout** - **AI adds auto layout** in the toolbar. * Use the shortcut key: ⇧ Shift + ⌘ Command + S