Figma 学习笔记 – Variants

参考

Create and use variants

定义与用途

Variants 是 Component 的扩展使用方式. 它就像 HTML 元素的属性一样, 通过修改属性, 元素就会变成相应的样式.

通常我们用它来实现 state (状态), 比如: hover, focus, error.

创建

先把所有 Component 做出来 (当然后面要加也是可以的), 并且在旁边写上它对应的属性 (这样会比较容易管理).

假设我需要一个 submit button component, 它有 2 个属性, Size, Color 分别的值是 Big, Small, Red, Blue

笛卡尔积就会有 4 种样式下的 button (我们可以做一个抽象的 Component 来管理, 但我这里就简单做 4 个 component 演示就好)

替 Component 依据属性值命名, 用 / 作为分隔符

然后选中所有 Component 点击 combine as variants

如果 property 很多的话, 笛卡尔积到来它会比较乱

使用

创建一个 Instance 就可以选择属性了.

修改

如果要添加新的 property 或 component 可以通过右边操作栏的控件.