Figma变体组件切换状态不生效是怎么回事？

这个问题的关键是：你可能把「变体切换」和「交互触发」混在一起设置了，但 Figma 的变体组件本身不会自动响应点击事件，它只是个状态容器，得靠你手动加交互逻辑去切换它。

先说下原理：变体组件（Variant）的切换依赖的是一个叫「State」的属性，你设置的 state: default、state: hover、state: pressed 是给组件打标签用的，但 Figma 不会自己根据鼠标行为去改这个标签——除非你用「交互」功能显式地去修改它。

很多人的误区是：以为只要写了 hover/pressed 变体，Figma 就会像 CSS 的 :hover、:active 那样自动触发。但其实 Figma 的交互系统和前端不是一套逻辑，它需要你手动把「点击」动作绑定到「修改组件状态」上。

来，按这个流程检查：

1. 选中你的变体组件实例（不是主组件！），在右侧属性面板里找到「State」下拉框，确认它显示的是 state，且当前值是 default。
这一步很多人会忽略：你得确认你编辑的是「实例」，变体切换只对实例生效，对主组件没用。

2. 进入「Prototype」模式（快捷键 P），选中那个按钮实例，点右上角的「+」加交互。

3. 触发条件选 On Click，动作选 Change to，目标组件选「同一组件」（就是你自己的按钮），然后在右侧弹出的「Override」里找到 state，改成 pressed。

4. 关键一步：你得再加一个「On Click Outside」或者「On Mouse Leave」的交互，把状态切回 default，否则点完 pressed 就停那儿了，体验怪怪的。
如果你希望鼠标移出就恢复 default，就加 On Mouse Leave → Change to → state: default。

5. hover 状态怎么触发？它不是靠点击，而是靠「On Hover」交互。
加一个 On Hover → Change to → state: hover，再加个 On Mouse Leave → state: default。
注意：hover 和 click 的交互可以同时存在，Figma 会按触发顺序覆盖状态。

6. 检查你有没有在变体里用嵌套组件。比如按钮里套了个图标变体，也用了 state 属性。这时候如果你只改了按钮实例的 state，图标变体不会自动跟着变——你得在图标变体的实例上也加 override，或者用「自动布局继承」（但这个容易踩坑，建议保持变体结构扁平）。

7. 最后一个容易忽略的点：如果你的按钮用了「Auto Layout」，确保它的「Padding」和「Overflow」设置没把内容裁掉，导致你误以为 pressed 状态没生效（比如文字被切了，看起来像没变）。

补充个调试技巧：在变体组件里，给每个状态加个不同颜色的背景，比如 default 绿色、pressed 红色、hover 蓝色，这样预览时一眼就能看出状态有没有切换成功。

如果按上面都做了还是不行，大概率是变量名不一致。Figma 对 state 的属性名是大小写敏感的，State 和 state 是两个不同属性。你可以在变体设置里点开「Edit variants」，看每个变体的属性名是不是完全一致（包括空格、下划线）。

还有个隐藏坑：如果你的组件是嵌在 frame 里的，frame 本身也设置了变体，可能会覆盖子组件的 state。这种时候建议先「Explode」组件，单独测试按钮变体，确认没问题再放回去。

最后说句实在的：Figma 的变体交互体验确实反人类，尤其是没有「默认 hover」和「按下保持」这种内置行为，全靠手动搭逻辑，我之前也踩过无数次坑，现在都靠写交互脚本批量加……要是你按钮交互特别多，真可以考虑用 Figma Plugin 比如「Variants Manager」自动配交互，省命。