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:


If you give an example of what you did, maybe I can assist you more, I have dozen of dropdowns in my design and they all work perfectly, but remember if you want dropdowns to have actions like table change, the only way added to the above is to create a frame with each table and drop-downs actions above them as interactive components, this gives a nice DRP and actions but it will hunt your RAM, a small price to pay for perfection if you run on a good PC


I have an prototype with a volume slider in every artboard. It has its own states and I can interact with it perfectly, but when I change artboards, it resets to the initial state of the volume slider and when I change back it goes to the value you I changed it too. It is really annoying.


I am designing an app for an automotive application. In it have applets on the screen that really want to keep their own state independent of the top level state. Currently that is not possible.


But I also want to be able to change the state of a component and have that event bubble up to the main artboard so that I can use that event to drive a change in the main artboard. ex: a component changes state and gets bigger and that triggers other components to change their state to get smaller. I can do that by creating every variation at the parent level, just annoying.


Actually, I do not understand why an interaction on a component where the interaction is define inside the component doesn’t affect every instance of the component. It is one thing if I edit the variant of the instance, but If I drop an instance on an artboard, it should be honoring the current variant of the component… I guess that is the difference between dropping an instance of a component and dropping an instance of a variant of a component. I prefer to think of it as dropping an instance of the component.


Technically, if I have a component instance on several artboards and a subcomponent of that component instance has variants, I can change the subcomponent variant in the master of the subcomponent and it will update everywhere it is instanced is used unless overridden, so that logic exists in design time. It is just not maintained at runtime. At runtime, I can change the variant state of the deep subcomponent via an interaction and it is not the same as changing that variant state directly in the subcomponent at design time… I would think that design time and runtime should act the same way. Changes in the deep subcomponent stick in all instances unless overridden at a higher level.


Yes, this issue is making me drop interactive components too.


I think this is the right path, but not as a dropdown because more than one state may be available.


In the Design tab, within the component panel, there should be a checkbox to “Always load with these states”. Every time you revisit that instance, it will load with the states specified.


You’re right, there would need to be the ability to set any/all properties associated with that component - for that reason, I don’t think a checkbox would work either; there would be no easy way to go back to and tweak the initial settings. Maybe a popout copy of the properties panel (akin to the colour panel for example) where you set the initial value of each property?


Any update on this?


I am experiencing the same problem.


I am doing checkboxes with a “check all” interaction.


When clicking “unchecking all” I expect it to go back to the default state (all boxes unchecked), but instead, all previously checked boxes are still selected. It remembers the last selections and never resets.


I have no hope since there are no updates since March 😕.


I’m experiencing the same issue here with the check all interaction on check boxes. Would be great to have the option to navigate back to a screen in it’s original state


Hi all, I created its slider component that contains 4 variants, based on delay and loop. The bad thing is, when switching to another frame, the slider doesn’t reset and plays the latest slide before switching the frame. Any solutions?


Demo:

figma.com/proto/QXq38iyU9ryBy7575ozpRI/Demo?node-id=1%3A2&scaling=min-zoom&page-id=0%3A1&starting-point-node-id=1%3A2


How to use demo:



  1. Wait for the 2 or 3,4 slide to appear

  2. Click “Another page” tab

  3. Go back to the previous frame by clicking “Home” tab

  4. The slide component didn’t reset and shows the latest slide


+1 to this. I got content that is displayed with a timer based intro animation, and used in multiple different places across the prototype. I thought interactive components would be a great way to simplify the prototype by just having a single component to hold all the animation logic, so I went and did so, and replaced everything with that shiny new component. Only to revert back to the original once I realized the problem described here. I really hope this gets fixed/improved, interactive components are a bit crippled in the current state.


+1 i have the same problem. Look like figma wont solve this.


Yes… we’re encountering this with most of the interactive variants we use. It really needs a reset on load option.


Hey Figma, would really like a solution to this.


Hey Figma, this is something that needs to be addressed as soon as possibile. Please release a fix.


This also affects transitions with animations that are triggered by delays. If you navigate twice to the Frame that contains that animation, you’re only gonna see it the first time and there’s no way to make it visibile again “on load”.


This is a major problem and needs attention.


Same problem here. Interactive Component states are maintained throughout the prototype and won’t reset even if they disappear and reappear later.


Only workaround so far is to reset the entire Prototype. Which allows you to prototype specific sequences only once before you need to reset it again.


Would be great to have a state reset or some way to configure components to show up in their ‘Last’ state or ‘Initial’ state.


Would be very useful to be able to set/change property states based on a trigger (ex: load screen).


Hi guys, what I did - and worked (not perfectly, but it did got the effect I wanted) is to put the option “mouse leave” on the open component linking to the closed one.


Another suggestion to Figma devs would be to be able to make two results with the same action. Ex: on click > nav to x page AND change component to Y


Hi guys, what I did - and worked (not perfectly, but it did got the effect I wanted) is to put the option “mouse leave” on the open component linking to the closed one.


Another suggestion to Figma devs would be to be able to make two results with the same action. Ex: on click > nav to x page AND change component to Y


Ok. I just don’t get it. This is something very important. It’s a major bug that ruins the whole point of interactive components and @anon21722796 haven’t paid any attention to all people complaining for almost a year.

Meanwhile we are all losing valuable time to seek for work-arounds instead of working on our projects.


I personally think this is a massive road block to using interactive components “interactively”. If you can’t have a select that switches between a default/active/interactive state in an overlay modal that when the modal closes the states reset to default then what’s the point.


For me this shows just how behind Figma is on the prototyping front compared to the complexity that ProtoPie and ProtoIO deliver.


Same here @anon21722796 this is super painful. This almost defeats the purpose of interactive components.


Ehh…


Just a small +1



Plus 1. This seems like a huge miss with a fairly simple solution.


Hello everyone.


I have a question with interactive components. I don’t want to keep interactive status. I want to reset my component variant status. For example I have switch toggles. I click to on my switch and I am going to other pages, and then I am going to this screen, my switch still active. I don’t want to this. I want to reset status. Is this possible?


I have a video below 👇





Guessing no update on this yet? Would be great to sort this


Reply