原文地址：https://mp.weixin.qq.com/s/1_PywMUxvp7wwQPaTOjuOQ

组件有一个痛点。

组件因为使用场景、业务的不同，并不会乖乖得维持一个理想状态。

比如按钮组件，它可能会基于当前优先级、交互场景等，衍生出尺寸、颜色和线面三类维度。三类维度叠加后，生成的组件数足足有18个。

这就意味着，我们在调用某个组件的时候，你得大海捞针。

我们在sketch搭建组件库时，就会经常遇到这个问题，因为sketch自身的弊端，我们只能枚举出组件所有的可能性，导致最后的组件数量臃肿冗杂，查找费劲、操作繁琐。

figma中如果这么干，其实又回到sketch这条老路了。

那有什么法子？—— 使用变体即可完美解决。

这是figma中理解门槛第二高的新概念（第一高压轴说），而且正好碰上有些小伙伴催我讲变体，所以今天单独用一篇文章的篇幅掰开揉碎了说。

希望能对你有所启发。

01   变体是个啥

what

变体是figma在去年10月底新推出的功能，单从定义上直接讲反而不容易理解。

所以咱们先从熟悉的场景开始切入。

下面这玩意儿，大家都认识吧？

我们去剁手时，会碰到一些商品有多种规格的情况。比如这件衣服就有有颜色和尺寸两类规格，并且每类规格下都对应了各自的属性。