Figma中最核心的功能之一 —— 自动布局 Autolayout，是实现元素布局自动化的功能，可以极大的提高UI界面设计的效率和灵活性。

它的主要作用：

1. 快速调节并列元素的排列方向和间距
2. 让上下级元素的尺寸根据一定的规则自动适配

自动布局得应用逻辑

创建一个用于管理下级图层排列和适配的自动布局编组，然后通过对该编组或下级图层的布局属性进行设置来实现想要的效果。

这里面有三个关键因素，分别是：

1. 自动布局图层
2. 自动布局图层布局设置
3. 下级图层的布局设置

自动布局编组层是创建自动布局后一定会生成的图层，可以把它当成是一个特殊的 Frame编组对待。

自动布局图层选中后有专属的布局设置面板，它替换了Frame图层的 Layout面板。

自动布局的下级图层也会增加布局设置，只是不太显眼，在宽度和高度输入框中进行展开才能看见。

自动布局功能的应用，就是在创建布局后选中指定的图层，再完成对它们的设置，实现想要的布局效果。

自动布局的创建

创建自动布局 Auto layout 可以在选中图层后右键创建，也可以选中多图层后在属性Layout面板的右上角点击创建按钮。

如果多元素在画布中没有包含关系（一个大的矢量图层完整包含其它元素），那么就会额外在上级创建一个自动布局编组。

如果多元素在画布中有包含关系，且是一个大的矢量图形包含了其它图层，那么创建自动布局时就会将这个矢量图层转变为上级的自动布局编组。

需要注意的是，如果选中一个包含多个子元素的一般编组 Group也可以启动自动布局，自动布局会移除一般编组生成自动布局编组，然后对这些下级元素进行布局排列。

自动布局编组是 Frame的变体，它具备Frame的“实体”特性，属性中除了Layout变成Auto layout 层以外，其它属性设置完全一致，可以独立添加填充、描边等样式。

自动布局的基本设置

选中自动布局编组，就可以在自动布局属性面板内做出设置，先认识面板：

1.子元素排列方向

子元素排列方向即控制布局层包含的下一级内容的排列顺序，从第二个选项开始分别是垂直排列、水平排列、网格排列三种。第一个选项 Freeform本质上是解除自动布局把自动布局层切换回一般 Frame。

选中水平排列后右侧会有个换行图标，点击后让下级元素实现自动换行的效果。

选中网格排列时，它需要完成对网格的设置才能生效，所以下方设置会有较大的变化。

2.布局尺寸设置

在创建自动布局后，布局编组的长宽属性就有了下拉选项，分别是：

• Fixed width/height：固定宽度/高度数值
• Hug contents：包围内容，自动布局层的尺寸根据内容的大小自适应
• Add min witdth/height：应用Hug模式下，最小宽和高
• Add max witdth/height，应用Hug模式下，最小宽和高

3.子元素间距

子元素排列除了方向外，还需要控制子元素之间的间距。间距的设置可以为正数也可以为负数。

间距除了设置具体参数外，也可以在下拉选项内选择 Auto，那么子元素会忽略间距实现自动排列，如果只有两个元素则排列在方向的两极，每增加一个元素则形成均分的布局。

4.子元素对齐设置

对齐设置即子元素在布局区域内的对齐方向，包含上/下/左/右、左上/右上/左下/右下、正中等九种模式。

旁边的图标可以展开更多的设置，包含：

• Strokes：设置布局中子元素的尺寸大小是否包含描边
• Canvas stacking：子元素相互叠加是正向还是反向
• Align text baseline：文字是否要基于基线对齐而不是文本区域（基线概念要单独去认识）

5.布局内间距设置

用于设置自动布局内间距的大小，即子元素距离布局四周边缘的数值。可以快速设置上下、左右数值，也可以每个方向独立设置。

自动布局的应用实例

场景1：创建可以控制编组之间间距的列表。

1. 完成列表的设计并做好编组（每个对象一个编组）
2. 选中它们添加自动布局
3. 设置元素的排列方向和间距

场景2：创建一个会随文字数量自动适配宽度的按钮。

1. 完成按钮设计（背景矩形大于文本区域）
2. 选中它们创建自动布局
3. 将自动布局层宽度设置为 hug，并设置左右间距

场景3：创建一个修改父级图层下级文本会自动适配的弹窗。

1. 完成弹窗的设计（背景矩形大于文本区域）
2. 选中它们创建自动布局
3. 选中下级文本的宽度设置为 Fill Container