Figma Auto Layout 卡片怎么配置或排查

Figma 卡片一旦出现文字变长就错位，通常不是间距数值的问题，而是卡片根层没有启用 Auto Layout，或子层仍然使用了固定高度。最稳妥的做法是选中卡片最外层 Frame，按 ⇧ Shift A 添加 Auto Layout，选择 Vertical；卡片高度用 Hug contents，文字层横向用 Fill container、纵向用 Hug contents。

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

一、先选对卡片根层，找到 Auto Layout 入口

打开文件后，在左侧 Layers 面板找到卡片最外层 Frame，例如包含标题、说明文字和按钮的那一层。选中它时，画布上应出现包住整张卡片的边界，右侧 Design 面板也会显示布局相关属性。如果只选中了标题文字，按快捷键会把文字包进一个新 Frame，后面调整的就不是整张卡片。

二、添加 Vertical 布局并统一间距

保持卡片根 Frame 选中，按 ⇧ Shift A，或在右侧 Auto layout 区域点击添加。新增布局后，在 Flow 中选择 Vertical，让标题、说明和按钮沿纵向排列；在 Padding 中输入 16，在 Gap between items 中输入 12。这里的 16 和 12 只是示例，重点是把卡片外边距和子项间距交给布局属性管理。

如果按钮需要和说明文字保持同一列，不要用画布拖动去“对齐”它。选择卡片的对齐方式，再观察三个子层是否都位于同一个 Auto Layout Frame 内。对于横向按钮组，建议把按钮包成一个独立的 Horizontal Frame，再把这个 Frame 放进卡片的 Vertical 布局。

三、用 Hug 和 Fill 处理文字变长

卡片的高度选择 Hug contents，表示内容增加时卡片跟着变高。选中说明文字，在 Resizing 中把横向设置为 Fill container，纵向设置为 Hug contents；这样文字会占满卡片可用宽度，并根据换行自动增加高度。标题若需要单行截断，才考虑固定高度或单行设置，不能把所有文字层都锁死。

四、卡片不生效时按父子层级排查

第一项检查是选中对象：右侧面板显示的属性属于哪一层，往往就是问题所在。第二项检查父级 Flow，Vertical 卡片不能用水平排列的预期去判断结果。第三项检查子层 Resizing，固定宽高会抵消 Hug 或 Fill 的效果。最后展开 Layers 面板，确认是否有绝对定位图层；这类图层会忽略父级的自动流向，适合徽标、浮层等特殊元素，不适合普通标题和按钮。

修改后，把说明文字替换成两行以上的长句，再缩短回原文观察两次状态。如果卡片高度随内容变化、按钮没有跳出边界，说明配置已经生效；如果只有某个子层异常，就继续沿着它的父级逐层检查，而不是重做整张卡片。

常见问题

为什么按 Shift+A 后只多了一个小框？

大多是只选中了文字或图标。回到 Layers 面板选中包含全部卡片内容的根 Frame，再执行一次。

卡片高度已经 Hug，文字为什么仍然被截断？

检查文字层的纵向尺寸是否也是 Hug，以及文本框是否被设置了固定高度；父级 Hug 不能替子层解除固定高度。

Auto Layout 和普通 Constraints 能一起用吗？

Auto Layout 中的子对象通常不能直接使用普通 Constraints，除非该对象被设置为忽略自动布局流向。普通内容优先用父子布局和 Resizing 管理。