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

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