这篇教程用一个最常见也最稳的办法：以 8pt 为基准建立间距体系，再把它落到组件、页面模块和交付规范里。做完你会得到一套可复用、可扩展的 Figma 组件库骨架。
1) 规定所有间距只允许使用 4 的倍数（4/8/12/16/24/32/40/48…）。
2) 给每个刻度命名：xs=4，sm=8，md=16，lg=24，xl=32，2xl=48。
3) 在团队里约定“特殊情况必须说明原因”，否则一律不允许出现 13、19 这类随机数。
以常见 Web 容器为例：Desktop 宽度 1440，内容区 1200，左右留白各 120。列数用 12 列，Gutter（列间距）用 24（=3*8）。
在 Figma 里操作：
1) 选中 Frame → 右侧 Layout grid → 选择 Columns。
2) Count=12，Type=Stretch，Gutter=24，Margin=120。
3) 复制一份做 Tablet/Mobile：Mobile 可以用 4 列或 6 列，Margin=16，Gutter=16。
选一个高频组件练手：按钮（Button）。推荐先做 3 个尺寸：S/M/L。
1) 新建一个 Frame，打开 Auto layout（Shift+A）。方向 Horizontal，Spacing between items=8。
2) Padding 统一用刻度：S(8/12)、M(12/16)、L(16/20)。只要是项目里常出现的按钮，就不要用“凭感觉”的 padding。
3) 文本样式先定两档：Button/S 12px，Button/M 14px（按你的项目字体与可读性微调）。
4) 把按钮做成组件，并建立变体：Size(S/M/L) + State(Default/Hover/Disabled) + Icon(None/Left/Right)。
页面真正消耗时间的是模块组合，比如“卡片 Card”。
做法：
1) 卡片容器用 Auto layout Vertical，内部间距 16，padding 16。
2) 标题与正文间距 8；正文与操作区间距 16。
3) 操作区放按钮组，按钮组间距 8，整体对齐 Right。
4) 关键点：所有间距都来自 Step 1 的刻度表，你会发现模块组合越来越快，而且视觉更一致。
如果你只写一份文档，规范还是会被忽略；要把规范写进工具里。
建议最低配置：
1) Color styles：Primary/Secondary/Success/Warning/Danger + Text/Border/Fill。
2) Text styles：H1/H2/H3/Body/Caption/Button。
3) Variables（如果团队用得上）：把间距刻度与颜色映射成变量，便于主题切换和开发对齐。
把下面这段直接复制到你的组件说明里（每个组件都用同样结构）：
1) 用途：这个组件解决什么问题/用于哪些页面。
2) 变体：Size、State、Icon 等枚举值。
3) 间距与尺寸：padding/spacing 使用的刻度（如 padding=16，gap=8）。
4) 交互：hover/pressed/disabled 的颜色与阴影变化。
5) 禁止事项：哪些组合不允许（例如 L 尺寸不允许无文本仅图标）。
1) 间距刻度没统一：导致组件组合时对不齐。
2) 组件没用 Auto layout：后续改文案/改语言会崩。
3) 只做组件不做模块：看起来“有系统”，但落地效率没提升。
4) 变体命名不一致：开发和设计都找不到正确版本。
今天就从按钮 + 卡片开始：用 8pt 刻度做完组件，再用卡片模块拼 3 个真实页面区块（列表、详情、表单）。你会立刻感受到一致性和速度的提升。
