Adobe Xd Animation - Complete Guide From Icons To UI

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

101 Lessons (11h 20m)

- 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

14 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

Class Projects See All

Your class project is to create a mobile app using the techniques that you learned in the course. You can create the same design i did, but i encourage you to add your own images, colors and icons to get your own unique design that you can add to your portfolio and share on social media. . Or, you can create any animation you see in the course using the same elements i did, or even better, include your own, save it and upload to the class i would love to see what you designed! . Have a creative day! Aleksandar

Beginner level

Intermediate level

Advanced level

All levels

Beg/Int level

Int/Adv level

108

Students

Projects

Web Donut

Design products and assets for creatives like you.

Design products and assets, crafted with love for quality and fast workflow.

We are helping creatives from around the world to do more, faster.

Learn more at our website and if you have any questions, reach out to us at [email protected]

See full profile

Skills in this Class:

Wireframing Animation Prototyping Creative UI Design App Design UI/UX Design Adobe XD

Report class

Adobe Xd Animation - Complete Guide From Icons To UI

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