The "back" interaction doesn't work within variables of a component

Ask the community
1

Hi all, the “back” interaction doesn’t work within variables of a “cross icon” component, in a components-driven prototype.

The “cross icon” is not a stroke, it’s a normal path and I have followed Figma’s suggestions to group the arrow in a frame and make the frame interact (not the arrow itself) but this doesn’t work neither, I have even tried to add the interaction into multiple other elements.

It seems to be linked to the variables, if I do not use variables and only artboards, the back interaction works, but not to change a variable to another.

2

Hi @Mehdi_Radi would you be able to share some screenshot as I’m not sure to understand the relationship between the interaction action “Back” and the variables

1 Like
3

Sure here it is, you can see that I want the variant to go back to previously visited variant and it just doesn’t work.

Capture d’écran 2024-04-02 à 15.58.44
Capture d’écran 2024-04-02 à 15.58.443586×2112 276 KB

4

All these pages that you see in my screenshot are all variables of one component.

5

Hi @Haroll have you been able to see my above messages? Thanks

6

I am using a Mac and a Windows for the same project, can this be the source of this issue? @Haroll

7

I’m experiencing the same issue, here’s an example

  1. have 2 frames, add a click-based navigation to the 1st frame to the 2nd frame
  2. launch the preview and click the 1st frame- the 2nd frame is now visible
  3. press the browser back and see the browser rendering the 1st frame

here’s the respective counter-example

  1. have a frame with a component with 2 variants and a button
  2. add a click interaction to the button to change the value of the variable to the name of the 2nd variant
  3. bind the selected variant of the component to a string variable
  4. present the preview and click the button
  5. notice the component rendering the 2nd variant
  6. click the back browser in the button
  7. result: nothing happens
  8. expected: the back button restores the value of the variable to it’s initial value and the component renders the first variant