用途:为 Figma 设计系统生成完整的间距与布局 token 体系,使设计系统保持一致,并让开发交接的间距数值无歧义。
必要输入:平台(iOS / Android / Web / 多平台)、基础单位(4px 或 8px,默认 8px)、设计系统名称(用于 token 命名)、组件密度(紧凑 / 标准 / 舒适)、栅格要求(或“从平台标准推导”)。
主要能力与输出结构:
- 基础单位:给出 4px 或 8px 及理由,所有数值须为基础单位的倍数。
- 间距刻度:以表格给出 token、数值与用例,覆盖 spacing.none 0px、spacing.xs、sm、md、lg、xl、2xl、3xl、4xl。
- 布局栅格:移动端 375px、平板 768px、桌面 1440px 的列数、边距、间距与最大内容宽度。
- 组件间距惯例:按钮水平/垂直内边距、卡片内边距、输入框内边距、图标与标签间距、区块间距等。
- Figma 实现:创建 SPACING 页面可视化各 token;在 Resources > Variables 创建名为 Spacing 的 Number 集合;将变量应用到 Auto Layout 的 padding/gap;token 名称可原样或经 Tokens Studio 交给工程师。
- 需避免的反模式:使用不在刻度上的数值(如 13px、22px),组件中写死绝对像素而非 token,同一产品混用 4px 与 8px 基础单位。
质量检查:token 值均为基础单位倍数;刻度覆盖 xs 到 4xl;为相关断点定义栅格;组件惯例覆盖常见决策;包含 Figma 实现步骤。
限制与要求:间距刻度须遵循一致的数学比例,不能使用任意值;不能只给 token 名称而不给 Figma 实现说明;需同时记录全局 token 与组件级使用惯例;不能跳过栅格定义;需考虑响应式行为,说明间距如何随断点变化。适用触发场景如“为我们的 Figma 设计系统创建间距系统”“定义 Figma 间距 token”“为某产品设置栅格与间距刻度”“设计系统该用什么间距值”“帮我搭建 Figma 文件的布局基础”。