Figma Auto Layout 处理卡片内容自适应的设计方法

Figma 卡片要随内容自适应，关键不是把所有图层都设成同一种尺寸，而是给每一层明确职责：外层卡片使用垂直 Auto Layout，正文区域和封面宽度使用 Fill container，文本与按钮高度使用 Hug contents，再用最小、最大宽度约束卡片边界。这样标题变长、描述增减或父容器改变时，卡片会重排而不是重叠。

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

Auto Layout 官方帮助：https://help.figma.com/hc/en-us/articles/360040451373-Guide-to-auto-layout-in-Figma

先准备一张结构清楚的卡片

本例卡片包含四部分：封面图、标题、描述、操作按钮。先在左侧 Layers 面板把图层重命名为 cover、content、title、description、actions。清楚的层级名称不是 Auto Layout 的硬要求，但能避免后面选错父层或子层。

下图是原创界面说明图，只用于标识本文需要选择的图层与右侧属性区域，不是 Figma 实际页面截图。

步骤一：把外层卡片改成垂直 Auto Layout

1. 在左侧 Layers 面板选中卡片内的 cover、content 和 actions。
2. 按 Shift + A；也可以在右侧 Design 区域点击 Add auto layout。
3. 在右侧 Auto layout 区域把 Flow 设为 Vertical。
4. 把 Gap between items 设为 12，四边 Padding 设为 16。
5. 将新 Frame 重命名为 card。

可见的成功状态：画布中卡片外框出现 Auto Layout 的间距控制，右侧栏显示 Flow、Gap 与 Padding；拖动图层顺序时，其他层会自动让位并重新排列。若右侧没有 Auto layout 属性，通常是只选中了单个文本层，而不是需要包裹的多个层。

步骤二：让标题和描述真正跟随宽度换行

1. 在 Layers 面板同时选中 title 与 description，按 Shift + A 创建嵌套 Auto Layout。
2. 把嵌套 Frame 重命名为 content，Flow 设为 Vertical，Gap 设为 8。
3. 选中 content，在右侧尺寸区域将水平 Resizing 设为 Fill container，垂直 Resizing 设为 Hug contents。
4. 分别选中 title 和 description，将水平 Resizing 设为 Fill container，高度保持 Hug contents。

可见的成功状态：拖窄 card 后，标题和描述会增加行数，content 与外层卡片高度同步增加，文字不会越出卡片边界。若文本仍保持单行并超出边界，检查文本层是否仍为 Hug contents 宽度。

步骤三：让封面、操作行和按钮各司其职

1. 选中 cover，将水平 Resizing 设为 Fill container，垂直 Resizing 保持 Fixed height，例如 160。
2. 选中 actions，按 Shift + A 建立水平 Auto Layout，Flow 设为 Horizontal，Gap 设为 8。
3. 把 actions 的宽度设为 Fill container，高度设为 Hug contents。
4. 选中按钮 Frame，将宽度和高度都设为 Hug contents，按钮内部 Padding 可设为水平 12、垂直 8。

可见的成功状态：改变卡片宽度时，封面与操作行始终占满可用宽度；修改按钮文字时，按钮外框随文字扩展，但不会强制撑满整行。

Fill container 只对 Auto Layout 父容器中的子对象可用。如果卡片还是画布顶层 Frame，卡片自身不会出现 Fill container；应先把卡片放入列表、网格或页面容器的 Auto Layout 中，再为卡片设置该选项。

步骤四：限制宽度并用三种内容验收

1. 选中 card，在右侧 Width 字段菜单中选择 Add min width，输入 240。
2. 再次打开 Width 字段菜单，选择 Add max width，输入 360。
3. 复制卡片三份：一份使用短标题，一份使用两到三行长标题，一份隐藏 description。
4. 分别拖动父容器宽度，观察三份卡片在 240 到 360 的范围内变化。

可见的成功状态：短标题不会产生大块无意义空白；长标题会换行并增加卡片高度；隐藏描述后，标题与操作区之间只保留一次 Gap；卡片宽度不会小于 240，也不会超过 360。

常见设置冲突怎么处理

父 Frame 设为 Hug contents 后为什么变成 Fixed？

如果同一轴上的子对象设为 Fill container，父 Auto Layout Frame 不能再依靠子内容计算最小尺寸，Figma 会把父级该轴改为 Fixed。解决方式是让父级宽度 Fixed 或由更外层容器约束，子级继续 Fill container；高度则通常保持 Hug contents。

卡片变窄后按钮为什么被挤出边界？

先检查操作行是否为 Horizontal Auto Layout、宽度是否 Fill container，再判断按钮是否需要 Wrap 或缩短文案。不要通过负 Gap 强行叠放按钮。对必须单行展示的操作区，应提高卡片 min width。

什么时候需要 Wrap？

标签、徽章或多个辅助按钮在窄卡片中需要换到下一行时，可以在 Horizontal 或 Vertical Flow 中开启 Wrap。本文的单主按钮不需要 Wrap，保持结构更清楚。

最终检查表

• 外层 card：Vertical、Gap 12、Padding 16。
• content：宽度 Fill container、高度 Hug contents。
• title 与 description：宽度 Fill container、高度 Hug contents。
• cover：宽度 Fill container、高度 Fixed。
• actions：Horizontal、宽度 Fill container、高度 Hug contents。
• button：宽高 Hug contents，并用 Padding 控制点击区域。
• card：根据使用场景设置 240 的 min width 与 360 的 max width。
• 至少检查短标题、长标题、隐藏描述三种内容状态。