.jpg)
.jpg)
This content originally appeared on Envato Tuts+ Tutorials and was authored by Adi Purdila
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.
Lessons
Introduction
1. Welcome to the Course
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.
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.
Auto-Animate
2. Auto-Animating Position, Size, and Rotation
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:
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
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
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:
5. Micro-Interactions in Adobe XD
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
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.
Stacks
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!
States
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.
Plugins
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?
This content originally appeared on Envato Tuts+ Tutorials and was authored by Adi Purdila
Adi Purdila | Sciencx (2022-11-02T06:19:00+00:00) Advanced Adobe XD (Free Course). Retrieved from https://www.scien.cx/2022/11/02/advanced-adobe-xd-free-course/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.