Adobe XD Tutorial | Smooth Slide-Out Menu
Вставка
- Опубліковано 26 лип 2024
- This Adobe XD tutorial will demonstrate how to create a smooth slide-out menu, using the auto-animate feature.
Download assets: www.dropbox.com/s/wwhk28fk0m6...
⭐️ Master Adobe Illustrator and unleash your creativity!
View course: www.dansky.com/courses/the-ad...
Get 15% off: academy.dansky.com/opt-in
🤝 Get professional guidance with a 1-2-1 coaching session!
Book here: www.dansky.com/coaching
✅ Download unlimited photos, videos, fonts, brushes, music, mockups, icons, templates, UI kits, and much more!
1.envato.market/q5nq
💻 My design tools and studio setup
Apple MacBook Pro laptop: amzn.to/45jnzIK
BenQ PD3225U monitor: amzn.to/4cnyjdh
Logitech MX Master 2S mouse: amzn.to/45eCjIP
Wacom Intuos Pro tablet: amzn.to/45gXWIq
Sony A6400 camera: amzn.to/3ZCnjTQ
KRK 6400 headphones: amzn.to/3LJ7KEe
Shure SM7B microphone: amzn.to/3rIUclg
Elgato Wave microphone arm: amzn.to/3RHvrAM
Godox studio light: amzn.to/3RIhoL3
IVISII G2 RGB light: amzn.to/468h1xQ
Some links may be affiliate links for products and platforms that power by business. I make money with these which helps support the channel, so if you do use them, thank you for being awesome!
Wow. All the littles animations just make it so beautiful ! Everything is in the details...
naming your components is essential! I thought the default "group 1" name on both artboards was enough, but I had to give them a unique name to make it work. Thanks for the tutorial!
Love your videos man! I've learned a ton by downloading project files and following along. One thing I noticed about the project files on this one...the animations and all the work you do in this video was actually all already done upon opening the file for the first time. It was interesting to see it all put together, but just wanted to point that out.
Thank you for the tutorial. I'm learning how to use Xd and your tutorial have been helping me a lot.
Nice shades! Thank you for the tutorials! :D
Thanks, that's an amazing tuto!!!
From Dansky to DankSky. Love you brother~
Looks great as usual! Thanks
So simple and informative information, thanks man :)
OMG, This is freaking awesome.
It’s really cool! thanks for this tutorial
Thanks! Amazing tutorial, I love your work
Thanks so much Beryl 🙂 This tutorial may also be useful for keeping layers/groups on the correct artboard ua-cam.com/video/wHYhKofSSgo/v-deo.html
simply amazing............you never fail to impress me
Love this tutorial! :)
Very cool and subtle, sir!
Great video! You mentioned possibly using overlays. What are the pros and cons with using overlays vs different artboards? And what would you use personally only use overlays for?
I know how to do this but for some reason when you do it, it's 100 times better lol
relatable hahaha
Amazing tutorial, thanks! :D
you never fail to impress me
Thank you so much. Hope more video from you!
great vid!
Superb!
Perfect!
Awesome bro.. Thanks
Определённо, видео оказалось полезным. Раньше, чтобы создать анимацию интерфейса, я заново создавал экраны. Надеюсь меня поймут пользователи Adobe XD. Оказывается можно делать так, как Данский) Спасибо!
Beautiful
This helped so much 😭
Dansky is very smooth and creative designer ✨
Ya adamsınnn tam da bunu yapmayı arıyordum
Thanks Danksky. I enjoy your videos.
Glad you like them!
Excellent 🤠
Im in love
Thanks Dansky
I loveloveloveloooove it!)
Thanks you
Cheers Kate :)
i love this video
Thanks Dansky! Sleek tutorials and 'xtra' sleek glasses :) Where can one get those?
Wow. It's amazing. Thanks😀
Thank you too!
Legit bro 👌
Awesome
Great tutorial! but i have one question, how to apply the slide out menu animation to multiple artboard? do we need to make it one by one per artboard? btw, Thank you for sharing!
It's better to change shadows' opacity in Store artboard, coz it visible when menu outside of the screen! Nice job!
Dope shades
Simply superb...
Cheers Varun!
You are good teacher
Super trendy!
Can you do a video of how to do this with multiple moving parts. I have a sidebar that moves up and down but I also have a bottom bar that does the same. They conflict with each other and I can’t figure it out
Hi Dansky, Great video :) I would like to ask you how to work when you have many artbords connect to the main one. For example application with A list, details about one from The list and some kind of menu. So about 4 views thats are Connect to the "home" page. Thanks for help and keep The good work :)
Where did you get that glasses ??? Please... I love it
Is they a way to Crete horizontal scrolling navigation in adobe Xd like Facebook groups while keeping rest of content page the same
🔥
Is there a way around having to create the menu artboard since there's states now?
Please include a preview to the effect at the start of the video so I know what the effect is going to look like
Is it possible to do the same if the fly-in menu is a overlay instead?
Thank you for the video. I am trying this tutorial for the Web version of slide-out menu. The placement of the elements outside of the screen does not do the subtle trick. How shall I overcome this?
Is there a way to do this to multple pages, and prototype- all the buttons in a menu only once or do you have to link every button on every page with the slide-out menu?
Awesome! how can I add this feature to each artboard of my design?
Exactly what I'm wondering - if I'm creating a full prototype then I want this to happen on any page / artboard with the menu icon. This vid only demonstrates the interactions. between these two specific artboards. Very helpful still, thx!!
Thank you so much for these great tutorials! JUST AMAZING! It's been 3 years since I follow your videos and man you have inspired me so much that I have created my own channel and been producing videos about UI UX using Adobe XD! It would be amazing if you check them out. 🙏
Again I appreciate your great content, keep the nice work coming please!
gr8 tutorial! can i take such skin to 3Dvista? how to do that?
Thank you for the tutorial! One question, how are you keeping the objects as a part of an artboard when they are off the artboard? I tried to do that with my own files and couldn't get that figure out.
First, make the prototype of the hamburger menu icon to the 2nd artboard and only then make the "off artboard elements, etc."
Sorry for my eng xd
did you find a solution to this? every time i try to move the slide in menu group to the edge outside the art board it just takes it off the desired art board. I want to keep it within the same art board. Just outside the area of the view.
I wanted this video .
Jolly good Niranjan 😊
when I link the 2 artboards to each other ( 2:42 ) I don't see that menu that pops up where you have to choose 'auto animate'
Every time i try to move the slide in menu group to the edge outside the art board it just takes it off the desired art board. I want to keep it within the same art board. Just outside the area of the view.
when I moving screen with left-right arrow it's not working in adobe XD window 10 what a problem can solve.
plz link to installed this softwer
Hi Dansky,
Can you please show us how to make a "screen-shot" effect animation in XD? This is something I haven't been able to find a tutorial on youtube.
There is feature in my app that allows the user to screenshot any region of the screen . I am trying to make an animation and show it on my prototype.... it would just look like when you try to screenshot on an Android phone, but instead of screenshot the entire screen , I want to select a certain area. And a pop-up window with show up follow by the screenshot action asking you where you want to save the picture.
I would really appreciate if you can help me out! Thanks in advance!
Dansky! nice look! Where can i buy the same t-shirt?
Hey thanks Yasya! The merch available on my Teespring store should be displayed just under the video description 😊
I cannot get auto animate on my two art boards. I pasted the (translucent) content on the second artboard, but when I click on the X, it does not slide like yours. I connected the two artboards and all, but I just don't get the same result. I tried connecting elements in other artboards, the only thing that happens is fade in and out. Help!
Hello this is only for presentation correct? and the menu can't be sticky
@dansky I have a problem. When I move the menu to the outside, it end up belongs to the pasteboard instead of the same artboard... is there a way to solve this? sometimes it works sometimes it doesn't. Not sure what went wrong here
Hey Jospeh, check out this video here explaining how to get around this issue :)
ua-cam.com/video/wHYhKofSSgo/v-deo.html
I need those glasses D:
He's definitely high af lol
Great vid. Question, I can't seem to make the dissolve (that you mention is the "default" auto-animate effect at 3:38 into your video) go away when switching art boards. Any way around that?
Hey Xtine, are you trying to remove the dissolve effect, or trying to get it to play when transitioning to another artboard? Sorry if I misread your question! The fade in/out transition happens by default if a copy of the same layer isn't present on the artboard being transitioned to. For example, if an image on Artboard 1 isn't present on Artboard 2, it will fade in/out by default. However, if the same image is present on Artboard 2, Adobe XD will animate any changes to the size, position and rotation etc. between the two artboards.
@@ForeverDansky Thank you! You just gave me the info I needed. I am wanting to remove the dissolve effect. I needed to make sure all layers are on both art boards. That's the bit I was missing.
♡♡♡
👍👍
nice glass
I want this t-shirt 😍
foreverdansky.creator-spring.com 😊
@@ForeverDansky wow thank you so much ❤️
Hi Mate, I am having issue when moving content folder out from art board it doesn' t stay there and going back to pasteboard. It only works if I move individual items from the folder and leave one behind. Any suggestion???
same here, sometimes it works sometimes it doesn't
Heya, when I nudge my content awat from the artboard, it just goes 100% opacity and stops belonging to the artboard.... Great videos, btw!
My meny box always goes to the Pasteboard layer and just doesn't go within the Artboard so I'm unable to apply the auto-transform unto it.
when i drag the content in the right side from art board to give animation effect then the content moves out side the art board in paste board. it is no more part of the art board
You have do copy and past
Help pleas.
What to do if the objects are not hiding in the art beard and just go beyond its area?
ua-cam.com/video/wHYhKofSSgo/v-deo.html
Hey, great video! I ran into an issue though - whenever I place the sidebar menu right up against the main artboard (hidden out of view), it adobe xd automatically removes the menu group from the layer panel of the main artboard, unlike in your videos where it remains a part of the artboard but its hidden out of view. This means I can't get the sliding action to work where the menu slides in from the left or right when I prototype. DO you know how I can fix that?
Aha yes this got me too! Set up your auto-animate between the artboards, and then when you move it off the artboards, it will still be part of that artboards layer stack.
Check out this tutorial Arjun 👍
ua-cam.com/video/wHYhKofSSgo/v-deo.html
@@ForeverDansky thanks a ton! It worked :)
Why is it that when you paste elements from one artboard to another, some elements get left on the pasteboard after pasting it over to the artboard? There will be that single button element that is in the pasteboard, while the other elements have correctly been pasted onto the other artboard.
You can try grouping elements together, then copy/paste, then ungroup. It's a little work-around, but typically keeps everything on the artboard you're pasting to, and with shortcut keys can be pretty quick :)
I’m making a PS5 UI god damn thats nice
Hello
Do you pan around With a Wacom pen or you use just mouse.
I can pan around in photoshop but it doesn't work in xd.
Please, help. Thanks
Space bar to bring up the hand tool and then pan around 👍
@@ForeverDansky thank you sir
I have subscribed you long back but bell icon is giving 404 error. Please see to it.
I did everything the same way but my drawer fades in rather than sliding in. Kindly, correct if I did something wrong
Hey there, check the sliding 'drawer' is part of the artboard, and not on the pasteboard. This tutorial may be helpful :)
ua-cam.com/video/wHYhKofSSgo/v-deo.html
@@ForeverDansky thanks, man.
Where can i find the status bar？thx
adobe xd > ui kits
Why do you always copy and paste using the toolbar and not using the shortcuts? Just wanted to know :)
So people can easily follow along, shortcuts in tutorials are often too instantaneous :)
I was trying to follow this tutorial (which is great btw) but I keep getting stuck when you move the objects outside of the artboard to create the push-in animation. Every time I copy and paste my objects onto the second artboard and try to move them outside, they immediately go to the pasteboard. Is there some way around this or do I have something on that I don't realize?
my guess is you have to move them by the arrow keys and not the cursor
lol, that outro
did he just try to (clap) meme (clap) review the beginning of this vid...
I was looking only at you and not your tutorial. Why? 😊
The radiant ginger beard... or perhaps the glasses? Haha 😂
Serious question: can someone tell me how this video is so buttery smooth?
I think this video was recorded at 60 fps using ScreenFlow 7 for Mac. There's also a 'motion blur' setting that you can apply after the screen recording and it simulates a super smooth cursor effect. If you'd like a cursor to actually move like this on your computer, you'd need either a laptop or monitor display that is 120 Hz or higher 🙂
@@ForeverDansky Wow! Thanks a ton.
I thought the XD was an emote lmao
The shield does not "slides down" NO ! 9:35
All this while I thought you were Danish! Hence the Dansk reference. Well I guess not :)
Are you from Denmark?
Now go develop, hehe
Just do it, dont talk to much.. nice share bro
You just Look Like Lionel Messi
@Dansky
that fps tho...
Dansky your tutorials are great but can you please just jump into it instead talking so much at the beginning? i assure you your subscribe rate will increase.