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:


+1, I have a progress bar component that is supposed to illustrate a file being uploaded. It works the first time, but if you go back to upload another file, the progress bar doesn’t work. I too need a way to “reset” an animation.

Hi folks.

Excuse me for my english but I will try to explain.

The same problem - I have a “dropdown menu” component that looks like “hamburger” icon and a list of items that appears when user clicks on icon. Each item should lead to other frame. In other words, it is a simple navigation that is used on any website. And instances of this component are placed on different frames (website pages) at the top with “no scrolling”. So I click on hamburger-icon. List appears. And when I click on one of the menu items I should jump to another frame in its initial state - with collapsed menu. As it should be on websites. Ex: I have a list - home, about, gallery etc. Initially flow starts on “Home frame” with collapsed menu. Then I click on “About” item and jump to “About frame” which initial state is also with collapsed menu . Then I click again on hamburger-icon → menu opens → I choose “Home” and return to Home frame. This frame should be with collapsed menu. But it remains with opened menu from previous visit. Then I click again on “About”, jumps to “About page” and now it is also with opened menu.

I’ve tried to work around this issue by adding “Mouse leave” interaction (by the way, this is not exactly a workaround, because when you move mouse away from menu, it should really disappear) in hope that jumping on other frame will be concidered a mouse leaving. No effect. Apparently different instances of menu component placed on different frames and even named differently, count as one.

Also I’ve tried to combine “Touch up/down” and “Tap” interactions but unfortunately it doesn’t works properly.

I see that this problem has not been solved for a year.

It would be very cool if



  1. we could choose “reset/don’t reset frame to initial state” option during frame selection in the “Navigate to” interaction

  2. interactions had several actions

    Ex: ON TAP → Navigate to Frame THEN Change to State THEN Show Overlay THEN …

  3. interactions with one component could control other components interactions

    Ex: ON TAP → Change THIS component to State

    or ON TAP → Change OTHER Component to StateOfOtherComponent

+1, can’t loop animation between variants with sub component probably because of that.

Could be cool to be able to set prototype arrow from and to the component itself to reset it.

The feature is critically needed to build clickdummies for user tests…

@Figma_Support Is there any update on this fix??

I can’t get it to reset either. @Figma_Support please help.

Agreed. Exactly what I am trying to build and it just created a MAJOR roadblock

+1 on this. I’m working on an app intro, basically a looping sequence of a few animated components using “after delay” interactions and smart animate (it’s awesome what can be done with Figma these days, by the way). Works fine on a first round, shows components in their final state after on. Kind of a show stopper.

Does anyone know how to elevate/change this to a topic that can receive votes? Or how to get @Figma_Support to chime in or help?

Here is the link to vote

Same problem.


I open a drop-down menu on a frame, click a link in it to a different frame, and then when I click a link back to the original frame the menu is stuck open from before.


Honestly, this (interactive components) is the main reason I was switching to Figma from Sketch + Invision - if I am back to creating a static frame for every state, then I might as well stick with Invision…

+1 from me.

There’s a frame in my prototype that when a user navigates to it, I want everything in its base/starting state, regardless of what they might have interacted with previously.

This problem still persists. it is sad I seems stuck, found a couple of workarounds but it doesn’t do it for me.

+1

a really needed feature

+1

Same issue. It would very very useful

confirmed this works

Great Idea! It works but only if you long press the mouse button. If you click fast like you normally do it will only do the touch down action but not the touch up action. Am i missing something?


Thanks for sharinf your tip.

+1 for me too.


I’m trying to make a fairly simple toast notification component, but it seems like its impossible as a standalone component.


Screen Shot 2022-07-06 at 4.20.13 PM


A button opens the modal toast, but when its finished and I use the button again, it always ends up on the last interactive frame.

+1, very annoying having to always start my prototype flow from scratch to assure all interactive components are reset/back at the start.

+1, please provide a fix for this. Very annoying for heavily animated prototypes.

I, too, would love to have this functionality. I’m currently designing a multi-screen workflow with a top and side nav — the latter of which can be collapsed / expanded to hide / show text labels for the links, respectively. In implementation, the nav drawer would maintain either its collapsed or expanded state while traversing the screens that nav drawer governs. But, in my prototype, if you open the drawer, and navigate to another screen, the drawer on that screen will be collapsed. It lends itself to a feeling of brokenness when navigating the prototype — and will, in my experience, be something on which we’ll need to spend unnecessary time explaining to clients during moderated user tests.

+1 this issue keeps coming up for me as well

+1 for me too

+1 Having the same problem creating a drop down menu.

+1 for this feature. We have a complex form where interactive components work well for radio and checkboxes but maintaining values in textFields require this feature.

Reply


Terms & ConditionsCookie settings