Skip to main content

Add Animation Using After Effects

Lesson 87 from: Adobe XD: UX/UI Design Essentials

Daniel Walter Scott

Add Animation Using After Effects

Lesson 87 from: Adobe XD: UX/UI Design Essentials

Daniel Walter Scott

buy this class

$00

$00
Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2200+ more >

Lesson Info

87. Add Animation Using After Effects

Lessons

Class Trailer

Getting Started

1

Getting Started with XD

02:21
2

What is UI vs UX

06:19
3

The UX Brief & Persona

11:22

Wireframing Low Fidelity, Type, Color & Icon

4

Wireframing (Low Fidelity)

01:58
5

How Wide for my Website

13:06
6

Existing UI Kits

07:49
7

Working with Type

09:09
8

Basic Colors & Buttons

14:14
9

Free UI Icons

11:45
10

Footers & Lorem Ipsum

05:27
11

New Pages & Artboards

04:20
12

Class Project 01 - Wireframe

11:11

Prototyping a Website

13

Prototyping & Interactivity

08:53
14

Create a Popup Modal

07:57
15

Prototype

02:54
16

Groups & Isolation Mode

02:30
17

How to Use Components (Previously Components)

17:19
18

Production Video - Left Nav

03:52
19

Repeat Grid

05:27
20

Updating Components & Repeat Grids

08:54
21

Prototype Tricks

06:03
22

Navigation Tricks & Tips

04:48
23

Class Project 03 - Components

04:07

Prototyping an App

24

Mocking Up an App

09:40
25

XD App on Your Phone

08:04
26

Fixing the Position

01:01
27

iPhone & Android Status Icons

03:10
28

Production Video - Login

06:45
29

Sharing Wireframes

13:32
30

Recording Your Interactions

03:13
31

Class Project - Wireframe Feedback

01:21
32

Mood Boards

07:43
33

Class Project - Mood Board

00:59
34

12 Column or Grids

04:57
35

Working with Colors

09:02
36

Tricks for Using Colors

06:34
37

Gradients

03:50
38

Class Project 06 - Colors

02:14

Text & Drawing

39

Use Web Safe Fonts

18:00
40

Character Styles

06:59
41

Font & Text Tips Tricks

05:43
42

Plugin Lorem Ipsum

05:39
43

Paste Properties

13:15
44

Class Project 07 - Text & Buttons

02:21
45

Draw Custom Icons

04:13
46

Strokes & Lines

14:28
47

Pen Tool

14:34
48

Drawing Practice

07:15
49

Production Video with Tips

12:27

Working with Illustrator, InDesign & Photoshop

50

Illustrator in XD

09:34
51

Class Project 08 - Custom Icons

01:49
52

InDesign in XD

11:38
53

Pros & Cons for Images

03:58
54

CC Library Connection

11:01
55

Adobe Stock

05:20
56

Free Images

01:48
57

Masking

06:44
58

Photoshop in XD

08:41
59

Infographic

12:12
60

Class Project 09 - Hi-Def Mockup

05:38

APP Design

61

Mobile Phone Mockup

18:08
62

Class Project 10 - Mobile Website

01:24

Placeholder content & Plugins

63

Hidden Features for Repeat Grid

05:17
64

Plugin - Content Generator

04:29
65

Plugin - UI Faces

03:15
66

Plugin - PhotoSplash

04:31
67

Plugin - Copy Cat

03:19
68

Advanced Asset Panel

04:37
69

Advanced Symbols

07:52

Micro Interactions

70

What are Micro Interactions

07:21
71

Button Grow

06:13
72

Animated Image Gallery

06:39
73

Full Vector Change

08:19
74

Class Project 11 - Micro Interactions

05:12

Prototyping Advanced, Voice Interactions & User Testing

75

Time Delay Transitions

04:42
76

Popup Menu or Modal

12:16
77

Animated Mobile Side Nav

03:26
78

Drop Down Menus

03:24
79

Drag Transitions

07:19
80

Number Ticker Scroll

06:51
81

Alexa Voice Commands

09:37
82

What is User Testing

16:53
83

Unmoderated UX Test

12:07
84

Class Project 12 - User Testing

02:23

Pitching to clients & customers

85

Mocking up in Photoshop

09:21
86

ProtoPie

02:40
87

Add Animation Using After Effects

09:39
88

Export Images & Assets

12:56
89

Export Code Using Design Specs

10:49

What Next

90

Class Project 13 - Roar Cycles

10:29
91

Conclusion

05:32

Final Quiz

92

Final Quiz

Lesson Info

Add Animation Using After Effects

Hi everyone check out that cool animation. Okay. A couple of cool things about it is that it's not all starting at the same time, which is one of the things that XD makes you do with auto animate. It's got a bit of motion blur. The easing is nice and it's done in adobe after effects. Now, the nice thing about adobe XD is that it exports to after effects pretty nicely. And if you've got some basic after effects skills, you can do the animation in here. Alright, let's jump in and work out how to connect the two together and do some basic animation like this. Off you go. Cool. Alright, first up, what is After effects? It's a separate program that Adobe makes okay is mainly for motion graphics. So we're going to use it to animate our ui to do our kind of micro interactions that Adobe XD just can't do. This would be an alternative for prototype I prototype is another bit of software like after effects. After Effects is more of a generalist tool though. Use it for broadcast television, speci...

al effects for movies. I use it for motion graphics and animated infographics for things like Youtube, Maybe data visualization at all. It's a real kind of do it. All tools. So if you've never heard of after effects before. This, this is gonna watch this video but it's gonna be quite hard for you just to jump in and quickly do something if you are interested in doing after effects. I've got a course on it. I've got a couple of course is probably the best one is my animated infographics after effects course. So go check that one out. It's a long course. So you can just quickly do it and pop back. But that's how I would get started if I was you. So in extent. So what I'm gonna do is I'm just going to export raw into after effects and show you what happens. And that's going to be really good if you've got some knowledge of after effects reasonably advanced. And then what I'll do is I'll show you how to make it easier and easier. So if you're the newbie and the first bit is like, oh man, that's way too complicated. Don't worry, jump in about halfway through the video will make it easier and easier as we go along. It's weird. It's backwards. But I need to show you how it is by default and then I'm going to show you all the tricks to make it easy. What I've done is I've just made a new outboard for exporting to after effects just to keep it simple. I've got this tile here, I am going to go to repeat grid and I'm going to make a few of them. Okay, wait down here a few more whatever fits in. Great. So to export after fX the initial exports Super easy. You just go to file, you go to export and you click on after effects. The thing to be careful here, it'll export whatever you've got selected. So if you just have this thing selected, it'll just export that. If you have more than one art board selected, it will export all of that. So I'm just going to click on the name of the outboard and say export after effects. And the cool thing about it is it just opens after a fix on your computer, Okay, If you've got it installed and so it's just doing in the background, it's not even asking just humming away in the background and hopefully in the second there it is there. That's quick. Okay. You just opened it up in aftereffects and if you're new to it, you might be like Holy Smokes, look at this. So we'll make it easier and easier as we go along. If you're a seasoned aftereffects. Usually we're like, that's pretty cool because what it's done is it's brought in my art board as a comp. Okay, that's what After effects calls outboards, comps here are all the things that are in it. All the images. There aren't any more symbols. They're all in a nice little folder and we can start animating this. I'll just quickly describe it for the people that are good at after effects. You'll notice that symbols come through as comps groups come through as parented. So this is the group and these guys are all parented to it, which is super cool. But it can be a little confusing. The main one is the repeat grid comes through as a separate comp. What's also cool is all the text is editable. So here you can see I can double click the text. I can put in different text. Okay. So it's not all just kind of stuck in there. It's not just kind of passed over a demographic, it's all very dynamic and editable. So I'm going to undo undo undo and if you keep on doing it after effects, it'll just get rid of everything. I'll show you how to make it the easiest possible way to bring it into after effects if you're like I am okay and after effects, if I if we make it a little more simple. So what we're gonna do is we're going to do lots of grouping so we're going to stop this repeat. Good. We're gonna group it or remove the repeat grid. So now it's all these little units. So groups are bad if you're new because we saw before it brings through kind of parented child lists. Actually let's not get too confusing then let's make it super simple. Let's start again. Start fresh. So the best way to get them across from XT to after effects is symbols. It's not gonna make that a symbol, not a group, not bits and pieces a symbol. So we can go to our symbols library where our assets panel find down here, go to symbols plus give this a name. This is going to be my tile one and work your way through. So this is where the shortcomings come in handy. It's command K on a MAC control key on a PC. Okay. And that'll convert to a symbol. I'm going to name them all in the second. Come on. Kay come on. Kay and I'm just going to delete actually I'm gonna delete all of these ones just to keep this tutorial simple You can see here tile one this is tile too shift tab is a nerdy shortcut that I use to go up instead of having to double click on it with my mouse top four. I have a tire four. I don't, I didn't use it did I? I'm gonna be in it. There you go. So 123 and what I'm going to do because I'm not going to animate any of this. I'm just going to make it one giant symbol. Okay. It's going to make our graphics look a lot Tidier. We're going to give it a name. We're going to call this one. The hitter. I can't think of a better name at the moment. So the only things on this that that that, that I'm just checking by dragging it off. The other thing you might do before you bring it across is make the order of this Nice. You can do it by going to your layers panel working on this fella here and you can see tile threes at the top which is kind of weird. I want tile one to be at the top title too, so it's not to do with the symbols order. It's to do with this layers so click inside of it on your layers tab and just get them in the right order. Alright, let's click on the outboard, let's export to after effects now we can animate it. Hopefully let's look at that layers panel in after effects. It should be a lot prettier now. Alright to zoom out, you can see here ah that's so much easier to deal with voice trigger. Is that thing we hid. Okay um in an earlier tutorial between the eyeball orphan it we don't need it here. Remember we were asking it questions if you are new, you can get inside these tiles so I can dive inside the tile. Okay. To see all the little bits and change it, you can see here. I've got my first camp and the second camp, I don't want to go in there for the moment. I'm supposed to be on my regular old main art board comp and I'm going to do some real basic animation. So what I'm gonna do is I'm going to select these three. I'm gonna hit my peak. E this is where we're getting into a little bit of after effects so Peaky is position, I'm going to set the stopwatch here and I'm going to start them just off screen Then after a few frames kind of defaults to a minute, which is fine. I'm going to do it after maybe 40 frames and I'm going to drag them in that will animate them all at the same time. Play it back to here, hit space bar on your keyboard and they'll slide in which is kind of cool. But what I really want to do is offset them. And this is the thing that XD can't do, I want that one to start first, then this one a little bit later and then this one a little bit later. So when I drove my play head back space bar, we've got animation that doesn't all start and stop at the same time, which happens with auto animate and the other things you can do in after effects. That makes it real nice is the couple of them when it's easing. So I'm gonna click on all of these key frames, make them all go blue. Right, click any one of them got a key frame velocity on this side. I'm gonna set it to 75 on that side. I'm going to send it to 75 and watch this. They're just gonna look nicer when they come in. You see the the easing is a lot nicer. The other nice thing you can do is the motion blur. So you turn it on for the comp and then you turn it on for each of the layers. Okay that we want to animate these little dots here, give it another little space bar here and it kind of blurs while it's moving all looks very nice and gives you a kind of a more convincing real life. And by real life, I mean digital, real life. Anyway, anyway, you get what I mean, just give it a little bit more inertia and just looks nice. That was kind of a weird tutorial. Right? I gave you the hard stuff first, get a bunch of layers that come through after effects, tidy it all up, make it symbols, n X T, a couple of other things you can do. Let's say you want to do this art board and then you want to animate it into another one using cameras and lights and all sorts of cool after effects things. I'll show you how to do it. So basically just leave this open. It's called an untitled project at the moment. You should save it but an XD if you say, okay, now I want to work on this other project, let's say this one here, we use our export to after effects and because it's just open in the background, see this there's that first comp, here's the second one, it's come through and you can just keep dumping them in here and start animating between them. Text is editable. Nice layers. Alright, so that's the quick version of exporting XD to after effects. You'll need some after effects skills to go off, find a course doesn't have to be my one. Get your skills up in here because you can do some really pretty things and after effects to make things look realistic, but you just can't do it in X. T at the moment. All right on to the next video.

Class Materials

Bonus Materials with Purchase

Six Completed Files
Exercise Files

Ratings and Reviews

Haseebullah Johar
 

Thank you, Dan Scott, for providing such a beautiful Adobe XD course. I completed the course today and noticed a couple of things that are missing. I want to share them here so that you can upgrade the course, which would be helpful for us. Hover state and toggle state. Dragging pages from 1-2 to 2-3 and then back from 3-2 to 2-1 with dragging is not working. Another thing is that we learned scrolling the website from top to bottom, but scrolling or pushing things from right to left has been completely omitted. These are the things I have noticed, and I would like you to upgrade them so that we can improve our Adobe XD skills.

Student Work

RELATED ARTICLES

RELATED ARTICLES