目标：用一套可复用的“网格 + 间距 + 字体层级”规范，把一个常见的移动端信息页（标题、摘要、卡片列表、按钮）排到干净、对齐、可扩展。
适用：UI/产品界面、运营落地页、组件库搭建。工具：Figma。
1）新建 Frame：选择 iPhone 13/14（390×844）或你常用的移动端尺寸。
2）设置缩放与像素：确保在 100% 下对齐像素；开启 View → Pixel grid（如有）。
3）建立命名习惯：Frame 命名为 Page/Home，后续组件用 Cmp/ 前缀，方便搜索与复用。
推荐做法：12 列 + 两侧边距（移动端常用，兼容性好）。
操作：选中 Frame → 右侧 Layout grid → “+” 添加。
参数建议（可按项目调整）：
· Type：Columns
· Count：12
· Margin：16
· Gutter：12（或 8/16，保持统一即可）
为什么这样做：12 列能适配 1/2/3/4/6 等常见拆分；16 的边距在移动端阅读舒适。
8pt 规则：页面里所有“间距/圆角/高度”尽量用 8 的倍数（4 也可作为半级），例如 8/16/24/32。
建议你先定一张“间距表”（写在页面角落当规范）：
· 小间距：8
· 常规间距：16
· 分组间距：24
· 模块间距：32
· 圆角：12（或 8/16，选一个全站统一）
落地方法：选中元素 → 右侧约束（Constraints）与坐标/尺寸输入框，直接输入 8 的倍数；复制模块时保证模块间距一致。
不要每次手调字号与行高，先做 3–5 个最常用的文本样式：
· H1/标题：20 / 行高 28 / Semibold
· H2/小标题：16 / 行高 24 / Semibold
· Body/正文：14 / 行高 22 / Regular
· Caption/说明：12 / 行高 18 / Regular
操作：选中文本 → 右侧 Text → 点样式下拉 → Create style。
提示：行高尽量也走 4 或 8 的倍数（例如 22 可改为 24；18 可改为 20），更容易做对齐。
我们做一个常见结构：卡片（标题 + 描述 + 右侧按钮/图标）。
1）做卡片容器：画一个矩形（宽度对齐网格，左右边距 16），圆角 12，填充白色，阴影可选。
2）给卡片加 Auto Layout：选中卡片内容组 → Shift + A。
3）设定内边距：Padding 左右 16，上下 12 或 16；Item spacing 8。
4）文本区域：标题用 H2，描述用 Body；两行内截断可用文本框高度 + “…”（或在组件里预留空间）。
5）对齐策略：卡片内部统一左对齐；按钮/图标放右侧，使用 Space between 或单独约束。
结果：当你改文字、改图标大小、复制卡片数量时，间距会自动保持一致，不需要手动挪来挪去。
必须组件化的 3 类：
· 按钮（Primary/Secondary/Disabled）
· 卡片（默认/带图标/可点击）
· 列表项（左图右文/双行/带开关）
操作：选中元素 → Ctrl/Cmd + Alt + K 创建组件；再用 Variant 做状态。
命名示例：Cmp/Button、Cmp/Card、Cmp/ListItem。
1）看起来不齐：检查是否所有元素都贴着同一个网格列边界；左右边距是否统一 16。
2）间距忽大忽小：把所有模块间距改成 16/24/32；不要出现 13/17 这种“随手值”。
3）文本显得拥挤：优先提高行高到 4/8 的倍数；段落之间用 16 或 24。
4）复制后样式乱：先做 Text styles/Color styles，再做组件；避免“复制一个看着像的”。
· 页面左右边距是否统一？（建议 16）
· 模块间距是否只使用 8 的倍数？
· 标题/正文/说明是否都使用样式（Styles）？
· 卡片与按钮是否组件化并可复用？
完成这些，你的页面排版会立刻稳定一个档次。
