Adobe Xd Animation - Complete Guide From Icons To UI | Web Donut | Skillshare

Adobe Xd Animation - Complete Guide From Icons To UI

Web Donut, Design products and assets for creatives like you.

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
104 Lessons (11h 37m)
    • 1. Class Intro

      1:07
    • 2. Class Introduction

      3:19
    • 3. Why do we animate

      0:59
    • 4. Different UI Animations

      4:02
    • 5. Adobe Xd's Prototyping Features

      9:03
    • 6. Icon 1

      3:17
    • 7. Icon 2

      6:04
    • 8. Icon 3

      3:21
    • 9. Icon 4

      4:53
    • 10. Icon 5

      5:11
    • 11. Icon 6

      7:31
    • 12. Icon 7

      5:28
    • 13. Icon 8

      6:33
    • 14. Icon 9

      8:04
    • 15. Icon 10

      7:41
    • 16. Icons Xd File

      1:54
    • 17. Button 1

      9:47
    • 18. Button 2

      6:39
    • 19. Button 3

      10:27
    • 20. Button 4

      6:23
    • 21. Button 5

      5:43
    • 22. Button 6

      5:33
    • 23. Button 7

      9:23
    • 24. Button 8

      4:10
    • 25. Button 9

      6:37
    • 26. Button 10

      5:42
    • 27. Buttons Xd File

      1:41
    • 28. Form 1

      8:15
    • 29. Form 2

      11:00
    • 30. Form 3

      10:57
    • 31. Form 4

      9:12
    • 32. Form 5

      11:13
    • 33. Form 6

      7:06
    • 34. Form 7

      9:50
    • 35. Form 8

      7:51
    • 36. Form 9

      7:04
    • 37. Form 10

      12:39
    • 38. Forms Xd File

      2:11
    • 39. Text 1

      4:44
    • 40. Text 2

      3:20
    • 41. Text 3

      4:49
    • 42. Text 4

      3:20
    • 43. Text 5

      2:58
    • 44. Text 6

      3:13
    • 45. Text 7

      3:43
    • 46. Text 8

      5:34
    • 47. Text Xd File

      1:35
    • 48. Image Slider 1

      7:32
    • 49. Image Slider 2

      7:21
    • 50. Image Slider 3

      8:45
    • 51. Image Slider 4

      6:07
    • 52. Image Slider 5

      9:23
    • 53. Image Slider 6

      7:19
    • 54. Image Sliders Xd File

      0:56
    • 55. Chart 1

      12:07
    • 56. Chart 2

      9:02
    • 57. Chart 3

      6:46
    • 58. Chart 4

      5:09
    • 59. Chart 5

      13:45
    • 60. Charts Xd File

      1:33
    • 61. Loader

      5:24
    • 62. Card Flip

      11:13
    • 63. Article Scroll

      6:07
    • 64. Value Slider

      6:09
    • 65. Search

      10:56
    • 66. Popup

      7:01
    • 67. Parallax

      8:09
    • 68. Effects Xd File

      1:47
    • 69. Value Slider

      6:09
    • 70. Tab Bar

      5:06
    • 71. Side Menu

      6:00
    • 72. Enlarge Image

      5:25
    • 73. Others Xd File

      2:29
    • 74. Design Brief

      9:14
    • 75. Project Planning

      3:52
    • 76. Sketching

      7:50
    • 77. Creating Wireframes 1

      8:27
    • 78. Creating Wireframes 2

      13:49
    • 79. Creating Wireframes 3

      4:04
    • 80. Creating Wireframes 4

      8:31
    • 81. Creating Wireframes 5

      9:50
    • 82. Creating Wireframes 6

      6:31
    • 83. Creating Wireframes 7

      14:34
    • 84. Creating Wireframes 8

      11:29
    • 85. Creating Design 1

      6:37
    • 86. Creating Design 2

      6:44
    • 87. Creating Design 3

      6:18
    • 88. Creating Design 4

      7:33
    • 89. Prototyping 1

      4:09
    • 90. Prototyping 2

      4:39
    • 91. Prototyping 3

      4:36
    • 92. Prototyping 4

      5:10
    • 93. Prototyping 5

      12:08
    • 94. Prototyping 6

      7:16
    • 95. Prototyping 7

      7:24
    • 96. Prototyping 8

      6:20
    • 97. Creating Style Guide

      16:10
    • 98. Sharing With Client

      9:05
    • 99. Exporting Assets

      15:45
    • 100. Conclusion

      2:23
    • 101. Links And Resources

      1:06
    • 102. Adobe Xd Update Components

      6:04
    • 103. Adobe Xd Update Component States

      2:47
    • 104. Adobe Xd Update Component Animation

      7:19
12 students are watching this class

About This Class

a86a79a5

Animating your UI design is important because it shows your thinking and process better then just a static image.

.

Showing your clients animated design is going to help them understand it better and speed up the process dramatically.

.

Animating in Adobe Xd is simple because the app is free, easy to learn and all in one tool.

.

Hi there my name is Alex and in this course you will learn:


* Differences between UI animations
* How to animate Icons, Buttons, Forms, Text, Sliders, Charts, Effects and More
* Then apply that knowledge to plan, draw and create wireframes
* Add images, icons and shadows to create a design
* Use the techniques you learned to create prototypes
* Share the work with your client to get feedback
* And finally how to export your assets for developers

.

This course is for everybody, whether you are just starting out, or you are a pro, looking for some extra tips in Adobe Xd

.

I hope you are ready to learn Adobe Xd and awesome animation features it has to offer, and i'll see you in class.

.

Have a creative day! 

Aleksandar