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
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

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