Skip to main content

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:


This is an extremely important and necessary feature that will open up great opportunities for using interactive components!


+1 I am making flow for creating the object in 3 steps. Without resetting stepper component state I am stuck on last step every time after first testing


There is an even more annoying problem with the addition of component props: if you change the state of a prop in the instance, then in the prototype you press R it will jump to default variant props, and there is no way to avoid this. 😭


You can fix that by reloading the prototype or by modifying the prop in the editor (which means that you have to share the prototype on a very controlled environment).


I think the ideal fix would be something that allowed us to chose how the components behave with would be best, with a “Reset on exit” or similar option available in the Interaction details panel that would give us the best of both words.


With “Reset on exit” on, the component resets to its default state.


With it off, the component stays how it was left by the interaction.


+1 this is important feature and makes a lot of sense its really a share we cant reload each component


+1. This would enable powerful looping animations containing nested looped components based on ‘after delay’ triggers


This is a big miss. I’d suggest more interaction between variants and outside elements. For example, on button click change component X variant state to… In addition, include an “on frame load” interaction that can also set the variant state. Currently there is the “after delay” interaction that works if you set the delay to 0 or a tiny fraction of a second (if 0 isn’t allowed). But I think the key here is allowing change of variant state from elements outside of the variant. That would make my life much easier.


+1


I hope there will be an option for resetting animation within interactive components in the near future. But since the lack of reaction from the @Figma_Team I fear the worst. #justdoitalready 😉


Still waiting on this update. Anyone know if it’s in the works?

Work arounds I’ve come up with are not very elegant.


Thanks a lot!! 💜 I was seraching for a way to load an element after delay only once (by first load of the prototype) and that’s what exatcly needed! Copied the first screen and with few changes have it in seconds done!! 💯 Thanks!!


Adding my +1 to the choir, this feature seems to be pretty fundamental when dealing with interactive components


No news from the team on this one? Really needing this 🙂


+1


Fix this please.


Running into the same issue…makes it waaaaay hard to use interactive components when there isn’t a way to ‘refresh’ their state or have a reference marker tied to a frame.


+1, its been a year soon…


+1 - has anyone figured out a work-around for this? I have a selected state on my components, but only one thing in the prototype can be selected at once. I think I have to override it and do it frame by frame, but that’s a much more complicated prototype.


+1

This bug is a very disappointing 🥲


+1 Frustrating


Same problem… Where is the answer? I used to use Proto.io and they just gave you multiple actions upon click… you could navigate to another frame and change the state of the navigation component. Why is this tens of billions of dollars company not able to do something so remedial?


oooof this is a killer - just ran into this. I want a component to go to the default state when I close an overlay. That should be a pretty common use case I would think.


+1 frustrating if you spent some hours on a prototype only to discover such a simple thing is not possible


+1 Would save on some frames.


+1 for this


Me too - I only use interactive components for hover states.


Why is this still not possible? It can be a simple checkbox “force state” for the frame you want to force the selected state, so you can also keep track of the state if you want to.


Reply