Figma变体搭建思路

一. 快速了解变体（Variants）

1.1 什么是变体

首先我们来看一下官方给出的定义。

简单来说，变体能够将同一类型的组件进行组织，从而使组件能够进行更方便灵活地使用，使组件库变得更加简洁。其构成的两个核心点是属性（properties）和值（values），前者指这个组件的变化的属性是什么，例如形状，尺寸，状态等等，那后者就是为每个属性里都赋予相对应的值，例如方形，圆形等。

由于一个组件可能会涉及到很多的属性，例如Button 按钮，属性就可能有类型，状态，尺寸等等。如果是传统的组件搭建方式，在实际的使用过程中，当我们需要某一个属性的组件时，可能就要花一些时间去查找，会有一些麻烦。

而变体能够有效地将这些不同的属性整合起来，从而让我们在使用时能够更加方便地调用。

1.2 创建变体时的4种property类型

当我们创建变体时，会看到4种property类型，接下来就聊一下，我们在哪种情况下会分别用到这些类型。

1.2.1 Variant类型

如果需要为组件添加不同的类型，尺寸等属性时，我们可以使用Variant。例如按钮的常规，悬停，点击等状态。

值得一提的是，使用Variant类型时，我们可以将值设定为true和false，这样可以将该属性设定为一个开关。

1.2.2 Boolean类型

这是一个很有趣的类型，boolean是属于代码领域中的术语，包含了两个值false和true。Boolean类型主要是控制元素是否可见，例如作用于icon时，可以控制icon是否显示。

这里大家使用起来可能会产生一个问题，使用Variant类型时，我们将值设定为true和false时，也能做成这种开关的控制形式，两者看起来相同，那我们该怎样选择呢？因为Boolean类型控制的是元素是否可见，所以当我们需要控制某个元素显示或者隐藏时，我们可以直接选择Boolean类型，而Variant的开关形式，可能是控制样式的改变，例如按钮的禁用状态。总之只要做到组件能被方便地使用，灵活地去选择就可以了。

1.2.3 Instance swap类型

该类型为我们提供了一个可以快速替换实例的方式，例如作用于icon时，我们就可以快速地去更替icon，而不需要点进图层再进行切换。需要注意的一点是，如果有变体组件嵌套，该类型目前并不支持切换里面那层的变体组件。

1.2.4 Text类型

该类型可以使我们快速地对组件中的文本内容进行编辑，相比传统的编辑方式更加方便。

1.3 如何为变体添加Properties

1.3.1 添加Boolean

一般我们可以直接选择控制对象的图层，例如icon，为其添加Boolean属性。如果是先创建好的属性，也可以直接选择。

1.3.2 添加Instance swap

选择控制对象的图层，为其添加Instance swap属性。

1.3.3 添加Text

我们选择文本对象的图层，在右侧操作栏为其添加Text属性。

1.3.4 添加Varients

创建Variants可以通过多种方式，我这里直接在顶部的操作栏中创建Variants，双击更改命名，然后为每个变体元素赋值。

后面如果我们需要添加其他属性，我们可以点击右侧操作栏中Properties旁边的“+”进行添加。

二. 创建变体时的思路

开始创建时，分析组件，考虑周全

当我们在创建某个变体时，首先需要对组件进行分析。例如，它的层级关系是怎么样的，各个元素之间的关系是怎么组合的，在实际场景中可能涉及的属性有哪些，不同属性之间的逻辑关系是怎么样的，最好可以理清楚并进行分类，这样在搭建时会更容易，思路也会更清晰。

选用合适的property类型

不同的属性之间可能也存在着一些逻辑关系，我们需要考虑的是属性之间是能够同时存在还是互斥，一个属性变化时是否会影响其他属性等等，然后我们再为每个属性选择最适合的property类型。

组件搭建时，尽量按同一逻辑进行

因为不同属性之间的组合可能会衍生出很多不同类型的组件，我们在搭建过程中尽可能顺着一条逻辑去搭建，这样不容易出错或遗漏，后面检查时也会比较清晰。比如现在按钮组件具有以下属性：

尺寸：大，中，小

类型：主要按钮，次要按钮

状态：默认，悬浮，激活

我们以尺寸做为一个开始，整理逻辑，然后再进行搭建。

及时检查

在做完组件后，及时检查，测试实际效果是否与预想一致，是否存在冗余属性可以优化，是否有属性未被链接等等。

三. 实例分析

侧边导航栏

首先分析一下导航栏的构成：二级菜单（基础菜单） -> 一级菜单 -> 导航栏整体

这样把结构弄清楚了之后，按照层级列出对应的属性对于整个搭建过程将会非常清晰。

二级菜单状态有默认，悬浮，点击，选中。同一时间只会出现一种状态，我们可以选用Variants类型整合。

一级菜单状态有默认，悬浮，点击，选中，展开。同理我们可以使用Variants。因为一级菜单展开后二级菜单的数量应该可控，所以我们可以再添加一个Variants类型去控制数量。

最后把基础组件进行组合，构成完整的侧边导航栏，测试实际效果是否与我们预想一致。

警告提示

还是先分析组件，首先考虑到警告提示可能有的类型，一般有信息，成功，警告，错误这几种，然后考虑是否有不同的样式等，例如是否存在图标，是否可关闭，是否有辅助文字等。

然后考虑到这几种样式的不同组合，提示种类大概可以分为：

1. 普通

2. 有图标

3. 可关闭

4. 辅助文字

5. 有图标可关闭

6. 有图标带辅助文字

7. 可关闭带辅助文字

8. 有图标可关闭且带辅助文字

分类完成之后我们的思路就会清晰很多，保证4个类型的提示都具有以上样式即可。

接下来就是挑选合适的属性类型。我们观察后可以发现，只需要控制图标，可关闭，辅助文字是否显示，就能实现不同的组合，所以我们可以使用Boolean类型。切换提示类型我们使用Variant类型即可。

完成搭建后，我们进行一个简单的测试，看看效果是否与预想一致。

四. 总结

其实到这里大家应该也可以明白，对于变体组件的搭建来说，分析与思路是非常重要的。当我们要去搭建某个组件时，首先去分析它的构成，将每个层级列出来，尽可能想到会涉及到的属性，整理相关状态等等；之后就是选取合适的property类型，几种类型如何使用并不一定就是固定的，如果能够做到提高使用效率，灵活地去选择即可；当我们完成了一个变体组件时，要及时地去检查并测试，一是检查功能是否能正常使用，二是检查属性有无遗漏。

最后感谢大家能够看到这里，如果觉得本文对你有帮助的话，不妨点个赞再走吧，有问题或者有不同的想法也欢迎一起讨论～