Adobe Xd Animation - Complete Guide From Icons To UI

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

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

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

464

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

Transcripts

1. Class Intro: animating you. Re white design is important because it shows you're thinking process better than 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 X'd is simple because the app is free, easy to learn and all in 12 Hi there. My name is Alex and Discourse. You learned differences between nations how toe animate icons, bottoms, forms, text sliders, Sharp's effects and more than apply that knowledge to plan, draw and create wire frames at images, icons and shadows. To create a design. Use the techniques you learnt to create prototypes. Share the work with your clients to get feedback and finally, how toe export your assets. For developers, this course is for everybody, whether you're just starting out or you are a pro looking for some extra tips in Adobe X'd . I hope you're ready to learn Adobe X'd in awesome animation features. It has to offer, and I'll see you in class 2. Class Introduction: Hey there. And welcome to the course. My name is Alex, and in this course, you will learn everything you need to know about animation inside off Adobe X'd as well as how you can share that animation with your clients as well as with your social media following. So what we're going to do in this course is we're going to run through 60 different videos with 60 different effects in eight different categories. So we're going to go through icons, bottoms, form texts, image sliders, charts, effects and other effects that you can easily then apply to our your design work. Now how this all looks like, let me quickly show you. So we're going to go through icons and you're going to get an eggs defile separate file for each of these different eight sections. So, as you c