首先，“variant”这个词在英语里是“变化”或“另一种形式”的意思，和“variation”意思相近，只是在细微之处有点差别。
所以，我们不用费劲去创建多个外观不同的独立按钮，而是把这些“不同样式”归到一个组件里，这样管理和更新起来会方便很多。
实例的作用是让同一个设计能在不同地方重复使用，这在需要保持视觉一致性的时候很有用。但它不太适合单独管理每个状态的设计。
变体则是一种机制，能让一个组件里包含多个状态，所以在需要组织和管理不同状态时，用变体就很合适。
简单说，两者的区别在于：实例是为了复用设计，而变体是让组件本身能有状态上的变化。
先把文本和图标选中，然后按一下 “Shift + A”，就能自动排版了。之后根据实际需要微调一下设计，按钮这部分就基本搞定了。
这里的自动布局默认是让文本和图标在水平方向居中对齐，元素之间的间距也会自动留出来，不用手动调。
这么做的好处是，后续想做那种鼠标放上去会动的按钮会很方便，就像刚才示例里那样。不过这只是个参考，具体怎么设计，还是看你的喜好来调整就行。
下一步，选中做好的按钮，按快捷键 “⌘+option+k”或者 “ctrl+alt+k”，把它转成组件。之后可以根据需求给组件起个名字，这里我们先暂时叫它 “state”
点一下之后，就会生成一个组件集，里面的按钮会被虚线框起来，就像下面这张图里显示的那样。
被虚线整个框住的区域，就是组件集。而组件集里面包含的各个项目，称之为“变体”。 所以到目前为止，我们已经有了一个组件集，以及两个变体。
所以按照层级关系来看，是“父级（组件集）> 子级（变体）”，而且它们都通过“状态”这个属性被统一管理。到这里，变体的创建就完成了。
需要注意的是，变体本身也是组件。所以如果复制它，会生成一个实例，但如果是在组件集内部（也就是虚线框里）复制，得到的就是一个新的独立变体（也是组件）。
要是想创建实例，方法是按住alt键拖动变体，把副本放到虚线框外面就行。
你也可以把已经做好的多个组件合并成变体。
具体操作是：先选中要合并的那些组件，然后在右侧面板上找到“合并为变体”按钮，点击之后，这些组件就会被整合到一个组件集里，之后就能作为变体来统一管理了。
一旦组件集创建完成，其实没有直接删除它的办法。但是组件集里空空如也，它自己就会自动消失。
另外，如果你试着把所有变体都移到虚线框外面，这时候组件集也会消失，剩下的就回到原来那些独立的组件状态了。
编辑好变体之后，就可以切换到“原型”模式来设置交互了。
拿我们这个例子来说，已经设置好了一个交互效果：当鼠标悬停在“变体2”上时，会从默认状态切换到“变体2”的状态。
具体设置的时候，在交互面板的“属性”部分，直接选中你想要切换到的那个变体就行。
想要放置变体的实例，方法是按住alt键，把变体往虚线框里拖一下，再复制到虚线框外面。这样操作后，放出来的东西就会直接变成实例。
你也可以从“资源”面板里这么做。 放好实例后，能在右侧面板的属性里更改变体（也就是显示的状态）。
把实例放在一个画框里，然后选择右上角原型预览就可以正常运行动画了。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。