Is it possibly to dynamically change states?

[Syeds]

I enjoy the challenge of creating all my interactions on one artboard whenever possible. I cannot figure out how I can create a state that resets itself when clicked off of itself.

For example, I have a box visible in the "show" state. When it it cliked it is closed in the "hide" state. These child states are nested in a component with two states "A" and "B". The child states "show and hide" are only in parent state "B". I would like to go to state "A" in the parent and come back to state "B". When I return to "B" I should see the "show" state of the child whenever I select it.

Instead what I am experiencing is the "hide" state. Since I previously closed it it is not it is not in the "show" state when I return.

If this is not possible I can just create seperate artboards and make it work. Thanks.

[Atul_Saini]

Hi Syeds, 

Thank you for reaching out. I admire your interest in exploring component states. Right now, the workflow that you have described will be best suited to multiple artboards. However, I'll leave this open to our community experts to see if they have a different opinion. 

If it is ok with you, we would love to see some of the outcomes you have created using component states on a single artboard. Our community will get inspired and appreciate your skills. 

Have a nice day!

Thanks,

Atul_Saini

[AkinGn]

Hi @Syeds, I'm going to try to simulate the component structure you described (as much as I can 😅) and going to update you and share my findings ok, looks interesting!

Edit: Checked some and I couldn't find a way to do it in the same artboard, tried to mix tap and keys triggers since I couldn't think of any other way for multiple triggers on the same state 😅 If you investigate this further and come up with any solution please let us know, happy creating!

[AkinGn · Accepted solution]

As I see it, the only way of achieving that is, instead of using a nested component, using "show/hide" box as an element that can reach to parent state, as you know you can only reach the parent component's state with an element, not a component. You can see the prototype video here: https://www.youtube.com/shorts/9NUC2n1q9G8
 and the file here: https://www.dropbox.com/s/p0g85fgdkrgvir0/component-state-change.xd?dl=0 

I use keypress "B" to go to state B when I'm on "A" btw, as you'll see when you examine the prototype section in the file. So state "B" has two versions: one with the "shown" state of a box and one with the "hidden". I always go to the B's "shown" state from the A. Adding a screenshot of the component's state structure also. Hope this helps! 

[Syeds]

Sorry, I missed this somehow. But thank you very much. I did not explore it further but I will kep your solution in mind Thanks again for maing it seem simple but powerful!