Adobe XD: Animations

Matt Ward, Product Designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
11 Lessons (47m)
    • 1. Intro: Adobe XD Animations

      0:43
    • 2. Sign in: Basic Animations

      5:02
    • 3. Sign in: Text Animation

      5:31
    • 4. Sign in: Pressed Button State

      4:11
    • 5. Inbox: Repeat Grid & Scrolling

      4:43
    • 6. Sent: Repeat Grid & Button States

      3:19
    • 7. Compose New Email: Overlay & Button States

      4:07
    • 8. Settings: Slider

      8:13
    • 9. Receiving New Email: Notification animation

      5:14
    • 10. Receiving New Email: Micro-interaction

      5:57
    • 11. Outro

      0:12
23 students are watching this class

About This Class

In this class we'll be going over the auto-animate feature in abode xd to create animations for our fake email product: Snail Mail. This class will cover a wide variety of animation tips and tricks that can be applied to other UI's. I've included both the "start" and "finish" files for the class, so feel free to grab those and learn at your own pace. See examples of what you'll learn below:

Get the Start file here: Snail Mail Animation - Start

Finished file: Snail Mail Animation - Finished

Slider Animations:

83018dbf

Micro-Interactions:

fd800b32

Text / Mask Animations:

b8c2edfa

Button Presses / States:

50d9b01d