关于 figma-variant-matrix
figma-variant-matrix 是面向 Figma 组件设计的技能，帮助设计师在构建前规划变体、属性与状态。它还提供组合数量检查、图层命名、令牌映射和构建顺序指导。
主要功能
- 01规划组件变体与属性
- 02定义交互状态和解剖结构
- 03计算组合数量并标记过多情况
- 04映射设计令牌并安排构建顺序
适用场景
- 01规划按钮、卡片或输入框组件
- 02为组件补全交互状态
- 03检查变体组合是否过多
- 04为 Figma 组件制定构建步骤
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/figma-variant-matrix确认已加载。
详细介绍
Figma 变体矩阵技能
定义在 Figma 中构建组件前所需的所有变体、属性和状态，避免组件已在 40 个页面中使用后才发现缺少变体。
必需输入
- 组件名称（Button、Card、Input、Badge、Navigation item 等）
- 组件用途（它有什么作用？会在哪里使用？）
- 平台（iOS / Android / Web / Multi-platform）
- 设计系统背景（独立使用 / 属于现有系统的一部分）
输出结构
1. 组件概览
名称、类别（交互 / 展示 / 布局 / 表单 / 导航 / 反馈）、使用场景。
2. 变体属性
| 属性 | 取值 | 备注 |
|---|---|---|
| 类型 | Primary、Secondary、Tertiary、Destructive | |
| 尺寸 | Large、Medium、Small | |
| 状态 | Default、Hover、Active、Disabled、Loading | |
| 图标 | 无、前置、后置、仅图标 |
组合总数：[N]。如果超过 50，请标记并考虑拆分为多个组件。
3. 状态定义
针对每种状态，仅列出相较于 Default 的变化：
- Default：[完整视觉规范]
- Hover（Web）：[相较于 Default 的变化]
- Active/Pressed：[变化]
- Disabled：[变化 — 使用图层级属性，而非对整个组件设置不透明度]
- Loading：[替代标签的内容；加载期间是否可交互？]
- Error（表单）：[边框颜色、辅助文本、图标变化]
4. 结构拆解
| 图层名称 | 用途 | 必需？ | 备注 |
|---|---|---|---|
| container | 背景和边界 | 是 | |
| label | 文本 | 视情况而定 | 仅显示图标时隐藏 |
| icon-leading | 前置图标插槽 | 否 |
5. Token 映射
| 属性 | Token | 回退值 |
|---|---|---|
| 默认背景 | color.brand.primary | #hex |
| 边框圆角 | radius.medium | 8px |
6. 构建顺序
- Default 状态，最常见的变体
- 转换为组件并添加属性
- 尺寸变体
- 状态变体
- 类型变体
- 最后添加图标插槽变体
质量检查
- 已定义所有交互状态
- 已计算变体总数，超过 50 时已标记
- 每个图层均使用语义化名称
- Token 映射涵盖所有视觉属性
- Disabled 状态使用图层级属性，而非不透明度
反模式
- 不要创建属性重叠或冲突的变体矩阵 — 每个属性都必须能够独立变化
- 不要用不透明度表示 Disabled 状态 — Disabled 状态必须使用图层级属性，而非不透明度
- 如果许多数学组合无效，不要逐一列举 — 仅记录有效且可构建的组合
- 定义变体时不要忽略响应式行为 — 说明哪些属性会随屏幕尺寸变化
- 不要在缺少 Figma 实现指南的情况下生成矩阵 — 变体命名约定必须遵循 Figma 的属性系统
示例触发语句
- “在 Figma 中定义 [组件] 的变体”
- “我的 [组件] 需要哪些状态？”
- “帮我规划 [组件] 的变体矩阵”
- “为 [button/card/input] 设置 Figma 属性”
- “我的 [组件] 需要涵盖哪些组合？”
评论
支持 Markdown