按钮文字变长后，背景还要手动拉宽；列表增加一项，下面的内容又要重新对齐——这类重复操作可以交给自动布局。它把排列方向、间距和尺寸关系保存下来，让界面元素随内容变化重新排列。
1. Figma自动布局从哪里开始？
在Figma中选中需要排列的对象，按Shift + A，或从右侧面板添加Auto layout。接着选择水平、垂直或Grid布局：一排按钮适合水平排列，纵向列表适合垂直排列，行列关系明确的卡片区域可以使用Grid。水平或垂直布局还可以通过Wrap让放不下的内容换行或换列。
调整时先看方向，再看Gap（对象之间的距离）和Padding（内容到容器边缘的距离）。尺寸则主要围绕三种关系：Hug contents随内容伸缩，Fill container占用父容器的可用空间，Fixed保持指定宽高。先用一个短按钮练习，再换成长文案，就能看到这些设置的差别。
如果想在中文面板中边看边练，可以打开Pixso创建一个练习文件。下面用Pixso里的按钮、列表和卡片，逐项拆解这些布局关系。
2. 在Pixso中添加自动布局
先选中一个画板，或选中需要放进同一容器的对象，按Shift + A添加自动布局。右侧面板会出现方向、间距和尺寸等设置；也可以右键选择添加自动布局。
练习时可以先创建三个带文字的按钮，分别为按钮添加自动布局，再把三个按钮放进外层容器。这样内层负责按钮与文案的关系，外层负责按钮之间的排列。
3. 调好方向、间距、内边距和对齐
方向决定排列顺序
水平排列适合导航、标签和操作按钮；垂直排列适合菜单、表单和信息列表。复杂页面可以把不同方向的容器嵌套起来，例如外层卡片纵向排列，底部操作区横向排列。
间距与内边距各管一件事
间距控制相邻对象之间的距离；内边距控制内容离容器四边有多远。按钮显得拥挤时，先增加左右内边距；多个按钮挤在一起时，再调整它们所在容器的对象间距。
固定间距与均匀分布
希望元素始终相隔同样的距离，可以使用固定间距；希望两端或整行的分布随容器宽度变化，则调整分布方式。再选择靠左、居中或靠右等对齐位置，完成导航和操作区的排列。
尺寸由内容还是容器决定？
短标签适合环抱内容，让背景跟着文字伸缩；通栏按钮适合填充容器；图标和固定规格的控件可以使用固定尺寸。检查时要分别选中父容器和内部对象，避免只改了其中一层。
4. 添加、排序和整理布局中的对象
把新对象拖进自动布局容器，观察插入位置提示后放下；复制对象时，容器会按规则继续排列；移出或删除对象后，剩余内容会重新排布。选中内部对象后也可以用方向键调整顺序。
要取消自动布局，可选中容器并点击面板中的减号。容器仍可保留，用于继续管理这组图层。
用智能选择整理已有图层
已有一批分散的卡片或图标时，可以先多选并整理间距，再决定是否添加自动布局。Pixso的智能选择控点支持调整间距与对象顺序，适合先把素材排整齐。
选中需要增加的对象，使用Ctrl + D（Mac为Command + D）复制；也可以调整对象尺寸或删除多余项。完成后再看整组内容的间距是否仍符合设计需要。
5. 练习一：三种常见按钮
文案自适应按钮
先创建文字，添加自动布局，再设置背景、圆角和内边距。容器宽度使用环抱内容，把“订阅”改成“订阅最新设计动态”，观察背景是否随文字变宽。
图标按钮
将文字与图标放入同一个水平布局容器，设置两者间距。左右内边距可以分别调整，让图标、文字与边缘的视觉距离更均衡。下图用20px间距展示图标与文案的关系，实际项目可以沿用自己的间距规范。
固定宽度按钮
表单底部等场景需要按钮宽度一致时，把按钮宽度设为固定，文字居中。换成长文案后，再检查是否需要增加按钮宽度、调整字号或约定换行规则。
6. 练习二：随内容变化的卡片
卡片通常由图片、标题、说明和操作区组成。外层使用垂直布局，宽度按页面确定，高度适应内容；内部文本和图片按需要填充可用宽度。增加说明文字时，卡片向下伸展，下面的操作区跟着移动。
如果按钮需要随卡片变宽，将按钮及其所在容器的宽度设置为填充容器。标题区和操作区的排列规则不同时，为它们分别建立内层布局，维护各自的方向与间距。
做完后，试着缩窄卡片、加长标题，再删除一段说明。掌握这些变化后，可以继续看自动布局进阶：自适应卡片、角标和堆叠。已有Figma页面也可以导入Pixso，从一张实际使用的卡片开始整理。
参考：Figma自动布局指南、Grid布局说明。
