从 PS 到 Sketch 让UI设计师有了专属的界面设计软件，再到 Figma 的出现，让设计效率进一步提升。根据UXTool的2021年设计工具调查报告来看，Figma从问世以来短时间内便将Sketch甩在了身后，成为UI设计师最常用的设计工具。

今天主要说下Figma的一个重要功能——自动布局，可以说掌握了自动布局能让设计效率大大提升，配合组件功能让设计起飞~

什么是自动布局

简单来说自动布局可以让你创建动态的内容框架，当改变框架或内容元素的时候彼此适应变化。

如何创建自动布局

创建自动布局有3种方式

1、通过快捷键：Shift + A

2、通过鼠标右键快捷菜单里“添加自动布局”

3、选中多个元素后通过右侧边栏里自动布局的“+”创建自动布局

自动布局功能说明

1. 元素排列

元素排列是自动布局最基本的功能，当我们对多个元素创建自动布局时，会对这些元素进行横向或纵向的等距排列，可以通过右侧边栏进行方向或者间距的调整。当我们在设计Tab栏、内容卡片等多元素排列时方便很多。

2. 框架嵌套

在我们创建自动布局时，相当于给指定元素套了一个框架，可以通过改变上下左右的边距来调整框架的大小，在我们设计按钮以及内容卡片时会很有帮助。

通过框架嵌套，调整合适的边距并为框架添加一定的圆角，一个适应文字宽度的按钮就做好了，是不是很简单呢~

* 小技巧

我们在设计时有时候按钮的文字过短会导致按钮不易点击且不美观，那我们需要给按钮设置一个最小宽度，那么通过自动布局来如何实现呢？这里便用到了透明图形。我们通过在按钮框架内嵌套一个透明度为0%的透明图形，用它来控制按钮的最小宽度，这样当文字宽度小于该图形时，按钮不会继续变短，而当文字宽度大于该图形时，按钮便会跟随文字宽度而变化。当然这只是一个取巧的办法，如果有更好的方法欢迎大家指点一二。

有时候我们为凸显标题会为标题文字下面添加色彩图形，但由于早期Figma的自动布局最小间距只能为0，所以无法做到跟随变化，现在间距可以设为负值，便有了实现的方法。但在设计中发现，通过直接创建自动布局，间距设为负值会导致色彩图形显示于文字上方，可能是一个Bug，因此另辟蹊径，首先创一个与标题等高的画框，将色彩图形置于画框底部，约束设为左右拉伸，再给标题和刚创建的画框建立自动布局，间距设为负值使其对齐，最终实现了想要的效果。

3. 对齐方式

通过对齐方式的设置可以使自动布局框架内的元素按照我们指定的方向对齐，这样在改变框架尺寸时不会发生位置的偏移问题。

4. 文本对齐

由于Figma早期自动布局对齐方式都是根据元素尺寸对齐的，小伙伴们在对不同尺寸文字对齐时是不是都会用到肉眼大法呢，现在我们可以通过高级布局设置里的基于文本基线对齐功能进行文字的对齐，一键搞定，是不是很方便呢！而且它还支持图形、文字和框架内文字基于文本基线进行对齐。

5. 嵌套方式

嵌套方式简单来说就是自动布局框架及框架内元素的协同方式，或者说是所建立的父子关系的设定吧~通过对嵌套方式的设置便可以实现一些复杂的结构变化。

固定高度：框架或框架内元素的变化时独立的，不会影响到彼此，就是父亲和儿子各干各的，互不干涉。

适应内容：框架会跟随框架内元素的变化而变化，就是父亲听儿子的。

填充容器：框架内元素会跟随框架的变化而变化，就是儿子听父亲的。

6. 约束

通过对约束的设置可以控制自动布局框架在内容变化时的变化方向。

在约束设置里还有一个滚动时保持固定的设置，或许很多小伙伴都没有用过，点了也没有反应啊，其实它是针对页面在演示模式时使用，通过设置滚动时保持固定可以让指定元素在演示时不跟随页面滚动，保持固定位置，比如导航栏、底部标签栏、悬浮操作按钮等。

7. 文本截断

当我们在设计文本展示限制进行内容填充时是不是要手动删除再输入“…”呢，现在他来了，通过对文本高级设置里的调整大小进行截断设置，可以在我们任意填充内容时根据尺寸自动进行截断设置，需要注意在设置文本截断时需要先将文本嵌套方式设为固定宽度（Fix）或者填充容器（Fill）。

8. 间距模式

间距模式分为堆叠和等距两种模式

堆叠模式：就是框架内的元素按照指定的间距进行布局，当框架尺寸改变时不跟随变化

等距模式：元素在框架内按照指定的边距进行等距排列，此时间距为自动模式，当框架尺寸改变时跟随变化

9. 画布堆叠

画布堆叠是控制多个元素的堆叠模式，前提便是上面提到的多个元素按堆叠模式布局。分为首在顶部和尾在顶部，对于我们在做头像或卡片彼此堆叠时不用再一个个的调整排序了。

10. 绝对定位

这又是当初UI设计师的一个痛点啊，可以说Figma是相当了解用户。通过绝对定位我们可以通过对自动布局框架内的指定元素进行单独布局，该元素会根据约束方向跟随框架变化而变化。在我们设计未读消息的红点提示时会非常有用。

Figma强大的自动布局功能给UI设计师带来了很多方便，大大提升了工作效率，但还是有一些些遗憾，比如无法限制图片的宽高比例，在做一些卡片设计时，调整卡片的尺寸就要重新编辑封面图的比例，希望后面会有让人惊喜的优化~