关于 figma-spacing-system
figma-spacing-system 是用于构建 Figma 间距与布局令牌体系的设计技能，涵盖统一比例、响应式网格、组件规范和 Figma 实施步骤。
主要功能
- 01基于 4px 或 8px 单位的间距比例
- 02移动端、平板和桌面网格定义
- 03常见组件的间距规范
- 04Figma 变量设置与实施指引
- 05令牌一致性和响应式布局检查
适用场景
- 01为 Figma 设计系统定义间距令牌
- 02记录响应式布局网格
- 03统一共享令牌与组件间距
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/figma-spacing-system确认已加载。
详细介绍
Figma 间距系统技能
生成一套完整的间距与布局令牌系统，为设计系统的一致性和开发交付的清晰明确奠定基础。
必需输入
- 平台（iOS / Android / Web / Multi-platform）
- 基础单位（4px / 8px — 默认为 8px）
- 设计系统名称（用于令牌命名）
- 组件密度（compact / standard / comfortable）
- 网格要求（或“根据平台标准推导”）
输出结构
1. 基础单位
[4px or 8px] 及其理由。所有值都必须是其倍数。
2. 间距比例
| 令牌 | 值 | 使用场景 |
|---|---|---|
| spacing.none | 0px | 有意移除间距 |
| spacing.xs | 4/8px | 图标内边距、紧凑标签 |
| spacing.sm | 8/12px | 紧凑型组件的内部内边距 |
| spacing.md | 12/16px | 标准型组件的内部内边距 |
| spacing.lg | 16/24px | 区块内边距、卡片内部间距 |
| spacing.xl | 24/32px | 组件之间的间距 |
| spacing.2xl | 32/48px | 区块间距 |
| spacing.3xl | 48/64px | 页面级分隔 |
| spacing.4xl | 64/96px | 主视觉区块 |
3. 布局网格
移动端（375px）：4 列，边距 [value]，沟槽 [value] 平板端（768px）：8 列，边距 [value]，沟槽 [value] 桌面端（1440px）：12 列，边距 [value]，沟槽 [value]，内容最大宽度 [value]
4. 组件间距约定
| 上下文 | 令牌 | 示例 |
|---|---|---|
| 按钮水平内边距 | spacing.md | 左/右 |
| 按钮垂直内边距 | spacing.sm | 上/下 |
| 卡片内部内边距 | spacing.lg | 所有边 |
| 输入框内边距 | spacing.sm 垂直方向，spacing.md 水平方向 | |
| 图标与标签的间距 | spacing.xs | |
| 区块间距 | spacing.xl |
5. Figma 实施
- 创建 SPACING 页面，以可视化方式记录每个令牌
- Resources > Variables > 创建名为 Spacing 的 Number 集合
- 将变量应用于 Auto Layout 内边距/间隙值
- 按原样或通过 Tokens Studio 与工程师共享令牌名称
6. 应避免的反模式
- 不在比例中的值（13px、22px）——取整到最近的令牌
- 在组件中使用绝对像素值，而不是令牌
- 在同一产品中混用 4px 和 8px 基础单位
质量检查
- 所有令牌值都是基础单位的倍数
- 比例覆盖 xs 到 4xl
- 为所有相关断点定义网格
- 组件约定涵盖常见决策
- 包含 Figma 实施步骤
反模式
- 不要创建包含任意值的间距比例——比例必须遵循一致的数学关系（例如 4px 基础单位、8-4-2 系统）
- 不要定义没有 Figma 实施说明的间距令牌——只有令牌名称无法指导实际操作
- 不要创建未考虑组件级间距约定的间距系统——必须同时记录全局令牌和组件用法
- 不要跳过网格定义——没有网格系统的间距文档，不是完整的布局基础文档
- 不要忽略响应式行为——应定义间距如何随断点变化
示例触发短语
- “为我们的 Figma 设计系统创建一套间距系统”
- “为 Figma 定义我们的间距令牌”
- “为 [product] 设置网格和间距比例”
- “我们的设计系统应该使用哪些间距值？”
- “帮我为 Figma 文件构建布局基础”
评论
支持 Markdown