Advanced Adobe XD (Free Course)

Duration: 1 hour 36 mins | Lessons: 9

In this in-depth course, you’ll become further acquainted with all that Adobe XD has to offer. These lessons pick up from where our basic course left off, guiding you further down the road to Adobe XD mastery.

This course clocks in at just over 90 minutes, and in that time we’ll cover a wide-range of subjects from how to make the most of auto-animate, to lessons about 3D transforms, micro-interactions, and advanced layouts. 


1. Welcome to the Course

Watch video lesson [0:00] ↗

In this introductory lesson, we lay the groundwork for what’s to come. This course covers many of the more advanced tools provided by Adobe XD. Adobe XD is a fantastic app for UI design that you can use to create website and mobile apps. And the best part is the app is super easy to learn how to use. 

I recommend you watch our beginner course before diving into this one!

We’re going to get into greater detail on some of the more advanced tools Adobe XD has to offer—tools that take a little bit more time to get accustomed to. 


2. Auto-Animating Position, Size, and Rotation

Watch video lesson [1:51] ↗

This lesson covers everything you need to know to auto-animate the size, position, and rotation of elements in Adobe XD.

And just a note before we continue: you’ll see more complex uses for auto-animate as the course progresses but everything (everything!) is rooted in the three properties I’ll show you now. 

Throughout this lesson, we’ll be working on a slider like this:

slider prototype in adobe xdslider prototype in adobe xdslider prototype in adobe xd
We work primarily with this slider prototype in Adobe XD throughout this lesson.

And here, we’ll be using auto-animate to adjust the size, position, and rotation of each element within the slider. 

3. Combining Masks and Auto-Animate

Watch video lesson [12:18] ↗

The next part of the course covers how to combine masks with auto-animate and I’ll show you how to create some really cool animations. The focus here is on using auto-animate to create a neat animation between pagination icons in our slider. 

The animation we create will be a smooth combination (and separation) of circles. And this is achieved through the use of masks. We also create a smooth slider bar that can be manually adjusted to make a number value increase or decrease. 

4. Using Multiple Interactions on One Element

Watch video lesson [31:26] ↗

Building on top of what you learned in the previous lesson, here we offer up examples of how to add multiple interactions to a single element within Adobe XD. In fact, you can add as many interactions to a single element as you’d like, so long as you have a trigger established for each. 

In this example, we’ve combined a drag interaction and a tap interaction on a single element: 

multiple interactions on a single elementmultiple interactions on a single elementmultiple interactions on a single element

5. Micro-Interactions in Adobe XD

Watch video lesson [39:16] ↗

Micro-interactions are small animations that are designed to offer feedback on certain actions taken by a user. They offer clarity about what’s going on and can provide user feedback to let them know they’re doing the right thing. In this lesson, we explore some micro-interactions from Dribbble to see how they change and what feedback they offer users. 

Then, we explore how to make micro-interactions in Adobe XD using our new best friend: auto-animate.

3D Transforms

6. Next-Level 3D Transforms

Watch video lesson 55:15] ↗

Now in this lesson, we explore how to create 3D transforms and how to animate them. For our example, we’re animating a carousel that displays images from a 3D perspective then flips them up into a 2D look. 

3D transforms used to make a carousel in Adobe XD3D transforms used to make a carousel in Adobe XD3D transforms used to make a carousel in Adobe XD
3D transforms used to make a carousel in Adobe XD


7. Advanced Layouts With Stacks

Watch video lesson [01:09:14] ↗

The focus here is on how you can use the relatively new Stacks feature to create advanced layouts in Adobe XD. As an example, we use a UI kit to demonstrate how you can use Stacks to make more complex layouts than what is typically possible. 

Basically, you can create Stacks out of a parent element, which will then apply formatting properties to each element within it. It’s a real time-saver!


8. Advanced Components With States

Watch video lesson [01:16:17] ↗

In this lesson, we explore component states, which allow you to create variants of a component and switch between those variants very easily. This tool is super useful for creating buttons or form elements. 

For this lesson, we’re using UI elements to create different versions of the same card. 

component statescomponent statescomponent states


9. 5 Top Plugins for Advanced Users

Watch video lesson [01:24:53] ↗

In this final lesson, we explore 5 plugins that are considered to be must-haves for any XD user. These plugins will augment your experience with the app and will make many tasks easier to complete. This makes it all the more vital to get these plugins setup. 

The plugins discussed in this lesson include: 

  • Rename It 
  • UI Faces
  • Google Sheets for Adobe XD
  • Icons 4 Design
  • unDraw

Further Enhance Your Adobe XD Skills 

Got all that and still want more? We’ve covered a wide range of topics related to Adobe XD in the past. So why not check out one of our many previous tutorials? 

Source link