Hover effect Adobe XD tutorial



Hover effect Adobe XD Tutorial: Learn how to create an underline hover effect in Adobe XD for your website prototype using components states instead of creating additional art boards. Simple and easy xd prototype tutorial!

First, start by designing your hover state, in this case an underline. Select both elements, press Command + K or right click and choose “Make Component”. Under Component press the + sign to create a new hover state. Choose default state and change the opacity of your underline to 0%. Switch to hover state and change the opacity of your underline back to 100%. Toggle between both modes to make sure the interaction looks as you intend it to. Or press play and preview your website prototype in action.

WATCH NEXT
Another button hover effect in Adobe XD: https://www.youtube.com/watch?v=VOZZkrSOsGg
How to create a drop down menu animation in Adobe XD: https://www.youtube.com/watch?v=-uwGY66JQYU
Adobe XD tutorial for beginners: https://www.youtube.com/watch?v=u7JMsA6FeR8


WORK WITH ME

Want me to review your portfolio and offer feedback? https://monicagalvan.co/shop/portfolio-review

Have questions you want to want to ask me about design? Book a call with me: https://monicagalvan.co/shop/consulting


ABOUT ME

Hello! I’m Monica, a designer living in San Francisco, California. This channel is a place where I share all my design and creative side projects. By sharing my process, I hope to help you learn more about design!


SOCIAL

Instagram – https://www.instagram.com/themonicagalvan/
Dribbble – https://dribbble.com/monicagalvan
Website – http://monicagalvan.co/

Duration: 00:01:17

source