一、相关概念

变体（variants）：相似的组件。
组件集（component set）或者组件变体：放置变体的容器。
属性（Property）：可以理解为变体的特点。举个例子按钮组件的属性可以是type、size、state，或者它是否具有icon。
值（Value）：即属性值。例如： 状态（state）属性可以有default、hover、pressed和disabled值。

二、组件命名

1. 制作组件变体

下面列举出了三种属性作为案例：

• 属性一：类型（3个值：普通按钮，左边icon，右边icon）
• 属性二：主次（2个值：主要按钮，次要按钮）
• 属性三：状态（4个值：默认，悬停，聚焦，禁用）

根据排列组合可形成3*2*4=24个不同的变体。

2. 变体组件命名

• Stept 1：选中相同值的组件，按住ctrl+r调出统一命名弹窗。

• Stept 2：按同一属性不同的值分批命名，复用原始名词用“/"隔开；同一属性的多个值，需重复多次命名。

• Stept 3：同一属性所有值命名完，再开始下一属性所有值命名，依次命名完所有值即可。

3. 变体组件命名逻辑

变体需要设定属性（Property）和值（Values），使组件更接近前端代码。现有组件转化成变体，为了准确转换，组件命名遵循结构：componentName/value1/value2，第一个"/"之前的文字将成为变体组件的名称，其他"/"将创建一个新的属性，然后将属性作为一个值添加。

组件命名逻辑：ComponentName/Property1=Value1/Property2=Value2/Property3=Value3（属性和值一一对应，组件命名：组件名/属性1=值1/属性2=值2/属性3=值3）

三、 组件集

选中所有组件，组合成组件集，此时组件集的名词即第一个“/”前的名词；组件集中的状态和属性都可批量修改，同时还能根据属性的重要性进行重新排列。

组件集中的所有变体拥有相同的属性和值，但每个单独的变体一定是属性和值排列组合的唯一值。

四、利用组件变体制作可复用交互按钮

在组件组内部给默认状态的按钮添加交互，可在鼠标悬停，点击时切换不同的效果。

五、交换变体属性

组件在实际运用的过程中也可根据需求切换不同的状态。