Translation Comparison - figma-variant-matrix

Defines all variants, properties, and states a component needs before building it in Figma — preventing missing variants discovered after the component is already used across 40 screens.

在Figma中构建组件前，定义其所需的所有变体、属性与状态——避免组件已在40个页面中使用后才发现遗漏变体的问题。

Required Inputs

必要输入信息

Component name (Button, Card, Input, Badge, Navigation item, etc.)
Component purpose (what does it do, where is it used?)
Platform (iOS / Android / Web / Multi-platform)
Design system context (standalone / part of existing system)

组件名称（按钮、卡片、输入框、徽章、导航项等）
组件用途（功能是什么，应用在哪些场景？）
平台（iOS / Android / Web / 多平台）
设计系统背景（独立系统 / 现有系统的一部分）

Output Structure

输出结构

1. Component Overview

1. 组件概述

Name, category (Interactive/Display/Layout/Form/Navigation/Feedback), used in contexts.

名称、类别（交互类/展示类/布局类/表单类/导航类/反馈类）、应用场景。

2. Variant Properties

2. 变体属性

Property	Values	Notes
Type	Primary, Secondary, Tertiary, Destructive
Size	Large, Medium, Small
State	Default, Hover, Active, Disabled, Loading
Icon	None, Leading, Trailing, Only

Total combinations: [N]. Flag if over 50 — consider splitting into multiple components.

属性	取值	说明
类型	Primary, Secondary, Tertiary, Destructive
尺寸	Large, Medium, Small
状态	Default, Hover, Active, Disabled, Loading
图标	None, Leading, Trailing, Only

总组合数：[N]。若超过50种需标记——考虑拆分为多个组件。

3. State Definitions

3. 状态定义

For each state, list only what changes from Default:

Default: [Full visual spec]
Hover (web): [Delta from default]
Active/Pressed: [Delta]
Disabled: [Delta — use layer-level properties, not opacity on whole component]
Loading: [What replaces label, interactive during loading?]
Error (forms): [Border colour, helper text, icon changes]

针对每个状态，仅列出与默认状态的差异：

默认状态：[完整视觉规范]
悬停（网页端）：[与默认状态的差异]
激活/按压状态：[差异]
禁用状态：[差异——使用图层级属性，而非对整个组件设置透明度]
加载状态：[标签替换内容，加载期间是否可交互？]
错误状态（表单类）：[边框颜色、辅助文字、图标变化]

4. Anatomy Breakdown

4. 结构拆解

Layer name	Purpose	Required?	Notes
container	Background and bounds	Yes
label	Text	Conditional	Hide when icon-only
icon-leading	Leading icon slot	No

图层名称	用途	是否必填	说明
container	背景与边界	是
label	文本	可选	仅图标模式下隐藏
icon-leading	前置图标插槽	否

5. Token Mapping

5. 令牌映射

Property	Token	Fallback
Background default	color.brand.primary	#hex
Border radius	radius.medium	8px

属性	令牌	备选值
默认背景色	color.brand.primary	#十六进制值
圆角	radius.medium	8px

6. Build Order

6. 构建顺序

Default state, most common variant
Convert to component, add properties
Size variants
State variants
Type variants
Icon slot variants last

默认状态，最常用变体
转换为组件，添加属性
尺寸变体
状态变体
类型变体
图标插槽变体（最后处理）

Quality Checks

质量检查

All interactive states defined
Total variant count calculated, flagged if over 50
Every layer named semantically
Token mapping covers all visual properties
Disabled state uses layer-level properties not opacity

所有交互状态已定义
已计算变体总数，超过50种需标记
所有图层命名语义化
令牌映射覆盖所有视觉属性
禁用状态使用图层级属性而非透明度

Example Trigger Phrases

示例触发语句

"Define the variants for a [component] in Figma"
"What states does my [component] need?"
"Help me plan the variant matrix for [component]"
"Set up the Figma properties for a [button/card/input]"
"What are all the combinations I need for my [component]?"

"为Figma中的[组件]定义变体"
"我的[组件]需要哪些状态？"
"帮我规划[组件]的变体矩阵"
"为[按钮/卡片/输入框]设置Figma属性"
"我的[组件]需要所有哪些组合？"

figma-variant-matrix

Original

Translation

Figma Variant Matrix Skill

Figma 变体矩阵技能