Simple pop up animation tutorial in Adobe XD



Learn how to create a simple popup animation prototype in this Adobe XD tutorial. To start creating the landing page design we explore photography and typeface options for the logo and web typography. We use 3 artboards total to design the popup experience.

Then we switch into prototype mode to link artboards together, use the tap trigger with the auto animate transition, ease in and out, and adjust the timing of the animation to get the effect we want. If you just want a simple pop up animation then you can stop here.

But if you want to make your prototype better, follow along as I create hover animations for the CTA and arrow submit button for the email subscribe form. You’ll learn how to create a hover effect in Adobe XD by creating a component and adding a new hover state.

WATCH NEXT
Best way to learn UI design: https://youtu.be/4Jsa7mI092U
How to create wireframes fast in Adobe XD: https://youtu.be/vozIqevBUNk
How to design a website in 5 steps: https://youtu.be/1gVXI3RomAA


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/
Pinterest – https://www.pinterest.com/themonicagalvan/
Dribbble – https://dribbble.com/monicagalvan
Website – https://monicagalvan.co/

Duration: 00:08:07

source