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.

Best way to learn UI design:
How to create wireframes fast in Adobe XD:
How to design a website in 5 steps:

Try Skillshare free for 1 month:

Need help wireframing? Check out the Wireframe Kit:


Want me to review your portfolio and offer feedback?

Have questions you want to want to ask me about design? Book a call with 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!


Instagram –
Pinterest –
Dribbble –
Website –

Duration: 00:08:07