Figma变体怎么设置不同状态的交互效果？

变体之间做交互，靠的不是Variant Property触发，而是要用“交换变体”这个交互类型。

具体操作：

在Prototype面板里，从一个变体（比如默认状态）拖拽到另一个变体（悬停状态），这时候弹出的交互选项里不要选“导航”，要选“交换变体”（Swap Variant）。然后触发条件选On Hover，目标选那个悬停状态的变体。

按下状态同理，触发条件选On Press，交换到按下状态的变体。

你之前选项混乱大概率是因为选错了交互类型，默认弹出的是Navigate to，但变体之间切换应该用Swap Variant。

还有个关键点：拖拽连线的时候，确保是从具体的变体图层拖出去，而不是从整个组件集拖。如果变体图层嵌套太深，展开来操作会更清晰。

设置完预览一下，鼠标放上去应该就能看到状态切换了。

啊这个我太熟了，Figma的变体交互确实容易把人绕晕。正确姿势是这样的：

1. 先在变体组件里确认属性设置好了，比如state=default,hover,pressed这种，不同状态要有明确的属性区分

2. 选中你的主组件，在Prototype面板添加交互时：
建议改成这样的流程：
先点组件右边的蓝色+号，选On Click或While Hovering
然后目标不要选另一个组件，而是选Change to，这时候会展开你设置的所有变体状态

3. 重点来了：在Change to的下拉菜单里，找到对应的状态变体，比如从default切换到hover。这里会显示你设置的所有属性组合，比直接连线清楚多了

常见踩坑点：
- 不要用拖拽连线的方式切换变体，那个是用来跳转页面的
- 如果下拉菜单里选项太多，可能是你把多个属性混在一起了，建议把状态相关的属性单独放一个property

最后预览时记得点原型模式右上角的播放按钮，不是直接点组件预览