Skip to main content
Shane
February 26, 2021

LAUNCHED: State management for prototypes

  • February 26, 2021
  • 205 replies
  • 21529 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

Vladimir_Kozlovsky
August 16, 2022

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

Pavel_Martynov
August 18, 2022

+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

Andrei_Iancu
September 2, 2022

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).

Rob_Corradi
September 9, 2022

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.

anastako.design
September 13, 2022

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

Adam44
September 14, 2022

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

Berlinguette_David
New Participant
September 15, 2022

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.

Pieter2
September 27, 2022

+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 😉

Hooman
September 27, 2022

Still waiting on this update. Anyone know if it’s in the works?
Work arounds I’ve come up with are not very elegant.

Daniela_Todorova
October 15, 2022

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!!