Figma Auto Layout 间距不随容器变化：右侧面板、约束选项与预览验证

做Figma卡片套完Auto Layout之后，改容器宽度时经常碰到标题、标签、按钮挤成一团，或是预设的间距完全不对的情况，这类问题大多不是画布拖拽操作失误，而是右侧Design面板里的尺寸适配规则没配套设对。把间距、内边距、子元素伸缩属性逐一核对调整，布局就能稳定适配内容和容器的任意变化。

先把「间距不听话」拆成三个典型现象

选中包含标题、说明文字和按钮的卡片Frame，确认右侧面板已经显示Auto layout设置区域。先不要拖动画布上的元素边缘，先逐一确认三个点：子元素之间的距离是不是固定的，卡片边缘的留白是否符合预期，拉宽卡片的时候哪部分元素会吸收多出来的空白空间。

如果只有卡片外圈留白不对，优先调Padding；如果标题和按钮之间的间距不对，直接改Gap between；如果卡片拉宽之后内部内容完全没有跟着展开，就去看子元素的Width resizing属性。三个设置的作用范围完全不同，混着调整很容易越改越乱。

在右侧Auto layout面板先配置固定间距

选中父级卡片，在Auto layout区域把Direction设为Vertical，再把Gap between填成16。这个数值仅代表标题、描述和按钮这类子元素之间的距离，不包含卡片边缘的留白。

接下来设置Padding。想要上下左右留白一致，可以直接先填一个统一数值；卡片顶部需要更大的呼吸空间时，再切换到Individual padding模式，分别设置Top、Right、Bottom、Left四个方向的数值。Figma官方帮助文档对Padding的定义是父级边界和子对象之间的空白，Gap则是子对象彼此之间的距离。

如果把Gap输入成Auto，Figma会把父容器的剩余空间全部分配到子元素之间，适合首尾元素紧贴上下边缘的特殊布局，不适合需要「标题到正文永远固定16px」的普通内容卡片。

Hug contents和Fill container要配套判断

选中卡片父Frame，在宽度或高度的下拉选项里选择Hug contents，父级就会根据子元素尺寸和Padding值自动收缩或扩大。标题从一行换行变成两行的时候，卡片高度也会随之同步增加。

再选中需要撑满横向空间的按钮或正文区域，把Width resizing改成Fill container。这个属性只适用于Auto Layout的子级，不能直接作用在顶层Frame上。子级开启填满容器后，父级在同一轴上将无法继续保持Hug状态，会自动转成Fixed，这是Figma官方文档特别标注的边界特性。

用三个预览尺寸确认规则没有互相覆盖

做一张普通的活动卡片，保留两行标题、一行说明文字、底部一个按钮。先用320px宽度预览效果，再复制一份改成更长的标题，最后把外层容器拉到480px宽度。符合预期的效果是卡片高度随内容自动变化，按钮横向完全铺满，标题和说明之间的间距始终保持你预设的数值。

父级 Card: Vertical / Gap 16 / Padding 20 / Width Fixed
标题与正文: Width Fill container / Height Hug contents
按钮: Width Fill container / Height Fixed 40

如果480px宽度下标题和按钮之间的距离突然变大，就检查Gap是不是被意外切换成Auto了；如果窄容器下文字直接溢出卡片边界，就检查文本层的宽度属性是不是还是Fixed width。调整的时候优先看右侧面板的Width、Height标签状态，不要只靠画布拖拽的手感判断问题。

设置不生效时按这个顺序复查

1. 确认当前选中的是包含所有子元素的父Frame，而不是单独选中了内部的文本层。
2. 查看右侧面板是否真的显示出Auto layout设置区域；没有的话先点击Add auto layout开启自动布局。
3. 把Gap从Auto改成明确的像素数值，排除剩余空间自动分配造成的视觉误差。
4. 分别检查父级和子级的Width、Height resizing属性，明确哪些元素是Fixed、哪些是Hug、哪些是Fill。
5. 用长短两种不同长度的文本预览，确认换行和卡片高度变化都符合预期。

这里不用急着给每一层元素都加固定宽高。固定值设置得越多，Auto Layout能自动处理的内容变化场景就越少；通常只保留一个稳定的外层宽度，再让文本和按钮按照各自的需求使用Hug或Fill属性，后续维护起来会轻松很多。

常见问题

Gap和Padding在Figma里有什么区别？

Gap是相邻子元素之间的距离，Padding是父Frame边缘和最靠近边缘的子元素之间的留白。卡片内部四周太挤优先调Padding，标题和按钮之间的间距不对优先改Gap。

为什么设置了Hug contents，父级还是自动变成Fixed？

检查子级是否使用了Fill container属性。子级要占满父级剩余空间的场景下，父级在该维度上就不能同时完全依赖内容尺寸自动缩放，会自动转为Fixed状态。

什么场景下应该使用Gap: Auto？

当你希望第一个元素紧贴容器顶部、最后一个元素紧贴容器底部，中间的空白区域随容器高度变化自动分配的时候可以使用。普通内容卡片的固定排版节奏更适合手动填写明确的像素值。

把单张卡片的配置规则做成可复用检查项

全部调整完成后选中父级和关键子级，快速记录Direction、Gap、Padding、Width resizing和Height resizing五项配置。交接给其他设计师之前，再分别用短标题、长标题和窄容器各预览一次。这样验收的是整套可复用的布局规则，而不是某一张在当前画布刚好看起来整齐的静态效果。