Figma Auto layout自動佈局教學2024｜利用Auto layout提升设计效率！｜體驗新版介面 UI3！

Hello 我是凯文 今天我们学习下Figma的招牌功能 自动布局（Auto layout） 因为大部分小伙伴所使用的Figma 已经是最新版的UI3了 所以今天的教程我会以UI3来演示 用几个实例操作 帮助大家快速掌握自动布局 也帮助大家熟悉一下 新版的Figma界面 什么是自动布局 自动布局 用来指定元素之间的间距和排列方式 可以帮助实现组件、页面的响应式设计 可以用到自动布局的地方有很多

比如 实现按钮长度随按钮文字变化而变化 控制页面上组件、模块之间的间距 对设计中的间距应用变量 Variable 好现在我们来实际操作一下 那首先呢，是最基本的一个应用 就是制作按钮 你不再需要文字+背景长方形 的形式来组成一个按钮 你只需要选择文字 然后快捷键 Shift + A 这样呢 就给这个文字添加了一个自动布局 因为自动布局的本质是一个画框(Frame)

所以呢 你只需要给这个画框设置一个颜色 我们来到右侧 Fill(填充) 这里 点击，选择一个颜色 然后呢，在这边 我们来定义一下上下/左右的间距 比如左右两边的间距是24 上下间距设置为8 保持不变 然后来到下边 Appearance（外观） 这里设置圆角 这样呢，一个最基本的按钮就做好了 可以看到 按钮的长度 是随着文字的变化而变化的 那这是因为呢

在这边宽度设置 这里默认设定为 Hug content 意思是内容决定宽度 所以如果我们想要固定宽度的按钮 只需要选择 Fixed width（固定宽度）就可以了 那如果想取消自动布局 我们选择这个按钮 快捷键：Mac系统中 Option+Shift+A Windows 系统 Alt + Shift + A就可以了 那如果忘了呢 也不要紧 我们右键点击 来到这边 Remove auto layout 或者呢，直接来到右边 点击这个小标志

取消自动布局 自动布局还可以帮助我们把多个元素 按照规定的间距、布局组合起来 下面我们来做一个卡片轮番 我们先把卡片中的元素 按照大概的位置摆放好 然后全部选中 Shift + A添加自动布局 然后呢来到这里 调整自动布局画框中元素的间距 我们可以直接在这里填写数值 那还可以点住这边 然后拖拽，来调整大小 那如果元素之间的间距不相等

我们可以再添加一个嵌套的自动布局 比如这里我选中了产品名称和价格 Shift + A 我们就给这两个元素 单独添加了一个自动布局 然后我们再来调整它们之间的间距 下面 我们来给这个卡片添加一个背景颜色 来到右侧填充（Fill），选择一个颜色 下面，我们来快速看一下右边自动布局 这里这些属性都该怎么使用那 首先这里是宽度 我们可以直接修改这个数值

然后右侧下拉箭头，点击 这里呢是布局方式 因为卡片这个组件需要固定宽度 那我们刚才在按钮的案例中已经知道 这里需要选择fixed width 固定值 然后呢，这边高度我们可以选择Hug content 随内容变化 下面的3个箭头用来设置 自动布局中元素的排列方向 这个很好理解 因为卡片中的元素是纵向排列 所以呢我们选择第一个 这边第三个选项 Wrap

是自动换行的意思 可以用在这个案例中 比如这里有多个按钮 你希望它们是横向排列 但是呢 超出的部分会自动转成下一行 就像这样 好的然后呢 这个部分是对齐方式 也很好理解 一共9个选择 目前我们选择的是居中顶对齐（Align top center） 这取决于你的设计 当然你也可以选择左对齐 就像这样 最后呢是边距 你可以给上下边距、 左右边距设定统一的数值

或者可以点击这里 来自定义4个不同的边距 或者呢 你可以在画板上把鼠标放过来 出现这样的标志的时候 你就可以点住鼠标左键 然后快速的调整 那最后呢 我想在卡片的右上角 放一个收藏的标志 我可以直接把它 拖拽到这个自动布局中 可以看到，标志会被居中对齐 因为这是我们之前设置好的对齐方式 那如果想要自由调整自动布局中 某个元素的位置 我们选择这个元素

然后来到这边 点击这里 Ignore auto layout 意思是对这个元素忽略自动布局 然后我们调整好它的位置 我们把做好的卡片横向大致排列一下 然后全选 Shift + A 添加自动布局 这一次呢 我们要选择横向布局 元素间距调整为12 如果你希望在交互原型中 实现横向滑动的效果 就不要忘了把这个画框拉回来 因为只有内容超过画框范围

才能够实现横向滑动 如果希望在轮番中再添加一个卡片 只要点击其中一个元素 Mac: Command + D / Win: Ctrl +D 就可以马上复制一个出来 下面我们来做一个卡片 这个卡片只需要两个元素 一个是文字 一个是按钮 选中两个元素 Shift + A 添加自动布局 来到右边设置边距 我们给上面留一些空间 为了显示背景图片 添加图片 设置圆角 下面呢就是重点

那实际的手机页面宽度可能会变化 所以呢 这个卡片的宽度也会随之变化 那如果我希望这个文字和按钮 两个元素 始终各自靠两边对齐 而不是固定间距 那我就需要来到这里 把这个数值改为 “auto ” 这样的话 当卡片的宽度改变时 这两个元素始终靠在两侧 就可以实现响应式 现在 我们把页面的其他部分都放进屏幕内 Shift + A 添加自动布局

然后调整它们的间距 那对一个页面添加自动布局的好处是 当我需要一个新的模块时 可以直接添加进来 页面各部分保持原有的间距 不需要再手动调整 那如果你想让页面实现响应式 我们可以删除最外侧的手机屏幕画框 直接以这个自动布局作为页面（屏幕） 填充白色，调整边距 勾选 Clip content 隐藏超出屏幕之外的内容 然后呢，依次选中每一个部分

来到右侧宽度 下拉选择 Fill container（填充容器） 这样呢，你的页面就实现了响应式 最后一步 我们还是来到宽度 点击下拉 选择 Add min width 设置最小尺寸320 再次点击选 择 Add max width 设置最大尺寸，可以是480 这样呢，你的屏幕宽度 就被限定在了一个范围之内 那一个比较有趣的功能 是今年的 Config 大会上

最新发布的AI自动布局（Suggest auto layout） 你不需要再手动的 一个一个的添加自动布局了 只需要把元素排列好 然后全选所有元素或者整个画框 快捷键 Mac: Control + Shift + A 或者 Win: Ctrl + Alt + Shift + A 那Figma AI会自动为元素添加自动布局 如果是常规的设计组件 那这个功能还是很好用的 可以看到 这个卡片的响应式完全没有问题 Figma 还自动为这三个元素 添加了一个单独的自动布局

这个逻辑也是没问题的 那当然了 AI也有局限性 很多情况下 我们还是需要手动调整来确认 这里是常用的快捷键 大家可以暂停看一下 最后 如果你的设计系统中有间距变量 那就可以在自动布局中应用 我们来到右侧边距 点击这个标志 选择一个间距变量 关于如何设置变量 Variable 可以翻看我之前的视频 好了这是今天全部的内容 如果视频对你有帮助的话 请帮忙点赞、订阅、关注

视频有疏漏的地方请多指正 感谢大家支持 我们下期见