Component variant swapping with hovering is buggy

Here’s my setup

I’ve been having the same issue. I followed tutorials like these:

• How to created a toggle switch in Figma | Segmented control step-by-step tutorial | Design & Animte - YouTube
• How to Design and Prototype a Segmented Toggle in Figma | Segmented Control - YouTube

But run into the same issue Andrew described: if there’s a hover state on the cell atom component, the segmented controller/toggle molecule component doesn’t work as expected, instead getting stuck in weird states with multiple cells being active.

It only works in the following states, neither desired:

1. Remove hover states.
2. Add a molecule component permutation for EVERY hover state.

I’m unable to upload the video, but here’s link to file: https://www.figma.com/file/2RhUlaOHI41oTbA6OCEwNC/Toggle-Test?type=design&node-id=0-1&mode=design&t=eohikBqvfg0yNiVr-11

@Andrew_Q_Tran, your problem is that your collapsed and expanded variants for the menu button are different. The collapsed variant should have the text layer from the expanded variant, but hidden.

@Eduardo_RH, your problem is different from the problem of the author of this topic. Your problem is that Figma preserve states. The solution is very simple—select all cell instances in the Toggle component variants, open the “on click” interaction details and check the “Reset component state” checkbox.

@tank666 I thought so too and have updated the linked Figma to include the hidden label. The problem still remains 😦

However… I checked “Reset component state” per your recommendation to @Eduardo_RH above and it seems like it’s fixed!

Holy shit that worked, thanks @tank666 !!

Is there documentation for that anywhere? would love to learn when I need it for the future.

“Reset component state” should not have had an effect. What fixed your prototype was that you replaced the instances in the base component.

Previously, you used a component that was removed. That is, initially it’s used the wrong menu button component that exists in the file.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.