Figma 用 Auto Layout 维护卡片间距的操作步骤

Figma 用 Auto Layout 维护卡片间距，应选中整组卡片的父容器：方向决定横排还是竖排，Gap 决定卡片彼此的距离，Padding 决定最外侧卡片到容器边缘的留白。需要固定间距时输入数值，不要把 Gap 留在 Auto 后又期待它始终等于某个像素值。

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

下面以练习副本中的三张普通 Frame 卡片为例：横向排列、卡片间距 16、四周填充 24。这些数值只是本例的设计选择，不是 Figma 强制规范。请使用有编辑权限的 Figma Design 文件；图片均为原创操作示意图，不是实际软件截图。

步骤1：把三张卡片放进横向 Auto Layout

在左侧 Layers 中选中三张完整的卡片 Frame，而不是只选卡片标题或背景矩形。右键选择 Add auto layout，或使用 Shift+A。对多个对象添加时，Figma 会创建承载它们的 Auto Layout Frame。

选中新父容器，在右侧布局区域选择 Horizontal（横向），将容器命名为 Cards Row。若当前已经有承载卡片的父 Frame，就对该 Frame 添加布局，不必反复创建多层外壳。

继续前，应看到三张卡片成为同一父容器的子对象，并按横向排列。若变成竖排，先改方向；若只有文字被重新排列，说明选中的层级不对，应撤销后重新选中完整卡片。入口规则见 Figma 官方添加 Auto Layout 说明。

步骤2：将卡片之间的 Gap 固定为 16

保持 Cards Row 被选中，在右侧 Auto Layout 的 Gap between items（对象间距）字段输入 16，然后按 Enter 确认。若字段原来显示 Auto，改成明确数值。观察相邻卡片之间的空隙，而不是卡片内部标题与正文的距离。

继续前，右侧字段应显示 16，三张卡片应保持两处一致的相邻间距。改一个值就能影响整组，才是这次操作要得到的维护方式，不再逐张拖动卡片位置。

若某张卡片内部留白看起来不同，不要通过扩大父容器 Gap 补偿。先区分是对象之间的空间，还是卡片自身的内容与背景。要调整卡片内部排版，需要选中卡片内部的布局层，这与本次列表父层是不同设置对象。

步骤3：设置四周 Padding 为 24

仍选中 Cards Row，在右侧 Auto Layout 的 Padding 字段中，将 Horizontal padding 和 Vertical padding 都设为 24。若面板展开了四个独立方向的字段，则将 Top、Right、Bottom、Left 分别设为 24，并确认输入已生效。

完成后，应能看到卡片组与父容器边缘之间的留白，同时卡片间距仍为 16。这里维护的是设计对象的布局属性，不需要额外导出图片才能让这些设置作用于当前设计。

如果增加填充后空间变挤，先观察父容器和子卡片的尺寸设置，不要立刻用负间距“挤回去”。本例只固定方向、间距和填充，不承诺把任意固定宽度的卡片列表自动变成响应式页面。

为什么调整 Gap 没改变外边距？因为 Gap 面向相邻子对象，容器边缘留白用 Padding 设置。

为什么拉宽容器后卡片距离变了？先查看 Gap 是否是 Auto，而不是固定数值；还要区分看到的是对象间距还是剩余空白。本例固定输入 16，不依赖自动分配。

为什么右侧找不到 Auto Layout？确认选中的是有布局的父 Frame，文件有编辑权限，而且没有只选到内部文本层。不要为了出现面板就给每个文字层重复添加布局。

方向、Gap 与 Padding 的含义可对照 官方横向与纵向布局说明；完整概览见 Figma Auto Layout 指南。交付时明确标注“父容器横向、Gap 16、四周 Padding 24”，比仅凭目测说明“间距差不多”更便于后续维护。