这篇教程用一套“可复制”的参数，把 Figma 的网格、间距与组件约束统一起来。做完后你会得到：
1）一套基于 8pt 的间距刻度；2）可直接套用的栅格/列数配置；3）把间距写进 Auto Layout 与组件属性的做法；4）一份自检清单，避免设计稿到开发落地时“对不上”。
先不要急着画界面。把团队常用的间距固定成刻度，后面所有布局都只从刻度里选值。
推荐刻度（移动端/Web 通用，按需删减）：4 / 8 / 12 / 16 / 24 / 32 / 40 / 48 / 64。
使用原则：
- 模块外边距优先用 16/24/32；
- 组件内部 padding 优先用 8/12/16；
- 列间距/栅格 gutter 常用 16 或 24；
- 只要出现 14、18、22 这类“孤儿数值”，先回到刻度里找最接近的解释。
在 Figma 里选中 Frame（如 1440 的 Web 桌面 Frame 或 390 的移动 Frame），右侧找到 Layout grid。
建议默认（Web 桌面 1440）：
- Columns：12
- Margin：80（更紧凑可用 64）
- Gutter：24（更保守可用 16）
建议默认（移动端 390）：
- Columns：4
- Margin：16
- Gutter：16
关键点：不要每个页面都重新发明一套网格。你只需要 1 套主网格 +（可选）1 套密集网格。
当你开始做组件时，所有容器都优先使用 Auto Layout，而不是手动拖动对齐。把间距刻度落实到 3 个地方：
1）Padding：容器内边距只选 8/12/16…
2）Item spacing：子元素间距只选 8/12/16…
3）Gap 与对齐：优先用 Space between/Center 等规则，而不是“看着舒服”。
实操建议：
- 文本按钮：左右 padding 16，上下 padding 10~12（如果必须严格 8pt，可用 8 或 12）；
- 卡片组件：外层 padding 16，卡片之间间距 16/24；
- 列表项：高度尽量由内容+padding 生成，避免写死。
组件做完后，最容易失控的是：大家复制组件后乱改 padding、间距、字号。解决办法是把可变项做成属性，让使用者“选项式修改”。
常见做法：
- 按钮 Size（S/M/L）：对应不同 padding 与字号；
- 组件 Density（舒适/紧凑）：对应 item spacing 16/12；
- 图标有无：用 Boolean 属性控制图标显示，避免手动删除导致对齐变形。
发布/交付前对照检查：
1）页面级间距是否只使用刻度（4/8/12/16/24/32…）？
2）Frame 是否挂了统一 Layout grid（不要漏）？
3）关键组件是否 Auto Layout 化，且 padding/item spacing 不随意改？
4）同层级模块的上/下间距是否一致？
5）是否存在“为了对齐而改文本行高/字距”的临时操作？尽量回到规则修正。
Spacing scale：4, 8, 12, 16, 24, 32, 40, 48, 64
Web 1440：12 columns / margin 80 / gutter 24
Mobile 390：4 columns / margin 16 / gutter 16
如果你希望更“像设计系统”，可以把这些参数写进一个“规范页”，并在 Figma Libraries 里作为共享样式发布。
