How to set up prototype to close the side bar?

Community Beginner ,
Jan 12, 2021 Jan 12, 2021

Copy link to clipboard

Copied

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

截圖 2021-01-12 下午4.07.46.png

The tutorial I followed along: Create an animated mobile menu 

Views

253

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct Answer

Adobe Employee , Jan 12, 2021 Jan 12, 2021
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 o...

Likes

translate

Translate

Translate
Adobe Employee ,
Jan 12, 2021 Jan 12, 2021

Copy link to clipboard

Copied

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. 

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jan 13, 2021 Jan 13, 2021

Copy link to clipboard

Copied

Hi Jagriti

 

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

 

Thanks in advance!

MengChi

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Jan 17, 2021 Jan 17, 2021

Copy link to clipboard

Copied

Hi,

 

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

 

Regards,

Jagriti Kashyap

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines