Hal Lee

11月15日发布

Figma 组件变体功能来啦!

新功能

https://www.figma.com/blog/bridging-design-and-code-with-variants/

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

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

组件变体示例

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

Switch 组件

因为我给这两个组件的命名是 switch/onswitch/off,所以它可以识别出一个属性,它有两个可选项:onoff,我们把它的属性名改为 value

识别到属性名

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

组件变体

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

使用组件

更多

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

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