Skip to main content
Shane
February 26, 2021

LAUNCHED: State management for prototypes

  • February 26, 2021
  • 205 replies
  • 21530 views

Just struck a pretty simple use case/scenario where I need the component to reset it’s state when I leave the frame. This has been touched on elsewhere, but this is such a common and key use that I thought I’d put it in it’s own thread.

Scenario:
I’ve got a dropdown menu with three items in it, with each item changing what columns are visible in a table and some other control states. I have three frames, each with a view of the table setup as it should be, and want to use the dropdown items to navigate between the frames - basically faking the table state change. All of this works perfectly, however when I navigate back to a previous table view state, the dropdown component is already in it’s open state - not what I want.

Current workaround: none that I can come up with (other than not using interactive components at all for this, and just using multiple frames for the dropdown open/closed states as I would previously)

Suggestions:

  1. Have a “reset component on leaving this frame” setting for instances of a component on a frame - useful for this situation and others, but needs to be a setting so that components that should keep their state between frames can do so (light/dark toggle maybe? Something like that).
  2. Do it all in a single frame, with the dropdown component changing the the state of the table component - no frame navigation required. Would work nicely for the particular use case I’m working with here, but not sure it would solve all similar situations.
  3. Do both 1 and 2. This solution is my preferred solution 😉 😆

EDIT:
Other threads that relate:

205 replies

May 25, 2023

This feature basically renders the “While hovering” interaction useless for any components. It is resetting all of the nested components below the parent.

I have a tab button component with 3 states: Default, On Hover, Selected

  • Interactions Default “while hovering” to On Hover

I have a tabs component comprised of 3 tabs

When I make interactive tabs , the content of the component below is also resetting to its original state as well. Super frustrating that this was missed.

Claudio_Torres
New Participant
May 25, 2023

Hello @dvaliao. I had to press Help >Troubleshooting > Clear Cache and Restart. After this action, these options appeared in my Figma. Thanks for the support.

Guillaume_BRACHON
New Participant
May 26, 2023

Hi, since the launch of the new State management for prototypes, the scroll position is not preserved, each time I create a link between two frames (representing two states of the same page) my prototype will scroll to the top. I really miss the “preserve scroll position” that worked fine!

Anyone having the same issue?

Guillaume_BRACHON
New Participant
May 26, 2023

I just found why it wasn’t working: all the frames need to have exactly the same name so that Figma matches the different “objects” (= pages). Not very convenient, but it’s working again.

Carolyn6
May 26, 2023

@Guillaume_BRACHON which frames - the topmost level “artboard” frames? or a specific layer??

Carolyn6
May 26, 2023

I see now! the top most level frames

Guillaume_BRACHON
New Participant
May 26, 2023

Yes, the top level frame, the one that corresponds to the web page / app screen.

Mauricio2
May 26, 2023

it’s all i needed, Thanks!! ❤️

Wawa
New Participant
May 30, 2023

Would love this! Would removing so many screens for such tiny changes.

Bryan12
May 30, 2023

Did you find any solution to this? I’m having the same issue with my input select dropdown. The options don’t render the hover state but instead ruins the click event.