品牌型号：联想Yoga 14Sitl

系统：Windows 10 64位专业版

软件版本：Figma入门版

Figma的自动布局功能确实很实用，能帮我们快速搭建出排版工整、适配性强的界面组件。搞明白它的规则设置和容器调整技巧，做设计排版就能事半功倍。下面就为大家介绍Figma自动布局是什么，Figma自动布局规则设定与容器调整方法的相关内容。

一、Figma自动布局是什么

自动布局是Figma的布局系统，它让设计元素能够像前端代码一样具备响应式特性。简单来说，就是让设计容器能够根据内容自动调整尺寸和排列方式。为了更容易理解，接下来我们用按钮的例子来了解什么叫自动布局。

1、没有自动布局的情况下，我们创建一个按钮的过程是先用矩形工具画外框，再切换为文字工具打上按钮的文字。同时选中这两个元素后进行居中对齐实现一个按钮的制作。这种方式考验设计师的眼力，要靠视觉敏感度来判断到底对齐了没有，而且不具备可扩展性。比如这时候把【按钮】改为【这是一个按钮】。文字数量变多了，又得重新对齐。

2、同样的例子，如果我们采用自动布局，情况就不一样了。我们同时选中矩形和文字，鼠标右键中找到添加自动布局。

在画布右侧能够看到多出来了自动布局的选项。这里，我们要对着矩形的宽度框进行鼠标右击，设置为适应内容。高度框也一样，设置为适应内容。

这样的话，可以看到矩形的宽度随着文字长度的增加同步增加了，并且文字始终保持在矩形的中间位置。

二、Figma自动布局规则设定与容器调整方法

在使用自动布局前，了解它的规则设定与容器调整方法尤为重要。接下来给大家介绍创建自动布局时需要遵循的基本规则与操作步骤。

1、创建自动布局的第一步是选择需要组合的元素，起码要选中两个元素才能创建。可以通过鼠标右键找到自动布局，也可以用快捷键Shift+A，还可以在界面右侧布局里点击加号添加布局。

2、间距和对齐方式是自动布局的两个核心参数。间距控制元素之间的距离，可以设置为固定值或者让系统自动计算。对齐方式则分为主轴和交叉轴两个维度，让我们能够精确控制元素在容器中的位置关系。例如图片6中，目前是选了居中对齐、间距为10个像素。

3、容器调整是自动布局的高级应用。通过设置容器的尺寸模式，可以控制响应行为，一共有三种模式。①固定宽度模式：保持容器尺寸不变；②包裹内容模式：让容器随内容扩展；③填充容器模式：使元素填满可用空间。在布局的宽度框和高度框右击列表中可以进行模式的选择。

在实际应用中，自动布局特别适合需要频繁修改的组件。例如按钮的宽度会随文字自动调整，卡片列表内边距的统一管理等。

以上就是Figma自动布局是什么，Figma自动布局规则设定与容器调整方法的相关内容。用好自动布局这个功能，做设计真的能快很多。重点是要学会怎么设置规则和调整容器，这些熟练了，不仅自己做设计更顺手，和团队配合的时候也会更顺畅。