Skip to main content
Participant
Jan 12, 2021 8:25 AM UTC
Answered

How to set up prototype to close the side bar?

Hi, I am a beginner of Adobe XD, and I came across the problem while I was following alone the tutorial on Adobe learning page. I have a problem of not knowing how to close the side bar, I've already set the sidebar tap to previous artboard, but it didn't work. Please tell me what steps did I do wrong, and how can I fix it? Thanks

The tutorial I followed along: Create an animated mobile menu 

    This topic is closed to new replies. Start a new post to keep the conversation going.
    Jagriti_KashyapCorrect answer
    Community Manager
    Jan 12, 2021 10:40 AM UTC

    Hi Meng-chi,

    Thanks for using Adobe Xd. Looking at the image you shared I couldn't understand all your links. But I do get what you are trying to achieve and for that am writing here some simple steps:

    1. Make the humburger menu bar a component(the one that I can see in your home-collapse artboard)

    2. Add a state to the component(make this state look like the menu bar you have in home-expanded artboard i.e bring the rectangle inside)

    3. Go to prototype mode, select the hamburger icon and click on the + in PI. select trigger:tap, action:Auto animate, destination: State2

    4. Now again select the component and in PI components(Main) select State 2. Click on + and select trigger:Tap, action:Auto animate, destination: Default State.

    Following these steps you should be able to achieve your outcome. Or else you can share your file , I would help you with it.

     

    Hope this helps.

     

    Thanks & Regards,

    Jagriti Kashyap

    2. 

    3 replies

    Jagriti_KashyapCommunity ManagerCorrect answer
    Community Manager
    Jan 12, 2021 10:40 AM UTC

    Hi Meng-chi,

    Thanks for using Adobe Xd. Looking at the image you shared I couldn't understand all your links. But I do get what you are trying to achieve and for that am writing here some simple steps:

    1. Make the humburger menu bar a component(the one that I can see in your home-collapse artboard)

    2. Add a state to the component(make this state look like the menu bar you have in home-expanded artboard i.e bring the rectangle inside)

    3. Go to prototype mode, select the hamburger icon and click on the + in PI. select trigger:tap, action:Auto animate, destination: State2

    4. Now again select the component and in PI components(Main) select State 2. Click on + and select trigger:Tap, action:Auto animate, destination: Default State.

    Following these steps you should be able to achieve your outcome. Or else you can share your file , I would help you with it.

     

    Hope this helps.

     

    Thanks & Regards,

    Jagriti Kashyap

    2. 

    Translate
    Participant
    Jan 13, 2021 8:01 AM UTC

    Hi Jagriti, 

     

    Big thanks to your reply, how can I share a XD file on this platform?

     

    Thanks in advance!

    MengChi

    Translate
    Community Manager
    Jan 18, 2021 7:09 AM UTC

    Hi,

     

    You can mail me attaching your file. You will find my mail id on clicking on my name.

     

    Regards,

    Jagriti Kashyap

    Translate