Skip to main content
Syeds
Syeds
Inspiring
August 18, 2022
Answered

Is it possibly to dynamically change states?

  • August 18, 2022
  • 2 replies
  • 489 views

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.

    This topic has been closed for replies.
    Correct answer AkinGn

    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! 

     

     

    2 replies

    AkinGn
    Community Expert
    AkinGnCommunity Expert
    Community Expert
    August 24, 2022

    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
    Community Expert
    AkinGnCommunity ExpertCorrect answer
    Community Expert
    August 24, 2022

    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
      SyedsAuthor
      Inspiring
      October 18, 2022

      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!

      Atul_Saini
      Community Manager
      Atul_SainiCommunity Manager
      Community Manager
      August 20, 2022

      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

        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices