在做变体组件之前，把设计好的样式先编组（快捷键是Ctrl+G），然后在组件里面选择（Create multiple components）进行批量组件，就是把每一个组件变成单独的组件，然后在点击右边的按钮Combine as Variants这样组件变体就做好了。
把默认的名称改为“样式”。选中第一个组命名改为“默认”；第二个组命名改为“焦点状态”；第三个组命名改为“搜索状态”。
接下来做一个复杂一些的组件样式。先做好表单样式，同样每一个按钮编组再做批量组件，也就是每一个单独的组件。
给组件命名（组件快捷键Ctrl+R），在命名时一定加上“/”点击Number，之后按钮就自动命名好了（看图效果圈红的地方）。
另外一定要按“ Combine as variants”这个键，因为做的是组件变体。
接下来创建属性。创建好了属性就可以设置“值”了。
在实际练习过程中，如果出现下面的英文提示：The properties and values of this variant are conflicting. Change the applied values on this variant to resolve this.翻译后中文：该变体的属性与数值存在冲突，请修改此变体上应用的数值以解决问题。一般修改一下属性数值就可以了。
把设计好的图标做成组件变体。
通过组件变体，做重复的样式操作，可以节约很多的设计时间。这里的房子卡片就是从组件里面直接应用的。
