Figma 组件变体功能来啦！

在 Figma Config Europe 上介绍的组件变体功能上线啦！虽然大家更期待更强大的 Auto Layout，但是这个功能也是非常棒的。

组件变体是一个接近代码的概念，大概就是你可以将一些组件编组，然后它们的区别就可以被识别为不同的属性，你就可以通过这些属性来快速切换组件形态。比如一个 Switch 开关组件，在之前我们需要做两个状态：一个开一个关，现在我们可以把它变成一个，然后再面板中控制开关。

组件变体示例

我来用一个小例子讲解一下。首先我们做两个开关状态的组件，并选中它们，在右边就会出现一个组合为变体（Combine as Variants）的按钮。

因为我给这两个组件的命名是 switch/on和switch/off，所以它可以识别出一个属性，它有两个可选项：on和off，我们把它的属性名改为 value。

这时候，这两个组件就变成一个变体组件了，它的结构如下图左边图层列表所示。

在使用时，我们看到只有一个组件了，把它拖拽到画布中，在右侧面板中，就可以通过刚才设置的属性 value 来控制（on/off 会被识别为一个开关，其它的属性变化可能会被识别为输入框、下拉选择等）。

更多

组件变体很强大，上面的例子只是最简单的一个，你还可以看下面的内容来深入学习。

• 官方教程：https://www.figma.com/community/file/903303571898472063
• 最佳实践：https://www.figma.com/best-practices/creating-and-organizing-variants/
• 博文介绍：https://www.figma.com/blog/bridging-design-and-code-with-variants/

更多细致的讲解，让我们一起欣赏那个叫做「草帽」的男人录制视频吧。