如果你在用Figma做UI设计，自动布局（Auto Layout）是你必须掌握的核心功能。它不仅是Figma最重要的设计功能，更是释放设计师生产力的关键工具。
很多人刚接触自动布局时，觉得“不就是加个按钮排个列吗”，用起来也确实能快速排列元素。但真正用好自动布局，远不止点一下Shift+A那么简单。这篇文章从零开始，带你彻底搞懂Figma自动布局。
一、什么是自动布局？
简单说，自动布局是Figma中用于自动排列和间距控制元素的工具。它建立图层之间的一种特殊联系，通过调节参数实现图层的自动缩放、位移和排版。你不需要手动调整每个元素的位置和大小——设定好规则之后，改文字、换图片，其他东西会自动跟着调整。
具体来说，你定义的是规则而不是固定数值：排列方向（横向、纵向还是换行）、间距（元素之间的间隙和父容器内边距）、对齐方式、缩放行为（Hug自适应、Fixed固定、Fill填充）。
二、怎么添加和设置自动布局？
创建自动布局有三种最快的方式：快捷键Shift+A给选中的图层或画板添加自动布局；在右侧属性面板点击Auto Layout旁边的加号按钮；或者右键菜单里选择Add Auto Layout。
如果想取消自动布局，按Shift+Option/Alt+A即可。自动布局可以应用在单个画板上（里面包含文字、形状、图片等多个元素），也可以应用在多个元素的组合上——Figma会自动把它们包进一个新的自动布局画板里。
三、核心参数详解
排列方向（Flow）。 控制元素是横向排列、纵向排列，还是空间不足时自动换行。2025年5月Figma引入了Grid网格模式，可以在自动布局中创建最大12×12的网格系统，下级内容根据网格排列，父容器尺寸变化时内容也会跟随网格缩放。
间距（Gap）和内边距（Padding）。 控制元素之间的间距和父容器内部的留白。元素之间的间距可以手动设定固定值，也可以设置为Auto让Figma自动均匀分布。
对齐与分布。 控制元素在主轴和交叉轴上的对齐方式——顶部对齐、居中对齐、底部对齐、均匀分布等。
缩放行为（Resizing）。 这是自动布局最核心的三个选项：Hug（包裹内容，父容器根据子元素自动缩放）、Fixed（固定尺寸，不随内容变化）、Fill（填充容器，子元素自动填满父容器）。
四、嵌套自动布局：真正的响应式设计
单个自动布局能解决简单的排列问题，但真正的响应式设计需要嵌套使用。把多个自动布局画板层层嵌套，从最小的元素（按钮、标签）到中等组件（卡片、导航栏）再到完整页面，每一层都设定好各自的排列规则。
比如做一个产品卡片：最内层是图片和标题的纵向自动布局，中层是价格和按钮的横向自动布局，外层是整个卡片的纵向自动布局——每一层独立控制自己的排列和缩放规则，调整任何一层的内容，其他层自动适配。
五、自动布局的适用场景与局限
自动布局在B端设计中极其重要。表格是最大的应用场景——用自动布局可以快速完成整行数据项的设计，增删改单元格都很方便。表单、导航列表等场景同样适用。
但它也有局限。自动布局只影响下级图层，复杂的嵌套会让图层结构变深。设计好的复杂组件如果要调整，解组往往会打乱图层。不是所有组件都必须加自动布局——结构简单的加了是画蛇添足，过于复杂的加了反而增加维护成本。
适用场景：有相对简单且列表型展示的下级内容，比如侧边导航栏、表格行、表单输入选项。不适合的场景：组件内部元素没有显著重复性、图层较多、排列依据各不相同的复杂卡片或数据看板。
六、进阶技巧
用Wrap实现自动换行。空间不足时元素自动折行到下一行。用负间距实现重叠布局。设置最小/最大宽度防止图片在小屏上缩得太小。空格自动分布用Command+X快速切换固定间距和自动间距。