Auto Layout¶
Figma中最核心的功能之一 —— 自动布局 Autolayout，是**定义多个元素之间布局关系的功能**。可以通过特定的图层编组、层级、设置来实现复杂的布局功能，并可以实现内容的快速调整和适应，大幅度提升设计的效率。
启动自动布局需要在布局面板中的 Auto layout 属性栏中打开，需要选择多个元素才可以启动。
自动布局的创建¶
多个元素可以是一般矢量图层，也可以是文字、不同编组。需要注意的是，如果选中一个包含多个子元素的一般编组也可以启动自动布局，自动布局会移除一般编组生成自动布局编组，然后对这些下级元素进行布局排列。
自动布局的应用主要包含两种模式：包含和并列。
包含即创建一个较大的矢量矩形，其它元素置于矩形内，一起选中它们后创建自动布局。应用最多的就是创建按钮，先添加一个较大的矩形，再添加一个小于矩形的文本，就能创建一个使用自动布局的按钮。
并列则是使用多个同级的元素进行布局，里面没有元素完全包含其它元素，如创建头像列表、横向卡片列表等。
自动布局创建后包含两部分内容，理解它们是掌握自动布局使用的关键：
- 布局编组层
- 布局子图层
自动布局编组层的认识¶
自动布局的编组层 和一般编组 Group 有较大的差异，一般编组只是一个虚拟对象，用于选择多个下级图层进行批量处理，编组层本身不能添加样式（详见前文）。
而自动布局本质上是创建了一个拥有特殊布局能力的画板 Frame，它具有和Frame相同的样式定义功能，可以单独为它添加色彩、描边、圆角、阴影等。
要注意的是，自动布局编组层和画板Frame的编组层都是 —— 矩形的背景，它的样式位于整个编组的最下方。
自动布局的基本设置¶
创建自动布局后，就可以在属性面板内对布局编组进行设置，首先了解面板内的属性：
1.布局尺寸设置¶
在创建自动布局后，布局编组的长宽属性就有了下拉选项，分别是：
- Fixed width/height，固定宽度/高度数值
- Hug contents，包围内容，背景根据内容的尺寸自适应
- Add min witdth/height，应用自适应，并设置支持的最小宽/高
- Add ma’x witdth/height，应用自适应，并设置支持的最大宽度/高度
2.子元素排列方向¶
子元素排列方向即控制布局层包含的下一级内容的排列顺序，包含垂直排列、水平排列、水平排列自动换行三种。
垂直排列vertical layout、水平排列horizontal layout、水平自动换行warp
3.子元素间距¶
子元素排列除了方向外，还需要控制子元素之间的间距。间距的设置可以为正数也可以为负数。
间距除了设置具体参数外，也可以在下拉选项内选择 Auto，那么子元素会忽略间距实现自动排列，如果只有两个元素则排列在方向的两极，每增加一个元素则形成均分的布局。
4.子元素对齐设置¶
对齐设置即子元素在布局区域内的对齐方向，包含上/下/左/右、左上/右上/左下/右下、正中等九种模式。
旁边的图标可以展开更多的设置，包含：
- Strokes：设置布局中子元素的尺寸大小是否包含描边
- Canvas stacking：子元素相互叠加是正向还是反向
- Align text baseline：文字是否要基于基线对齐而不是文本区域（基线概念要单独去认识）
5.布局内间距设置¶
用于设置自动布局内间距的大小，即子元素距离布局四周边缘的数值。可以快速设置上下、左右数值，也可以每个方向独立设置。
自动布局最重要的特性之一，就是自适应的应用。而Figma中的自适应包含下面两个概念：
- 布局编组跟随子元素适应 Hug Contents
- 子元素跟随父级编组适应 Fill Container
布局编组跟随子元素适应，即父级编组的尺寸随子元素的尺寸变动，比如创建一个具有自动布局的标签，标签的矩形宽度随内部的文字长度适应，就是父级对子级的适应。
父级编组宽度 = 子级文本宽度 + 左右间距
在这个模式下，布局编组的宽度是自适应的 Hug Contents，而子元素的宽度是固定的 Fixed。因为当父级宽度为自适应尺寸时，子元素就必须给出具体的数值，才能计算出最终的结果。
而在第二种模式子元素跟随父级编组适应中，则是先为父级元素预设好尺寸，子元素会自动进行填充。比如创建一个新闻卡片，标题、文本的显示空间，会根据父级元素宽度增加而增加。
子文本区域的宽度 = 父级编组宽度 – 左右间距
在这个模式下，布局编组的宽度是预设好的固定尺寸 Fixed，而子元素的宽度则是根据父级元素预留的空间进行填充 Fill Container，也就是父级增加了尺寸和空间，子元素就把多的部分填上。
虽然案例以宽度演示为主，但高度可以实现相同逻辑的应用，要根据组件的需要做决定。有的只需要宽度适应，有的需要高度适应，有得则宽和高都需要适应。
从上面案例可以进一步理解，父级和子级元素必然有一个是固定尺寸 Fixed，而另一个是适应尺寸 Hug 或 Fill，才能实现自适应。同时设置上下级尺寸为 Fixed 则大小不会受另一方影响，且两者不能同时添加自适应模式。
Tips：只有当下级图层也是自动布局编组时，它才能设置Hug模式（实际上是根据下级内容形成最终尺寸，本质上还是 Fixed，后面会再做说明）。
自动布局自适应设置的类型：
父编组 Fixed / 子图层 Fill ：修改父级编组尺寸，子图层根据内容区域自适应调节
父编组 Hug / 子图层 Fixed：修改子图层尺寸，父级编组根据子图层自适应调节
父编组 Fixed / 子图层 Fixed：尺寸相互不影响，没有自适应尺寸的调节
自动布局自适应的逻辑只需要自己多做几次尝试就能理解，在设计过程中只有需要添加自适应的组件才需要设置，无需强行为没有自适应必要的组件添加相关设置。
自动布局中允许添加多个子图层进行并列布局，而应用并列的同时也可以添加自适应的逻辑，实现更灵活的组件控制。
同理，在这种模式下也包含父级适应还是子级填充两种情况，我们分别来拆分它们的应用逻辑。
首先是父级编组随子元素适应，比如创建一个新闻列表中的卡片，卡片内包含标题、简讯、操作三个栏目并列，卡片高度会随内容的高度适应。那么卡片本身的高度设置为 Hug，下级内容为 Fixed 或者 Hug (文本框可用)，则只需要完成内部元素的设计和排列，就能自动适应出最终得卡片高度。
父级编组适应只有它一个对象做自适应，很容易理解。复杂的是子元素适应模式下，多个子元素进行自适应，或采用混合模式进行布局的逻辑。
第一种情况是子元素都要使用自适应模式，比如商品列表、瓷片区等，当父级组件进行宽度调节时，则下方所有的子元素都要自适应调整尺寸。
这种场景下父级编组的宽度使用 Fixed，所有下级元素使用 Fill Container，则父级组件调整宽度时下级元素会自动适应 (会强制使并列的元素宽度相等)。
另一种情况是子元素有的尺寸不变，有的自适应。比如一个顶部标题栏，包含左右两侧的图标和中间的搜索框。因为标题栏可能会应用在不同尺寸的画布中，宽度会变更，但是两侧图标的尺寸是固定的。
所以在这个场景中，左右两侧图标的宽度是 Fixed，而中间搜索栏的宽度是 Fill Container，那么实现的效果如下：
搜索栏使用自适应的宽度计算公式为：
搜索栏宽 = 页面宽 – 左右间距 – 图标宽*图标数
在组件设置中，要先确定两者的适应关系，是父级基于子元素适应，还是子元素基于父级填充。
自动布局处理的是编组层和下级元素的排版关系，下级元素可以是普通编组、矢量图层、图片、文本、组件，也可以是 —— 其它自动布局。
也就是自动布局是可以进行上下嵌套的，而它们也可以实现自适应的效果。
比如做一个横向标签列表，自动布局得宽度为自适应 hug，它下级的每个标签可以由自动布局实现，且每个标签作为自动布局编组的宽度设置也为 hug。
当修改标签内容时，标签本身的宽度会调整，然后就会影响上级编组的宽度。
以及在上一小节中演示的双列商品卡片，左右两个卡片自然也可以使用自动布局。而卡片内下级包含图片和信息两个模块，图片只有一个图层宽度使用Fill即可，而信息模块则包含多个图层，可以继续使用自动布局创建，并将编组的宽度设置为 Fill。
再比如一个完整的动态卡片，包含用户栏、内容栏、操作栏三个栏目，这个卡片的宽度会随场景调节，高度则根据内容适应，那么卡片的自适应编组宽度为 Fixed，高度为Hug。
下级内容中，用户栏宽度会变化，高度固定，所以创建自动布局时宽度基于父级组件为 Fill，高度则为 Fixed。下级的头像、用户名、关注不需要自适应，所以宽和高都为 Fixed。
内容栏中，包含的内容高度不固定，所以创建自动布局时宽度基于父级组件为 Fill，高度根据下级模块的高度自适应 Hug。下级内容的宽度都使用自适应Fill，文本框高度 Hug，图片高度 Fixed (如果有的话)，就能得到如下的结果。
底部栏操作栏和用户栏逻辑一致，那么最终我们实现的动态卡片，就可以根据修改宽度的时候下级内容自动适应，修改动态内容和高度时，整个卡片的高度也会自动调节。
应用这种嵌套的逻辑，我们可以将绝大多数组件自动布局化（有必要的话），方便我们在设计过程中调用并修改尺寸、替换内容。
但因为自动布局嵌套的层级众多，刚上手时容易混乱，所以新手不要在创建第一个编组时就应用自动布局，而是应该先把组件的样式完全设计完成以后，再从下往上创建自动布局，并逐一完成相关设置和功能检查，确保实现预期的效果。