Adobe XD: Hover Animations

Matt Ward, Product Designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
11 Lessons (37m)
    • 1. Hover Effects Introduction

      1:05
    • 2. Hover Effects Basics

      0:54
    • 3. Auto Animate Basics

      4:26
    • 4. Creating a Hover State (component)

      4:40
    • 5. Utilizing Layer Masks

      5:01
    • 6. Hover Effects for Text

      3:42
    • 7. Hover Effects for Images

      2:48
    • 8. Prototyping with Hover Effects

      1:37
    • 9. Copying and Pasting Hover Effects

      4:46
    • 10. Creative Hover Effects

      6:30
    • 11. Recap

      1:17
22 students are watching this class

About This Class

In this class we'll be exploring some basics of hover animation effects and how to utilize Adobe XD's new update that supports hover states. 

Beginning file: https://drive.google.com/open?id=1FZKTW7fIveJOTSQEsmBkoraswzIXbEo9

End File: https://drive.google.com/open?id=1rleQGviX-FleHRa3_28VXgQ_JCwVw-ho

We'll be going over the basics of auto animate, the backbone of the hover state effect, to create this landing page effect:

b7e383f1

We'll also be exploring various ways to use hover state and implement them successfully in prototypes like below:

908bee94

How to utilize them in prototypes with overlays:

b93d6369