Hover effect Adobe XD tutorial

Published: 19 May 2020
on channel: Monica's Design Process

23,971

309

Join my newsletter ➡️ https://monica-galvan.kit.com/newsletter

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:    • How to do hover effect in Adobe XD | Easy ...
How to create a drop down menu animation in Adobe XD:    • How to make drop down menu animation | Eas...
Adobe XD tutorial for beginners:    • Adobe XD Tutorial for Beginners

---
LINKS

Want 10% off Field Notes? Use code MONICA10 https://fieldnotesbrand.com

Present your designs and artwork in a professional way, check out the Modern Frame Mockup Bundle: https://monicagalvan.co/mockups

Need help wireframing? Check out the Wireframe Kit: https://monicagalvan.co/wireframes

Try Skillshare free for 1 month: https://www.skillshare.com/r/user/mon...

---
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 –   / themonicagalvan
Website – http://monicagalvan.co/

On this page of the site you can watch the video online Hover effect Adobe XD tutorial with a duration of hours minute second in good quality, which was uploaded by the user Monica's Design Process 19 May 2020, share the link with friends and acquaintances, this video has already been watched 23,971 times on youtube and it was liked by 309 viewers. Enjoy your viewing!

90,441

934