本文视频版教程

01 自动布局的价值

传统软件

在传统的设计软件中，对于有着一定关系或者同一类型的元素，我们通常会把它们添加为一个「组」来便于管理。

比如这个常规的卡片设计，有图片、文字、按钮和背景色。添加成一个「组」之后，我们可以随意移动，删除和复制它。

但是其实设计师在设计这个卡片的时候，已经给定了这个卡片一些排版规则，比如：元素之间的间距是 12px，它们距离边距分别是 14px 和 16px。另外还有这个卡片在更大画布中的相对位置，我们设计师也会定义一套规则。

但是「组」本身是不会记录这些规则信息的，比如现在拉高这个按钮，根据之前定义的设计规范，我们期望卡片背景也需要向下拓展，来保持和按钮的下边距还是 16px。在其他设计软件中，做了类似这样的设计修改之后，设计师都需要根据这个卡片的设计规则再去更新一下这个「组」内的元素，非常的繁琐。

自动布局

这里说的规则就是自动布局解决的问题，自动布局本质上就是一个「记录规则的智能组」。同样去加高这个按钮，可以看到这个卡片背景实时的保持和按钮下边距为 16px。所以自动布局是具有响应性的，当其中的元素增加、删除、修改或者整个自动布局的大小改变后，它依然可以按照正确的规则去重新组织内部的元素。

在项目的交付中，这对于产品设计的规范、团队的协作、组件的管理、避免重复性劳动都用着很大的帮助。

02 创建一个自动布局

在选中需要的元素后有三种方式来创建一个自动布局：

1. 快捷键 Shift ⇧ + A。

2. 右键后选择菜单中的「Add auto layout」。

3. 在右侧工具区的「Auto layout」中点击「+」。

03 自动布局操作区

排布方向

接下来认识一下自动布局操作区（Auto layout）的一些功能。

在左上角的第一个功能是「排布方向」。有横、纵两个方向的箭头，可以点击来指示元素自动排布的方向。

元素间距

在左侧第二个功能是元素间距，有三种方式来调整：

1. 将鼠标放到自动布局的元素中间，出现指示符号后，直接拖动间距。

2. 按住键盘 ⌘ 后，在工具栏的数字区直接拖动，也可以调整间距。

3. 直接在工具栏的数字区键盘输入具体间距数值。

边距

在工具区的最下面是自动布局的边距，和之前一样，也有三种方式来调整：

1. 将鼠标放到自动布局的四周，出现指示符号后，直接拖动边距。

2. 按住键盘 ⌘ 后，在工具栏的数字区直接拖动，也可以调整边距。

3. 直接在工具栏的数字区键盘输入具体边距数值。

边距在默认状态下，分为左右边距和上下边距。如果有需要，也可以点击右侧的正方形按钮，来进一步分别设置上下左右不同的边距。

背景色

在传统的设计软件中，在需要背景色的时候，设计师通常会单独画一个背景的色块，并且和内部的元素变成一个「组」。

在自动布局中，可以点击「Fill」工具区的「+」，来填充一个背景色。而这个背景色并不是一个单独的元素，而是自动布局自身的一个属性。所以它会遵照定义的边距规则，不管内部元素如何变化，都去自动适配包裹。所以在自动布局里，设计师只需要关注子元素的关系，而不用一直调整背景的尺寸。这就是用自动布局的边距创建背景的价值。

04 自动布局的填充方式

在之前的案例中，子元素之间的间距加上定义的边距，就组成了最基本的自动布局方式了。用这个方法可以做出最常规的一个警示消息，无论警示文本内容有多少，它都可以自动适应宽度。

填充方式-Hug

那如果这个网站的设计规范里警示的警示框是统一的固定宽度的怎么办？现在来认识一下：填充方式。

在宽度和高度数据下方，分别是这个自动布局的横、纵的填充方式。可以看到这里是 Hug，就是包裹的意思，包裹的是子元素组+边距，这种状态下的宽度和高度的数字是只读状态，因为这是加法计算出来的，不是输入的。

比如现在这个警示框的 436px 宽度就是子元素组的 388px + 两边 24px 边距算出来的。

填充方式-Fixed

点开填充方式之后还可以看到一个选项 Fixed，固定。选择之后可以看到宽度的数字被点亮了，可以输入数字来直接定义自动布局的宽度了。比如设置 500px，自动布局就会去额外添加一个自由宽度区域（蓝色区域），来满足设置的宽度。

填充方式-Fill

那在这种状态下，字数的多少不会再改变整个弹框的宽度了。那如果字数过多，其实这时候我们期望的是文本可以自动换行。这个时候就需要去设置子元素的填充方式。

选中文字框，它的的宽度填充方式是 Hug（包裹），就是说文本框的大小会自动包裹字符串的长度。点开选项，可以看到除了 Hug 和 Fixed，还多了一个Fill container，填充容器。对于文本来说，这个绿色的背景就是它的容器。在宽度上设置填充容器，文本框就会自动在横向上填充容器。这时候去改变容器的宽度，文字框也会自动去适应这个变化。

多层填充方式

可以看到我们现在已经满足我们的需求了，一个固定宽度的警示弹窗，并且在警示字数过多，自动换行。

这个只是一组母子关系的填充方式，在实际应用中，多层的母子填充关系可以实现更加复杂的效果。

现在把这个警示弹窗放到更大的环境中，比如一个网站中。这时候警示框就变成了整个网站的子元素，而网站变成了警示框的容器。那是不是也可以让警示框去充满容器，就是网站呢？选中警示框，可以看到在填充方式那里，它也有了 Fill container的选项。

而警示框和其中的文字框的父子关系还是存在的，所以当通过改变网站宽度来改变警示框的时候，文字框也是会跟着变化。

实际应用

使用类似这种多层的自动布局嵌套，可以做设计出很多非常方便的组件。

比如这个进度条，不需要单独拉长蓝色区域，再移动小圆点。合理的设置元素之间的填充方式之后，可以一起选中去拖动进度条，修改起来非常方便。

比如一开始设计的卡片，设置合理填充方式后，可以随意的去改变它的大小，卡片都可以自动的去维持你设置的规则。

再比如这个卡片，设置好合理的填充关系之后，可以让这个蓝色的 label 跟随文字的高度来自动变化适应。

或者制作一个自适应的表格模板，可以自动适应各种大小。

还有这种自适应的表格，你可以复制后应用到产品任何需要表格的地方，只需要改一些文本和数字就可以使用了。

一个设置合理的自动布局组件，可以帮助设计师节约大量重复性的工作。但是如果这个表格复制了很多次之后，设计师要如何统一管理它们呢？

05 组件

创建

在产品设计中，有很多的元素是会被大量重复使用，在多次复制和多人协作的场景下，统一去管理就变的非常重要，这也就是组件的价值。

选中你需要创建组件的元素后，有三种方式来创建一个组件：

1. 快捷键 command ⌘ + option ⌥ + K。

2. 右键后选择菜单中的「Create component」。

3. 在顶部菜单栏点击第一个「四空心菱形」按钮。

识别子母组件

创建好组件之后，可以看到这个表单的选中框和左侧图层界面变成了紫色，这代表它是一个组件。

直接创建的组件均为母组件，特征是选中后顶部会有「四实心菱形」，并且在左侧的图层区域它也显示为「四实心菱形」。从它复制出来的就都是子组件了，可以看到子组件选中后只有一圈紫线，并且在左侧图层区，它显示的是「空心菱形」。

子母组件关系

子组件会继承绝大多数的母组件的特性，比如颜色，或者元素数量。同时子组件也可以修改自己的部分特征，比如修改文字信息、减少一些元素，或者单独对子组件中的元素改颜色。

子组件重置

子组件进行了很多修改之后，想要恢复默认，有两种方法：

1. 右键后选择菜单中的「Reset all changes」。

2. 在右侧组件操作区先点击三个小点，然后点击「Reset all changes」。

一个合理设置的自动布局再配合组件的管理，就可以让设计团队只设计组件一遍后，应用在产品的各个地方，同时可以轻松的统一修改。

06 可变组件

创建

使用子组件的时候，有时我们会发现子组件有限的修改权限不能满足设计需求。

比如这个按钮，设计成组件一直用的挺好的，但是在特定页面发现需要一个小的按钮。这时候可以选择解除子组件和母组件的联系，还是点击组件的操作区的三个小点，选择「Detach instance」。就可以自由修改之前的子组件了，比如把它变成一个小按钮。

又或者按照刚才的需求新设计一个小按钮，也把它变成一个母组件。之后所有的小按钮，都可以调用它了。但是同样都是按钮只是大小不同，能不能统一管理呢？

现在有两个按钮的母组件，我们全部选中，可以在右侧组件操作区，看到一个按钮，「Combine as variants」。这样就创建了一个可变组件。可变组件和普通的组件一样，也可以复制出子组件，而且子组件可以自由的切换母组件组中的任何一个。

在子组件的组件的操作区里，点击「Property」之后我们就可以切换按钮的不同样式了。

逻辑语句

另一个很常见的使用场景是，可切换的开关。我们可以将两个不同状态的开关变成一个可变组件，然后在组件里轻松切换。

这里的切换为什么不是之前的下拉框了呢，是因为在起名的时候，我分别给它们命名了「No」和「Yes」，同样的还有「True」和「False」，Figma 会自动把这种逻辑语句转换为开关来更方便的切换。

多条件可变组件

其他的应用比如包含各种状态的警示弹窗。每一行代表了不同状态，而每一列代表了前后是否有 icon。所以需要创建三个筛选条件，一个是弹窗状态，第二个是否有前 icon，第三个是否有后 icon。

选中可变组件，在 Property 工具区点击「+」，然后选择「Variant」，这个条件可以起名叫「前icon」，然后我们具体选中每个组件去编写「前icon」的结果是「Yes」还是「No」。「后icon」的条件也是同样的创建。

「是否显示」筛选

像是是否有前后icon，其实就是一种「是否显示」的特殊判断条件，他的结果固定为「是」和「否」两种。

在秋季 Figma 的一次大更新之后，为了实现刚才的效果，我们其实也有更加简单的方法。在添加筛选条件的时候，可以选择「Boolean」， 我们可以理解为这是一个「是否显示」的快捷筛选。同样的给这个筛选条件起名叫「前 icon」。接下来我们需要告诉 FIgma 这个叫「前 icon」的「是否显示」筛选要作用在哪里。

选中警示框中的前 icon，然后在 Layer功能区可以看到一个菱形按钮点击之后选中「前 icon」，应用刚才的「是否显示」筛选条件。

这个时候，Figma 就知道了这个icon有显示和不显示两种状态，而你不需要单独在出三个不显示 icon 的图。同样的去创建一个叫「后 icon」的「是否显示」筛选，然后选中后 icon 点击菱形按钮选中「后 icon」。最终这种方法制作的可变组件只用了3个元素就实现了之前 12 个元素的可变组件的效果。

实际应用

通过添加更多的筛选条件，我们就可以维护一个更加丰富的可变按钮组，不同颜色、不同状态、不同级别。一个子组件就可以通过切换随意变成上面的任何一个按钮。

比如一个多功能的输入框，可以切换输入状态，警示状态，和是否有icon。制作好之后可以适用在产品的各种场景中。

07 可变组件和原型

接下来我们来看可变组件在一个订机票的网站的应用。

首先将座位按照等级和状态两种筛选条件来做出一个可变组件。等级分别是economy、business，状态有available，hover，selected，unavailable。设置好之后，我们就可以在网站中选到任意的座位，通过等级和状态去切换他的效果。

在可变组件这里，我设置了一个叫做「Hover」的状态，是希望用户在使用的时候，鼠标悬浮在这个座位上时按钮会有提示。

这里就要说到可变组件的第二大优势了：可变组件的母组件组内部定义的交互，会被每一个子组件跟随。

现在切换到原型制作模式，将按钮之间添加交互线，如何制作原型不是本文的重点，细节不再赘述。

设置好之后，我们来播放这个页面的原型。可以看到我们刚才在母组件里设置的交互逻辑，子组件全部都集成过来了。所以可变组件除了可以统一管理相似的组件，另外在需要制作原型的项目中，会非常的方便去批量的做一些交互。

原型地址

其实关于这块原型的制作不是本文的重点，主要是想强调可变组件在原型制作中的高效率。

Figma 的原型制作效果也非常不错，感兴趣的可以留言，有机会可以和大家聊聊原型制作。