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 would be super useful. IC feels redundant for our team without this feature.

I’m having the same problem with Variants persisting when navigating across pages in an interactive prototype. Similar to previous comments, I have a navigation component that remembers the state in which you left it (e.g. not the default state) when returning to the homepage.

Same. This makes interactive components rather un-useful for many purposes.

+1, it’s really bothering me

Would love to see this implemented, makes prototypes much more viable.

+1 for this feature

Is anyone in Figma listening to the community? Seems like some of these bugs are quite easy to correct, why spend so much time in between updates, when small stuff could be handled. Resetting interactive components is essential in animation, so users can go back and repeat steps, or simply not having to restart a prototype from the beginning (which can be quite time-consuming)

+1. I have spent hours trying to find a work-around for this issue to no avail. @Figma_Support please fix this as soon as possible.

Same challenge. Would be nice to have the ability to either:


A) automatically reset an interactive component when the page with said component is navigated to

😎 define two interactions that execute simultaneously with the same trigger


A solves most issues talked about here; B solves my particular issue and adds functionality to the prototype feature set.

I really need this for a choose favorite function im designing:)

i am finding myself in this very situation with multi-tier navigation. everything works as expected on the initial path, but when returning to the origin page, the specific secondary flyout menu used to first navigate is stuck in an open position, where I would like it to return to its original state. totally agree with the proposed solution of being able to set the origin back to its initial state upon navigating to a new frame.


Mouse_Highlight_Overlay

Workaround:

State stays persistent even in multiple nested interactive component. You can go very far with this approach.


Only reason I would need frame to frame persistence is to reflect some kind of logic or content change.

+1 this has been going on for ages. It’s a stupid bug and must be fixed. Devs please fix this.

+1 As well. My clients think my prototypes are broken since they can’t preview animations multiple times when they get into pages. Please make component resetting come true.

+1

I need this for my prototypes as soon as possible.

Same case here

+1

I agree, this is hard to explain to clients!

Bump. I’d really like a way to reset a variant back to it’s original state. I constantly run into this issue with my prototypes that use forms or flyouts. The best solution I’ve found is to close and refresh the page, which is painful to do and is not at all practical for demos and presentation.

+1 Same problem here

Same. I have a screen with a loading bar component that upon 100% completion goes to a results page. When I link back to that screen with the loading bar, it still shows 100% for a split-second before going to the results page again. The components need an original state that is always loaded every time the user navigates back to that frame.

having the same problem. I’d like to either ‘reset’ or choose a state the interactive component is in when going between frames (using same component). The current implementation requires re-creating a noodle of pages (as someone else just mentioned) making them useless.

+1

Looking to be able to return all interactive components to default state

Just had a question about this the other day. Same - interactive components are only useful for a 1 page prototype at the moment. +1 for the need to implement this.

After hours of trying to get a button to reset, I finally figured out a very simple workaround. Use Touch Down to reset to the initial state and use Touch Up for what you’d normally use just regular Touch for. Make sure to set the delay and ease to 1ms so you don’t see the reset. Let me know if you’re having trouble and I’ll try helping out.

Basically, it won’t work if you have any ease at all. Putting it to 1ms allows the processing to occurs before Figma has time to prevent the reset.

Reply


Terms & ConditionsCookie settings