Figma Tab Interaction Issue

Ask the community
1

I have a problem with Figma. I created a first component called “Tab”. this component has 4 variants: “idle”, “hover”, “selected”, “disabled”. I connected the variant “Idle” to “Hover” using the interaction “While hovering”. The scope of this component is to simulate a tab with a hover effect.
Then I created another component called “DateTime panels”. This component has 2 variants: “Date”, “Time”. It has composed by several elements including 2 instances of component “Tab”. The “Date” variant has the Instances “Tab” setted up the first in “Selected” and the second in “Idle” . The “Time” variant has the istances “Tab” setted up the first in “Idle” and the second in “Selected”. I connected the Second “Tab” of variant “Date” to the variant “Time” using the interaction “On click”. I connected the first “Tab” of variant “Time” to the variant “Date” using the interaction “On click”. The scope of this component is to simulate the switch between the two panels while clicking the tabs.
The problem begin when I move an instance of component “DateTime panels” inside a frame and I click “present”, in order to see the dinamic interaction and try the component.
When I move the cursor hover the second tab, it go in hover effect, but when I click on it I’m not able to see it changes in Selected state like I defined in the main component. The other elements of the “DateTime panels” actually change, but the tab stays in “Idle”. what could be the issue?

DateTime Panels component
DateTime Panels component1063×943 85 KB

Tab component
Tab component1190×904 53.7 KB

Uploading: video.mp4…

2

Can you share the prototype like?

3

Hello! I’ve published the prototype. The link is in the first comment. Thanks for the help!

4

Can you try it and test if this was what are you were looking for?

The hover interaction is reseting the component interaction. You could try using advance prototype to create the change in the content, but you would have to set a collection and create variables for the values of each condition, time and date.

5

You could also try the separate them to not sacrifice the hover interaction, like this.

6

I want to avoid to use different frame that switch when I click. I would like to keep the interaction inside my component. At the moment I opted to create an hover effect for the datetime panels. This is the easyest way I found to resolve the problem. But still I don’t get it why the hover interaction is reseting the component interaction.

7

On the datepicker and time you could create e more advance prototype using the variables as conditionals. The way you have setup, it will only reset from the tab component.

8

Unfortunately I can’t use conditionals for now. So I try when I’ll get the pro plan