很多人排版做不稳，不是审美不行，而是缺少“可执行的规则”。这篇教程带你在 Figma 里从零搭一套排版系统：把字体层级、行高、字重、间距、命名和组件联动都固化到文件里。做完后你可以直接复用到任何项目：落地到页面时，只需要选样式而不是反复调数值。
适用场景：App/网页/海报信息排版、产品详情页、B 端表格与表单、运营长图。
先把页面常见的信息层级写出来，再去给每一层分配字号。推荐最小可用结构如下（从上到下）：
1）H1 页面标题；2）H2 区块标题；3）H3 小标题；4）Body 正文；5）Caption 辅助说明；6）Overline/Tag 标签与角标。
如果你的项目是 B 端后台，可以再加一层：Table Header（表头）与 Table Cell（表格正文），它们通常会比正文更紧凑。
只调字号很难稳定。建议每一层同时确定：字号、行高、字重（必要时再加字间距）。给你一套常见且好用的起步方案（中文 UI）：
H1：24/32 Medium；H2：20/28 Medium；H3：16/24 Semibold；Body：14/22 Regular；Caption：12/18 Regular；Overline：12/16 Medium（可加 2%~4% 字间距）。
原则：行高通常是字号的 1.4~1.7 倍；标题行高相对紧，正文行高相对松；字重变化比字号变化更“干净”。
把垂直间距也纳入系统。推荐 8px 体系（更常见）：
标题与正文：16；段落与段落：12 或 16；区块与区块：24 或 32；卡片内边距：16/24。
做法：在 Figma 里打开 Layout Grid 或者直接用 Auto Layout，把间距写进组件的 padding 和 gap 里。以后你只是在“选一个既定间距”，而不是临时拍脑袋。
把上面的层级全部做成 Text Styles：选中文本 → 右侧 Text → 点击四点菜单 → Create style。
命名建议用“层级/用途/尺寸”组合，利于检索与团队协作，例如：
Typography/H1/24-32
Typography/H2/20-28
Typography/Body/14-22
Typography/Caption/12-18
注意：同一个层级如果有两种用途（例如正文/强调正文），就拆成两个样式，不要靠手动改粗细。
接下来把排版系统“落地到组件”。做 3 类最常用的组件就能覆盖 80% 场景：
1）标题区块：标题 + 描述 + 操作按钮；2）信息卡片：标题 + 数值 + 辅助说明；3）列表项：主信息 + 次信息 + 右侧状态/箭头。
做法：组件内所有文本都应用 Text Styles；容器用 Auto Layout；padding/gap 用 8px 体系；必要时给文本框设置 Fixed/Fill 以避免挤压时乱跳。
推荐一个简单、能长期坚持的命名规则：
样式：Typography/层级/字号-行高/用途（用途可省）
组件：Component/模块/变体（例如 Component/Card/Default）
这样你在右侧面板搜索“Typography/Body”就能快速定位；交接给同事也不会出现“Body2/正文-小/正文字体”这种混乱命名。
在同一个文件新建一页：Typography Spec。把所有 Text Styles 依次放一遍，并写上用途说明（例如：Body 用于正文段落，Caption 用于输入框提示）。
好处：你能一眼看出层级是否过多、字号是否跳跃、字重是否过密；团队也能把这页当作排版规范。
做完页面后用下面清单快速自检，能显著减少“看起来不对但说不出哪里不对”的情况：
1）同一层级是否用同一个 Text Style；2）标题与正文的行高是否差异明确；3）段落间距是否统一（12/16）；4）区块间距是否统一（24/32）；5）是否出现 3 种以上字号混用；6）是否出现无意义的字重变化；7）超长文本是否设置了换行与最大行数；8）卡片内边距是否一致。
问题 1：页面很挤，信息读不进去。
修复：先加行高、再加段距，最后才加字号；正文行高优先调整到 1.6 左右。
问题 2：标题很强但正文很弱，整体不高级。
修复：标题不要只靠变大，试试 Medium/Semibold + 更紧的行高；正文用更松的行高并保持 Regular。
问题 3：同一页面出现 12/13/14/15 多个字号。
修复：把字号收敛到 3~4 个“主字号”，其他用字重、颜色、间距解决。
当你完成 Text Styles + 组件 + 规范页之后，把文件另存为模板（或者发布为团队 Library）。以后新项目只需要复制模板文件并替换品牌字体/字号范围即可，排版系统就能持续复用。
