LAUNCHED: State management for prototypes

Forum|Forum|5 years ago
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:

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).
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.
Do both 1 and 2. This solution is my preferred solution 😉 😆

EDIT:
Other threads that relate:

Components, variants and instances

Show previous replies

Regi

Active Member

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.

Josh_Bernard

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

Regi

Active Member

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.

JohnDashiell

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.

JohnDashiell

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.

Motionharvest

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

A

an0mal-an1mal

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

we could choose “reset/don’t reset frame to initial state” option during frame selection in the “Navigate to” interaction
interactions had several actions
Ex: ON TAP → Navigate to Frame THEN Change to State THEN Show Overlay THEN …
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

Baptiste_Deroche

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