Figma Auto Layout 间距变化后如何检查约束

在 Figma 里把 Auto Layout 的间距改大后，先别急着拖动子图层。正确的检查顺序是：选中 Auto Layout 父级确认 Gap 和 Padding，再选中关键子图层看 Resizing；只有启用了 Ignore auto layout，才需要继续看 Constraints。这样能区分“父级间距变了”和“子图层没有按父级伸缩”这两类问题。

官方地址：https://www.figma.com/

先定位 Auto Layout 父级，再拆开 Gap 与 Padding

第1步：选中父级。在左侧 Layers 面板展开页面层级，点击承载卡片或列表的外层 Frame。右侧切到 Design 面板，找到 Auto layout 区域。若看到的是普通的 Constraints，先检查是否选到了子图层或外层普通 Frame。

第2步：记录四个值。在 Auto layout 区域依次看布局方向、Gap between、Horizontal padding 和 Vertical padding。Gap 是子对象彼此之间的距离，Padding 是父级边界与第一层子对象之间的留白。只改了 Gap 却发现四周也变了，通常是把 Padding 变化或子级自身内边距混在了一起。

第3步：确认是否为 Auto。Gap 如果显示为 Auto，它会根据父级剩余空间分配对象间距离；固定数字则表示明确的间隔。选中对齐控制区域也可以检查当前分配方式。为了排查，建议暂时记下原值，再输入一个容易识别的固定值，确认变化只发生在对象之间。

子图层优先检查 Resizing，脱离流布局才看 Constraints

第4步：检查尺寸策略。在 Layers 面板逐个点击标题、描述和按钮等关键子图层，在右侧找到尺寸设置。检查 Width、Height 是否为 Fixed、Hug contents 或 Fill container。文字层需要随内容变高时，通常看 Hug contents；需要占满父级剩余宽度时，再看 Fill container。

这里是最容易误判的地方：Figma 官方说明中，Auto Layout 内的子对象不能直接用普通 Constraints 控制，除非它忽略 Auto Layout 流程。因此子层间距变化后，先改 Resizing 或父级 Gap，不要反复点击 Constraints。若确实需要让一个装饰层固定在右下角，才打开右侧的 Ignore auto layout，然后检查出现的 Constraints 是否为 Right、Bottom 等目标组合。

缩放父级做一次可见的结果验收

第5步：改变父级宽度。重新选中 Auto Layout 父级，在右侧 Width 输入一个更窄的值，或直接拖动画布边界。观察四点：固定 Gap 是否保持一致；Auto Gap 是否只利用剩余空间；Fill container 子层是否跟随变宽；文字换行后父级高度是否合理。

第6步：按现象回溯设置。子对象之间忽远忽近，回到 Gap；四周边缘不一致，回到 Padding；文字被截断，检查文本层的宽高策略和父级是否开启 Clip content；装饰层脱离卡片，检查 Ignore auto layout 后的 Constraints。验收完成后恢复目标尺寸并按团队约定保存。

常见问题

为什么我选中子图层看不到 Constraints？

因为它仍在 Auto Layout 流中。先检查 Resizing；只有打开 Ignore auto layout，约束区域才可能出现。

Gap 和 Padding 可以同时修改吗？

可以，但排查时应一次只改一类并记录原值，否则无法判断变化来自对象间距还是父级边缘留白。

为什么 Gap 为 Auto 时缩窄后对象贴在一起？

Auto 间距依赖剩余空间，空间不足时不会替代固定 Padding；应检查父级尺寸、子内容宽度和是否需要固定 Gap。

把“父级间距—子级尺寸—缩放结果”连起来检查，通常几分钟就能定位 Figma Auto Layout 间距变化的真正来源，也能避免用手动拖拽掩盖约束配置问题。