Figma 组件变体功能来啦!
https://www.figma.com/blog/bridging-design-and-code-with-variants/
在 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/
更多细致的讲解,让我们一起欣赏那个叫做「草帽」的男人录制视频吧。