How to Create a Button Hover In 2 Minutes - Adobe XD Tutorial
Вставка
- Опубліковано 23 гру 2019
- New Videos Every Tuesday & Thursday!
Have a Great Day! Join the Notification Squad: click the bell 🔔
Subscribe: ua-cam.com/users/CalerEdwa...
Learn UI/UX Design and Adobe XD 👩💻👨💻(60% OFF)
Learn: www.udemy.com/ui-ux-design-us...
Join the channel and become a Member ❤️
Get exclusive content from me and help support the channel.
Join: / @caleredwards
SOCIAL: @CalerEdwards 💙
Dribbble- dribbble.com/CalerEdwards
Instagram- / caleredwards
Twitter- / caleredwards
Behance- behance.net/CalerEdwards
Website- caleredwards.com
Hangout on the Discord server! 💜
Discord: / discord
▶ Programs I am Using: Adobe XD
▶ Music: Epidemic Sound 🎹
In this video we will create a button hover effect in Adobe XD in 2 minutes. This quick style tutorial will showcases one specific feature like hover effects. This effect is possible thanks to the build-in hover state in Adobe XD's component states. Enjoy the video :D - Розваги
this is what everybody who calls himself/herself a youtuber must do. direct to the point, good tone, good presentation. well done dude. (thumbs-up)
I'm a career UI designer in games, and I've mostly ignored XD until pretty recently. I'm ramping up on it now, and I found your video very helpful. While I'm extremely familiar with Photoshop and Illustrator/design in general, I'm thirsty for videos that move quickly to the features I want. Your video title and format were absolutely perfect for my use case. Thank you!
Needed to replay the hover edit state part around 10 times I think, because i've never done anything like this before and it was a little fast. But at the end I managed to do it! Thanks for the video
I love it. I was looking for this specific tutorials and some of the videos on youtube are 15min!!! 🙈 This is perfect - short and sweet and right to the point. Please post more
Extremely helpful when exploring micro interactions before development using webflow
That's great! These kind of short videos are really gonna help people who need tutorials of new/specific functions. And you made them so easy to understand. Thank you and happy holidays!
Thanks for the great feedback! Happy Holidays :D
so direct to the point and yet explicative. Your the best out there love u
Always appreciative of your tutorial vids. Thank you Caler and Happy Holidays!
Thanks so much for this. I followed along and got it done. Small progress but still learning XD
So you posted this video a while ago but today I used it to make my first Adobe XD project and I really liked the video, helped me understand it a lot! Hope you make more of these!
Thanks I like this format of a 2 minutes video, short and to the point.. merry Christmas and happy New year happy holidays 🎄🎉😎
Very well made! A question from someone just getting into Xd: How do I prevent the invisible mask area from being a hover trigger? Say I want an image to expand into a larger version of when hovered, but I do now want to enlarge the image when I hover the part of the screen where it will 'end up' while hovering. (there are other elements besides the area, so I don't want to just enlarge the image by itself as a hover state)
Thank you, this video is the exact specific thing I was looking for!
That is dope, I love it! Thank you for this demo!!!
Love this format! Keep it coming :)
Please make more of these micro interaction videos. Love you man.
That's really helpful and easy to understand how to do. Thanks!
very helpful, short and to the point. thank you!
thank you this was really helpful and your voice didnt make me want to end it all. nice.
if you could make it in 3 mins instead of rushing it, it would be even better. It would be easier with the shortcut written on the video. Thanks!
Hey Caler! Loved the representation! Super Helpful. Thanks mate
thank you! quick and easy, well done!
extremely helpful. Thank you for this.
Thank you so much! It is helpful
Clean! thank you.
Love the short and helpful videos
Love this. you are the man!!!!
Great video once again Caler!
Thank you. Amazing!
It's like Peter Mckinnon's two-minute Tuesdays)) well done
Thanks for the vid! I reference it every time I go to make a hover state in XD haha
Yeah, really useful... thanks. Two min vids are cool 👍👍
Awesome one man, great job.
Amazing! Thank you indeed
Sehr Gut , Danke 💎
Thank you , it's useful
Thank you, man!
loved it !!
That was awesome!
Dudee Thank You soo much 🥺
You're now my go-to guy for Adobe xD
Great vide... never thaught of using the mask layer to create a button hover efx
Right to the point. Thank you for this video !
You bet :D
Yeah, these style of tuts are great!
Awesome! Thanks for the feedback and Happy Holidays :D
This was very helpful!! Please keep making such videos 👍🏾
You got it!
very nice tut
Thanks Caler, this video deserves more views.
BTW, which program you use for recording the prototype that your mouse cursor looks like a transparent circle?
Love it!
Thanks man!
thanks so much!
Thanks!
This is great. Short and simple.
Thank you :D
Love this :)
Great video ! Would love to see a tutorial on Neumorphism trend x
Very helpful
Keep them coming Caler :D
Will do :D
Awesome! Caler keep going bruh!
Thanks! Will do :D
Perfect
Cool & simple! 👍Great thanks!
Glad you like it!
Very goooood!!!!
thank u a lot
Amazing as always. Happy Holidays. :D
Thank you! Happy Holidays :D
This is cool and would love to see others
Thanks for feedback :D Happy holidays!
Thank's a lot dude you help me out!
Glad I could help!
Very helpful video
Awesome!
So good! Happy Holidays!
Thank you! Happy Holidays to you as well!
Looks great! Thank you! Is it possible to do it with elementor?
maaan i love u so match really
Sounds like soup!!! Rust youtuber lol... I just checked and they both have the same outro music that is funny
Great!
Thanks maan!
thanks
Awesome
Thank you man!
No problem!
You are doing awesome work it so inspiring plz post some more inspiring vedio like this
Thank you! Will do :D
2 minutes is how I want ALL my demo/tutorials
Thank you 🤩
No problem
I made the mask, but when you did that the sidebar area on the left changed to allow for edit of the button, but mine didn't and I don't know how to get that
very cool
love the 2 mins feature
useful
Hi! I like it very easy to understand! Can you show how to do a slider gallery? (not carousel). Thanks!
This is awesome.. Sir i have one problem, my lightning storm export kit plugin isn't working its saying update before using but there site not working properly and i can't login on it... Sir i want latest update of lighting storm export kit if you have then upload please
Crisp!
Hey man, can you write the commands you use in every step either on the screen on in description box.
Nice
thx :)
Is there a way to do a double hover? Like if there is a drop down within the button, the dropdown will have a specific micro state. I'm trying to replicate Zoom's mute/unmute button with an up arrow that opens a menu. When I'm hovered over the mic icon, it highlights the button and when I'm hovered over the up arrow within the button, it keeps the whole button highlighted but the arrow gets even more light.
Make more videos like this!
I never knew this feature was there. Omg. I've been doing it wrong this whole time
That's new feature is great
How to save these Animation In ur desktop from
Adobe Xd ?
That's cool
Thank you :D
I was good to the point of the default state, I see you have layered everything on the left and its not really mentioned so gets abit awkward when selecting what to hover
ua-cam.com/video/VOZZkrSOsGg/v-deo.html
Does this work for phone app prototypes?
Can you do this with css?
how do you make the button cickable? when i try to add the hover and then make it clickable the hover state disappears
Question, now that I have it done in XD, how to I translate this to CSS?
Love the video, just wish there was more of a "why" component to it. For example, why did you have to resize your text twice down to 12, then back up 20?
on the preview of the prototype, notice the Let's Work Together text animates from smaller 12 to the larger 20. The change in size created the effect.
@@kylebaxter3456 Awesome thank you for your video and response sir!
Amazing! How did you change your cursor to a white circle?
Thanks, and when you preview the design on Mac the cursor changes to that automatically.
what if the component master on the right side doesn't show up?