Dropdown Menu Animation in Adobe Xd | Auto Animate Tutorial | Design Weekly
Вставка
- Опубліковано 9 лип 2024
- Today we will design some cool dropdown menus in #adobexd and animate them using #autoanimate . We'll try 4 different styles/ideas and bring them to life with auto animate. You can use these in a website design or an app.
👉🏼 Facebook Group: bit.ly/designfbgroup
💾 Adobe XD File: bit.ly/dropdownxd
🎶 Music: Distant Love by Causmic
____________________
🐦 Follow Me on Twitter:
/ punitweb
🗒 Follow me on Medium:
/ punitweb
💈 My Behance Profile:
www.behance.net/punitweb
#designtutorial #webdesign - Навчання та стиль
I'm a total newb to XD. Thanks so much for this tutorial. I'll definitely be checking out more (already subscribed).
Thanks punit 😊 I keep learning new cool stuff on xd thanks to you
I tried it out and it came out pretty amazing ✨😊
i really really enjoyed this one . it was so cool and useful . thanks
I love the colors you've used for your design.
Keep up the good work♥
Thank you so much!
Thank you so much. Great tutorial
Thank you so much!! I was struggling with some homework, but thanks to your video I could solve it
I'm glad I could help you out! Keep watching for more
That’s something creative ♥️👌🏻
I Found your channel yesterday and your videos are too interesting ...and I love the way you say "PERFECT"
hahaha, thanks a lot! Keep watching
Thank for this video ♥️
thanks bro it's very useful guide for beginners
thanks for this great video
This tutorial is gold! Thanks a lot!
I'm glad you liked it Amanda! Keep watching
Super cool work man! Cheers
Thank you! I appreciate it. Keep watching!
I really love you how to arrange color in different sections
Thank you ！
You're most welcome!
How to use them in other artboards as animated icons ?
is it neccessary to like make the mask layer into small parts? if we dont do this isnt the chance of the animation getting pixelated much less?
hi punit wassp. I need your help on set matte effect in AE
why the object used in this effect gets misaligned every-time
thank u so much :D
how did you get the arrows for each menu to turn up and down? im trying to do the animation for that but im struggling :(
Wow super nice tuto!! 👍.....Ux and Ui 🔥.
Erick Sarmiento thank you! Keep watching
You're actually really, really talented bro, your creativity is hard to miss
Thank you once again!
This tutorial is very helpful! Thanks man! 👌
Most welcome Cedric! I'm glad you liked it
@@PunitChawla looking forward for your next tutorial. 👌😁
Great Tutorial. Keep it up !
Thank you! Keep watching
Many thanks!
You're always welcome!
This is amazing UI 😍
Thank you!
Hi Punit please tell me where is the component in this adobe XD in which you are showcasing the dropdown menu actually I have this version of Xd please tell me where I can find the component so that I can make my icon hover
Great Jobs Really Nice
Thank you! Keep watching
after i design and animate my web site how to extract that animation
Thank you so much
You're always welcome!
hey man, the link to get the file not works, can you check it?
Thank you.
You're most welcome!
hello sir where is xd file
its don't open
Can we export it to android studio
How to do handoff for this kind of animation??
how do you make a scroll option when you have a drop down button
Combine this tutorial with this one 👉🏼 ua-cam.com/video/PV3Dd-saJsw/v-deo.html
so say if i have a home page, how can i use these drop downs on athat homepage ? do i connect the whole home page . artboard to the 2nd artboard which would be a duplicate but with the resolved animation or the 2nd frame of the animation ?
You'll connect it with the second art board which has the desired changes.
@@PunitChawla i did so i made a homepage which scrolls and is say 1920x4320, now i tried making a carousal and a drop down but every time i click the whole page moves, is there a way that i can only the selected item make the movement ?
@@PunitChawla and thanks for replying, really appreciate it
Thanks love from London Puneet! Is it possible to reuse those dropdowns on a xd on personal project ? Simillar to templates!
Yes! You can create components and then apply animations to those. I've done videos on component animations
It's not possible to mask it with a repeating grid.
How pass to html/css?
I don't have an apple computer so how am I meant to do the command key ?
Use Ctrl ( control key ) instead
Hi Punit! I am doing the minimal dropdown menu and am having trouble hiding the portion where you have your list. The shortcut key is Command + ;. Is there another way to do this because it is not working for me :(
I had the same problem, I'm on windows and was pressing Shift + ; but it turns out it is just Shift + , therefore Command + ,
I know I am 3 months late lmao but I hope this helps someone
download xd link not working
Hlo sir i like ur videos ...
But i have a question that whatever we design in adobe xd , can we use the animation that u create in a real website
The best way is to export to after effects and then use a plugin like Bodymovin to export for web. - aescripts.com/bodymovin/
Punit Chawla
Thank you for your advice
Pls also make some tutorials on this topic
Loving ur work
Thank you 😊
Right now i am learning web development and i love xd
But don’t know how to make dam nice animations for the website
Pls help 😊
Long way to go... Sometimes you better stick with XD only..
If you want to learn, learn Bootstrap.
Thanks for the tutorial. Could you please also make a tutorial that explains how to make a dropdown-menu that allows the end user to select different items from the list?
Sorry to be so offtopic but does anybody know a method to get back into an instagram account..?
I was stupid lost the account password. I would appreciate any tricks you can give me.
@Alonso Ibrahim Instablaster =)
@Kash Julius I really appreciate your reply. I found the site on google and I'm trying it out atm.
I see it takes a while so I will get back to you later with my results.
@Kash Julius It did the trick and I now got access to my account again. Im so happy!
Thank you so much, you saved my account!
@Alonso Ibrahim glad I could help =)
Great! Thanks.
But this is just an animation.
If only XD had appropriate features for the desktop app prototyping....
Still waiting for the mouse hover state (at least)
Adobe might just surprise us in December - with an awesome new update
@@PunitChawla hope so too
@@PunitChawla Now that Adobe did release hover interactions (Nov 2019), how can we trigger these dropdown menus upon hover of the button? Thanks!
@@mask207 I'll make a video on that soon!
I just didn’t get the command to hide the element. What’s is the command?
Command +, (comma) or ctrl+, (comma)
Hello& can you tell me how to convert text to path in xd???
I make double click on text and nothing happens. Just edit text only
Hey, sorry if it's too late, but when you select a text, just go to Object>Path>Convert to Path (or just click Cmd+8) :)
thank you for your video
a French subtitle would help me too
what is "command column" ?? please need help
Maybe it's ctrl + ,
It's to mask a group.
Please update this to the new version. You don't have to create another artboard to create interactions.
This video is really old. All my new content uses the new update
Needs update for components states. Now zou dont need to switch between artboards!
Yup, Check my newer videos
Mask king
Hahah! That's a great title
Did I miss something? My menu doesn’t really drop down. It just appears when I preview it 😩
Make sure all the elements have the same name in both the artboards. ( the layer names )
Indonesia subtitle please
Hi Punit, I love your videos man. SO simple and very new all the time. Can you make videos of archetypeapp.com/ and alternatives which can help Web and mobile designers to choose fonts and build a design system? Tons of thanks in advance.
separate page for DD lol
Perfect?
Yes. Perfect.
'Cliche countries know what'm sayin' 😂
Hey, i'm born in China but i'am Dutch now.
helo