Adobe XD Experience Designer CC 2019 New Features!


Hi there, my name is Daniel Scott. And this is the XD 2019 updates. Now I’ve gone through
and kind of curated this… from the most, what I feel is
the most exciting updates… through to some of the
more obscure ones… but to be honest, in XD,
all of the updates are pretty amazing. So it was kind of hard to keep
them in any sort of order. It just is really good. The other thing to note
is that I’ve got… upgrade videos for the
other Adobe products. If they are of any interest to you
as well, check those out. Also, if you want to follow along
with this video, there’s exercise files. There’d be a link on the
page here somewhere… to download those if you
want to play along. Also note that if you are new to XD,
or maybe you’re self-taught… you might want to check out my
full XD course, for my name Daniel Scott… and then XD, and you’ll find me. Alright, let’s jump into the videos. Alright, new feature time, and the first
one is the updated home screen. Okay, not a big update, it’s just,
you’ve got a Recent panel here… which is actually kind of handy,
but pretty typical across Adobe products. Basically it’s here because
of a segue to the second… but really, the first main update,
one of my favorite… is this option that says Add-ons. Holy Molly, I know.
So XD now has opened up the software… so that other people can build plug-ins. And really this is what made, say Sketch. If you don’t know Sketch,
it’s the alternative for XD. And what makes that super powerful is all
the plug-ins that people have made for it. Software is great, but the plug-ins
really help people… work in a production environment. And XD now has it. Before we move on though,
I can’t show you… any of these specific plug-ins
in app integrations… because this is a demo version,
these aren’t all working yet. This is just like an example
of what’s going to be in there. In the version you have in front
of you, these will be different… but there will still be lots of them. I end up having to work with a
testing version at the beginning here. So what I’ll do is, as soon as
the software’s been out for say a month… I’ll do an updated video, so if you
search for Daniel Scott and XD add-ons… I’ll do a review of all the top add-ons. But for the moment you can see loads
of different potential add-ons… that can go into XD to
really help your work flow. These are just the User Choice as well. There’s plug-ins, app integrations,
and UI kits. Let’s have a quick look at UI kits.
We click UI kits, you end up at this site. With the basic UI kits for
Apple, Google, and Microsoft. But down here are some really nice ones
that Adobe have obviously commissioned. Just beautiful, and really complete. In the built-in for XD, which is nice. So, say this one here, Navigo,
Aurelien Salomon – I probably pronounced that right. – has done this one, I’ve downloaded it,
you just download it on to your machine. If you’re playing along
with the exercise files… you’ll see it in here, it’s named UI kit
– Navigo. I’m going to open this one up. I’m showing it to you
for a couple of reasons. One is, look at this
beautiful Assets Panel. Just amazing symbols… great character styles and
colors, all ready to go. If I switch to Prototype
and I select a bunch of it… you can see, all the interactions
there as well. Also what I want to show you is,
where the plug-ins are kept… you can see here, I’ve installed
a couple of demo test ones here. So they’re here, you can click
on Manage or Discover… you basically end up in the same place. So these are the ones that
are installed on my machine. These are all the plug-ins that
are available at the moment. There’ll be a ton more, there’ll be a race
for people making new ones. Companies trying to get in there as
well, and probably lots of people… porting their plug-ins from Sketch into XD. Well I hope you can see in here,
just basic connections with Google sheets. Kind of lame… but, man, I think I rely on Google Sheets
for lots of my life. I use– have a little look through here,
User Testing. Man, that’s my favorite
user testing platform… and a direct connection into
here would be super helpful. Publishing out to Dribble
or say Behance… to get ready for your portfolio or
for getting feedback is really handy. Airtable, if you’ve not used Airtable,
super handy for getting– maybe you can just mock data, but building
your own database for somebody like me… who can do a little bit
of front-end coding… but when it comes to database stuff
it’s just impossible. Airtable is a great way
of working with that… and I use it for building
mock data for my XD mock-ups. Trillo, if you use that in
your production line… there’s lots of cool stuff in here. And there’ll be lots more. So I’m going to wait a month,
then go through and review a bunch of them. So check that out, but really
it’s just a major update… and a major round of applause for XD.
Love it. On to the next feature. The next feature is equally
as amazing as the first one. I’m going to open up a file
in our ‘Exercise Files’. If you’re playing along, open up this one,
‘InstructorHQ UI v5.0’. It’s an actual project that I’m working on,
and I’m going to use for this demo. So what are these auto animations?
Basically just micro interactions. User interface feedback that just helps
the user understand what they’re doing… and to show off how fancy your app is. So I’m going to use this
little login screen. I’ve clicked on the little …
hit ‘Command 3’ on a Mac, ‘Ctrl’ on a PC. I’m going to keep throwing
shortcuts throughout the course… just in case there’s one
that you don’t have already. So what do I need to do? I’m going to hit ‘Command D’,
‘Ctrl D’ to get a second option. And what I’d like to do is,
when this button here… this Login button is clicked… I’d like these to kind of,
this kind of major tab to slide across. So this button here, we’re going to
switch to a ‘Prototype View’… which is ‘Ctrl Tab’, the only shortcut
that works on both Mac and PC. ‘Ctrl Tab’ switches between
Design and Prototype. What I want to do is, when I drag
this over, normally you get– your action is transition, right?
either slides across or dissolves across. Now we’ve got this action
called Auto Animate. And what it’s going to do is, it’s going
to look at the button we had selected. It’s going to try and find Button 2
on both Artboards… and see what’s changed, actually it’s going
to look for everything on this Artboard. So I’m going to say, actually
you’re going to go over there… you’re going to go over there, so I’m
going to switch these two around. Try and line them up. Let’s give it a preview to
see what it looks like. So this Play button here… shortcut is ‘Command Enter’ on
your keyboard, ‘Ctrl Enter’. So when I click on ‘Login’,
it switches them around. There is actually a green button switching
around, it moves over there. Because I want to turn it into a
button now to say, go back to there. Remembers the last thing I do,
so hopefully now, clickety-click. Cool, huh? I know it’s a pretty simple interaction,
we’ll do some slightly more advanced stuff. But I really just wanted to get it
out there, and to say… as long as it’s got the same name,
and it’s the same kind of object… this rectangle is not going to be able
to transform into an image or into a text. So as long as it’s the same thing
and still has the same name… you can do some pretty amazing stuff. Now one thing I want to do there,
is you can see the text is not changing. That works as well. This thing’s got the name of logins,
so does that, over here though… I’m going to switch back to ‘Design View’. I’m going to say, you’re going
to have the gray that I’m using. And you’re going to now
switch to the white. Sees white over here, black over here,
and XD just magically… switches them around, cool, huh? Now there’s no way of adding keyframe… this is the next thing I look
for, like, “Can I do key frames?” Is there an easy way to do it? But really, I don’t know… whoever designed the default
transition stages, man, it’s nice. Let’s do something a little bit different,
or a little bit extra. We’ll look at a couple of different
micro interactions before we move on. What I want to do is,
when this button’s clicked… I would like this area
to kind of zoom across. So it’s called arrow here,
there’s an arrow here. It’s just something I’ve drawn. It doesn’t matter if you’re in
Prototype mode or Design mode… I want it to kind of head off this way. And I’d like it to fade out, so I’m going
to lower the Opacity. So I’m going to make this little arrow,
should be a bigger button. But it’s okay, I’m going to hit
‘Command Tab’ to go to Preview… and I say when, that’s clicked, go to
this one but use the Auto Animate. Preview it, give it a click, disappears. What I’d like to do is, the cross appears,
it’s got handy down the bottom there. This is where I kind of need
to put him on this ending option. And when he’s clicked he goes back
to here and auto animates. But he’s not on this one yet,
so I’m going to click him, copy. And if you click on the top
of the Artboard, when you hit ‘Paste’… instead of just clicking in anywhere,
if you hit ‘Paste’ now… you can see, it just ends up,
like exactly where you put it… which is nowhere near where my arrow was,
I’m okay with that. Going to slide it across
and lower the Opacity. Go back to ‘Design’. Opacity down. It’s not beautiful, but you
get the idea, right? It’s in the total wrong spot. And you can do cool things like this. Over here, this one here
now is red, there you go. And because these– this rectangle has
a crazy name, but it’s the same crazy name. This one, preview it, across.
Ah, so good. Can you offset the easing? Not at the moment, or at least
not a way I can work out. Let’s look at images now. Looking all right, zoom out.
Where is my Images 1. ‘Command 3’, ‘Ctrl 3’ on a PC. So I’ve got just some basic images
that are thrown in here. What I’d like to do is,
they’ve got names… they’ve actually just come through
from the names of the JPEGs. I bought three, shouldn’t actually
have to specifically name them. ‘Ctrl D’ or ‘Command D’
on a Mac to duplicate it. And what I’d like to do
is I want to make all of… you… a whole bunch smaller. Now what you will notice is… it’s a feature we’ll look at in a
second, this Responsive Resize… is going to kind of– it won’t shrink
them down, it’s really cool. If you hold ‘Shift’ while you’re
doing it you can override that… that option.
I’m just going to… do a quick stack. And you’re like, “There’s no way
this is going to happen”… and I’m like, “Yes, it is,
it’s going to be awesome.” So, you’re ready? And all we need to do now,
switch to ‘Prototype’ mode, and say… you, when you’re clicked, switch to this. Use Auto Animate, hit Preview, you ready? Ah! Cool, huh? Now we need some back buttons. You can spend a bit of
time now, I’m going to… I am going to do one more button
just to show you. So when that’s clicked it’s going to jump
to here in Auto Animate… and the animation is going to be,
this guy just getting a whole bunch bigger. Switch back to Design Mode. I send it to the back. You’re going to come down here. And I should probably get
some grids and stuff going. Let’s hope Smart Guides gets me. Now for good measure we’ll switch
to Prototype and get him to go back. Now is this going to work? Let’s go back to you, you. Actually let’s go back to this one,
get the full experience. Click you, you,
ah, too good, huh. And although I said you can’t
control keyframes and stuff… you can actually do some cool stuff
with– let me just move this out. Just a few of these, so this one here,
I’m going to just– Now we’re just being using Ease Out,
let’s do terrible Bounce. Two seconds, let’s try–
when that one’s clicked– Try a few different ones, Ease Out. I quite often just use Ease In and Out,
it’s not very exciting, I’ll use Snap. Maybe for one second,
and then when that one’s clicked… let’s look at a couple of these,
Ease Out, Snap, Bounce, Wind Up. Just for one second. Now let’s give it a click. Actually I want
to start with this first one. Ready for the bounce? Bouncing goodness. So the Eases are all really nice,
Bouncing, not my favorite. But you can play with the timing,
which is a lot to do with it. The easing is nice, you just got
to play with the speed of these things. You can see, Wind Up and Snap. Basically it’s like an
anticipation animation… and I can overshoot; I love it. Both of those are bit too slow,
but you get the idea. You can make some pretty nice carousels. Let’s do one more micro interaction
before we move on, that is so good. Design View, Pin Tool,
I’m just going to draw a real simple shape. A little wavy thing, just because. Now it doesn’t really
matter how you draw this. Could be an Illustrator,
any vector drawing program… it can be outlined rectangle. So I was going to give it a fill color
of something random. Over here it’s called Path 608, you
can totally leave it like that. You can give it a name. I’m going to do two things, going to change
the color, which we’ve done before… but what I’m going to do is
double click on these points here… and actually switch it around,
so I’m going to go you, and you. I should have thought of a better example. I’ve racked my brain, and I
was like, “Ah, don’t wave.” You can imagine some really cool
UI icons getting animated… all of these guys, this fella. All you need to do is make sure that it
can actually be reproduced in your app… or in your website design. SVG animation’s cool, you need to make
sure everyone can actually view it. Don’t give your developer
the most impossible job. That’s my job for my poor developer. Last thing, Prototype, you go to there. And when he’s eased in and out,
one second… and same for this fella to go back. Same. Pretty, rough one. Preview this one please. And… cool, huh? Now the trouble is going to
be when you’ve trying… to do lots of things at the same time,
and they’re all using the same Ease. So if you’re going to start doing
complex micro interactions… you are going to end up with lots of
different Artboards, lots of versions So instead of going back to this one… I generate another one that
looks the same as this guy… but have this version on it. Come with me, fella. Copy, you. Gone. You, paste. You’re connected, you’re connected,
please go this way. Preview you. So that only this thing animates. It’s such a nice animation, I love it. So paths can be animated,
images, text, color, and opacity. Let’s get on to the next feature. Actually, quickly before we go,
if you’re enjoying my teaching style… I’d love to get a ‘Like’ from you… and maybe consider subscribing
to my YouTube channel. Both those things really help me,
and what I do with my business. Also know, I’ve got other
reviews of the 2019 software… for things like Photoshop, Illustrator,
InDesign, After Effects, Premiere. So go check out those after this
if you like this one. And also if you are new and you want to go
through all the fundamentals of XD… I’ve got a full course on it,
look for my name, Daniel Scott… and have a look for my XD training course. Alright, now next feature. Next new amazing feature
is the Drag Gesture. So I’m going to use this one down here,
I’ve kind of got it half started for us. So I’m going to duplicate this fella. I’m going to have two versions of it… and what I’d like to do is animate
between the two using a drag. So click ,hold, and drag on the front. So what we’re going to do is
a couple of things, I want.. when it’s dragging back
this text is going to disappear. So it’s going to kind of move back
that way for no reason. Turn the Opacity down. What I also like is,
this to get smaller… kind of something like this,
and these little icons, here you go. Icons and the text can come with me. Just kind of tap it in a little bit. So beginning, end. I’m going to switch to Prototype View… actually no, first of all
we need a drag button… I can use this white rectangle… but there’s lots of stuff
over the top of it. So I’m going to use just a big
old rectangle over the top. I’m going to make it red
just so it’s not confusing. What I’d like to do is, I’m going
to switch to Prototype mode… and I’m going to say, you,
when you go back over here… I don’t want you to use tap,
I want you to use this new one called drag. And I want you to auto animate
everything between the two. So we’re using the same thing
we did before. Make sure everything’s the same names,
and you’ve moved them around. Then this fella is going to go back to–
Appearance of 0. This thing is not going to drag out,
you could get it to drag out… but actually I’m just going to say… you go over there, and
you’re going to be a tap. So we’ll start with this one, preview him. If you click on this, it comes out. Well, slow animation, but if you drag it
back in, that’s the amazing thing. So you drag and it does
all little animations… and everything moves across. The fade-outs probably not the nicest,
but you get the idea, right? And I probably need to,
as it’s coming across as well… this junk needs to come across. And that Tap Animation needs to be
not as bad, one second. 0.3 seems nice. Alright, preview, tap out. Drag back in.
Ah, drag. I want to show you one other example
just because, I guess my example there… is kind of easy enough to understand… and I want to show you some
extra things you could do. And little workarounds for auto animate. So I’m just going to grab all of the stuff. We’re going to do another kind of drag. What we’ll do is we’ll
start with a rectangle. I’m going to put in a slider. It’s not really a slider,
just a fake slider… but that’s what we really need. Something to be dragged. I’m going to duplicate it across… and all I’m going to do is change
the size of this fella here. So it’s the same name… but what we can do is we can say… you, my friend, in Prototype mode,
can use this drag option… and it’s going to animate
between here and here. You do the same thing for
this guy at the end. Let’s give it a preview. So it’s just a kind of
a simple slider, I guess… but you could have images, playing with
the opacity, you can do some cool stuff. Different stop points, I’ve only
got one, one there, one there. So that’s the drag feature,
but the other thing you might do is… these are the same names, you’re like,
“Okay, that’s cool,” but this one here… actually I would like to– back in Design Mode, I like
it to be a round circle. Perfect. Give it a preview. Because it was that primitive shape
I get to change that. But let’s say I want
to distort it completely. So I need to break it apart… because this is primitive rectangle shape,
it’s not an editable path yet. To break it apart, it’s ‘Command 8’
on a Mac, ‘Ctrl 8’ on a PC. Where is it? There it is, convert to Path. Now, if I double click on the center,
it’s loads of anchor points. The trouble is, now,
it’s not going to work. Why? Because it has different names,
it’s now being called Path 609. Preview. I want you, preview. Slider doesn’t know what to do. But this guy here could also– So it can’t go from primitive to path,
but this guy’s a primitive as well. So ‘Command 8’, or ‘Ctrl 8’ on a PC. It’s still not going to work.
Why? Because he’s Path 610, and he’s 609. So I’m just going to rename this fella. 609. Hopefully now… rectangle… Too terrible looking,
so there’s ink split tests. I see those hits from Easter Island. Anyway, so drag is a cool new feature. I’ve only just started using it… and those are the kind of things
that I started doing it with. I’m sure you’re going to figure out
loads of other cool things you could do. I’d love to see what you’ve done. So find me on social media, I am
bringyourownlaptop on Instagram… or on Twitter I am Danlovesadobe. If you use my name Daniel Scott,
I’m on all the other things as well. Similar links to some of
the things that you make. It’s going to be much better
than my Easter Island hit. Alright, on to the next feature. The next thing is something
called Timed Transitions… and there’s a couple of
ways you can use it. And this example here,
you arrive at the Home Page… and after a few minutes–
so that’s the Timed Transition… or at least after a few seconds… it’s going to start highlighting things
and kind of explaining what it does. Pretty easy to get it to go. So if I click on this Artboard here… switch to Prototype mode
and say I want to go to here. We’re going to go from Trigger to Time. What I’m going to do… is delay it for 4 seconds
before it moves over to this. And then this one is just going to kind
of scroll through whatever we decide. I’m going to do 2 seconds
just so it’s nice and fast… but you probably can’t read my text
even though it’s Lorem Ipsum. Now when it gets to the end here
it’s going to double back. So let’s give this one a preview. It just sits there for
four seconds, and then… here we go, kind of starts
highlighting things. You can skip through with the buttons or
just let it run through the little timer. And eventually you end up at the beginning. Now it’s up to you, I used… when I did these transitions
I was doing this, Auto-Animate… you might go to something that’s
just maybe more traditional… like a Transition, Dissolve. Transition, Dissolve. Nice. Now mine here is pretty ruthless,
it’s pretty– it doesn’t have to keep
flowing through as well. You might have to get people
to say acknowledge… or show me later or something like that. Mine are pretty– They take control of the whole screen. Yours might be a touch
more subtle than mine. Now I don’t have
a specific example here… but I’ve seen people use this Timed
Transition to run through an animation. If you’ve ever done
Spritesheet animation… you could start doing it here in XD. I’ll show you one of Adobe’s examples. Here it is here, you can see
they’ve got a character… that’s got all the different kind
of movements for a running loop. You stick them each on
individual Artboards… and link them all together
using our timing function… and voila, you get quite
a simple animation. I’ll show it to you because
you might want to add… you could have loads of Artboards,
and get the frame rate right down. But obviously it’s not a final production,
nothing in XD really is. Well actually you can do
quite a bit in XD now… but if this kind of vector
animation excites you… something like Adobe Animate would be
the place to go for SVG animation. Alright, let’s jump to the next feature. The next feature is Responsive Resize,
I’m looking at the constraints it has. I’m going to duplicate this,
I’m holding down ‘Alt’ key on a PC… or ‘Option’ key on a Mac, and dragging
the name to get a duplicate. I grab this center one here
and drag it out. Let’s just say I’ve been asked for
another break point for my website… it needs to be really large
like super duper IMAX screens. And what has happened in the past… let’s say I need this whole graphic
at the top here, not the image… I need to drag it out to the right. What happened in the past,
this happens… it just kind of like shrunk it down
and got it bigger. Now what you’ll notice, by default… is that Responsive Resize is on,
and it’s set to Auto. And it’s magic, watch this,
ready, steady. Just gets bigger. Even the spacing works, you can
kind of see the little lines that appear. You can see the lines, I can’t really
point at them with my mouse… but if I let go they disappear. You see the little lines connecting
to either the right or the top… Exactly how– remember Reflow,
did anybody do Reflow? A great idea, really hard
to make it work… but they’ve taken the best bits for this. So automatically just
seems to work nicely. It’s really good for getting bigger. If you are like, “Oh, get smaller”
for the mobile version, it gets you close. Gets you started at least, but there’s
going to be a lot of work. For getting bigger, super nice. Now you can get a little bit
more hardcore, let’s say… Let’s say I look at a little Ease,
and I start dragging it again… can you see this Beta?
The Beta version icon… needs to kind of really be attached
to this left hand Nav. At the moment it automatically
decided it’s part of the top. Can you see the line?
Says I’m connected at the top. So what I’m going to do is,
I’m going to go back… and I click on this fella. I go into here, go to Manual… and instead of saying connect to the top…
you are connected to the top and the left. And in my case it probably only needs
to be on the left. You can see here,
I can give it a fixed width… or I can let it stretch. I don’t want to let it stretch,
that’s kind of what it did before. So if you are dragging
these things around… and one of them is not behaving,
just click on it. Switch it to Manual,
and decide on… whether it needs to be
fixed to the bottom… the right, the top, the left, bit of both. So now hopefully when I drag it… the little Beta guy stays there.
Cool, huh. So that’s Responsive Resizes
on all the time. To override it, we looked at it earlier,
just hold the ‘Shift’ key down. Sometimes you just want
to squish things up. Or just turn it off, and it does
the exact same thing. I’m going to turn it back on,
and let’s get on to the next feature. The next feature is, you can actually
start opening Illustrator files in XD. I bet you there’s a lot
of people out there… who started life doing their mock-ups
and their UI designs in Illustrator. Perfect for it, has really
cool features for it… but the big thing that’s missing is,
any of those sort of micro interactions… or any sort of interactivity,
it’s just kind of a dead Artboard. You have to then chuck it out to Envision
or something else to add the interactivity. But we know, Illustrator is still
useful for UI… because it has such complex vector
and image manipulation compared to XD. XD has everything it needs,
not some of the nerdy vector stuff. So what you can do is, you can
do a lot of work in here… then just open it up in XD. If you’re working with my exercise files,
go to ‘File’, ‘Open’… and you can just go to ‘Exercise Files’,
there’s one called ‘Illustrator’… and it’s that exact same file. The cool thing about it is, it’s not
just dead graphics, it’s fully editable. So it’s brought through my Artboards… all the Artboard names,
you can see them there. It brings through all your layers.
I got two of them in this one… and the best bit is, watch this. Watch this, zoom in,
everything is editable. Fonts, Type. The vector just comes through,
all the images come through. And you can start making adjustments… or you might love the process
of just working in Illustrator… and coming in here, and just using
the Prototype function… to say, when this button is clicked,
go to this one. Going to be a Tap, Transition, Dissolve,
all perfect, preview this one. In this particular case my Artboards
may be a bit long… so I need to sit my scrolling
to ‘Vertical’. Set a Viewport Height. So that at least now when I preview,
it’s going to only preview just part of it. There we go there. My Viewport Width is really high. I don’t remember what
size I was working with. 400 pixels along the top,
but you get the idea. Doesn’t have to be for mobile,
can just be for web. That lovely bit of interactions… and now timed in with those micro
interactions with Auto Animate. And a little slide and pushes,
plus all the plug-ins. It’s become an actual total
workable workflow. Do your work in Illustrator… add interactivity, user feedback,
comments, all through XD. Alright, let’s look at the next feature. The next feature is something
called a Linked Symbol. Now if you’re following along… open up the exercise files,
Web Hook 1 and Web Hook 2. They’re two separate documents,
they look quite the same… but often when I’m doing these
little microsite web hook things… I won’t keep them all on the same Artboard
just because they look too similar. So I keep them in separate jobs. This one’s kind of an earning download… and this one is a free
PDF download type thing. So how does this Linked Symbol work ?
We know how symbols work, right? I’m going to select all this top graphics. I’m going to go ‘Command K’,
‘Ctrl K’ on a PC. And this is going to be my Top Nav. Now if I copy that Nav and paste it
over here by clicking the top… and you paste it, goes in
the exact right place. They are connected via this symbol. I’ll zoom a little bit. If I double click it to go inside… and I have to get rid of, say this,
it’s meant to be Academy. The clients come back and said… “You can’t use that icon,
it’s not very good.” You can see, they delete off both of them. Where it gets really cool now is,
if I grab this person, just the symbol… and I go ‘Copy’, and I jump to this
separate, completely separate document… click in here and hit ‘Paste’… you’ll see there’s a nice little icon here. If the icon goes red
or something seems amiss… just make sure you’ve
saved the original one. So this is the first one here, the parent. It’s called Web Hook 1,
that’s where we copied it from… and we paste it into Web Hook 2. Green is good, red is bad. Another thing that I’ve found problems
with this particular one working is… if you’re working with– so this file,
I created using this new version of XD… if you’ve got legacy files, maybe it’s
just me, in my version on my computer… but I ran into problems… this linking wouldn’t work across
really old versions of XD. Had to kind of save them as the
new version, and I started working again. So what’s happened is, parent,
there he is over here. It’s going to be a little confusing,
this is the first one, Web Hook 1. If I go into here, and the
client comes back and says… “You can’t use that icon either”… I really want to, I love it, using icons. Because they look prettier. I want a pricing icon… if you can help me, like there was
as good as I got for pricing… I tried lots of things,
nobody liked them… so I’m falling on my sword, and I’m
going to say, “Actually, you can go.” I’m just going to use plain old text. Now it’s going to say Pricing,
because it’s probably what it needs to be. Now I’m going to hit ‘Save’,
that’s important. Jump back to– this is my original,
jump back to the other one. Can you see, it’s gone blue. Says, “Hey, something’s different,”
and there’s a couple of things. Make sure you’re on your Assets Panel. You can hit ‘Command-Shift-Y’
to open up the Assets Panel… or ‘Command Y’ for layers. ‘Command-Shift-Y’ for Assets,
and that’s ‘Ctrl’ if you’re on a PC. So you’ll notice blue, blue. Hover above it, tells me what’s changed,
what dates, from what file. And I can do a couple of things, you might
be like, “Holy Molly, what’s happened?” You might be working with
a bunch of other people… and you know, you’re like,
don’t mess around with my file. You have no idea where you got
it from, or why it’s connected. You can right click it and say,
actually, just make this a local copy. It’s still a symbol,
so the new symbol’s a Library… but it’s not connected
to the original file. I’m going to undo that. Let’s say I have changed it, I’m like… “Oh man, imagine if it could
double click this blue thing.” It’s up to date, now it’s pricing.
Cool, huh. That’s why a Linked Symbol is a bit
different from just a regular symbol. They’re all kind of linked, but now
they’re linked across documents. I’m going to undo it, right click it. You can edit in Source Documents… so it will jump back into my original,
start working on it. You can highlight it on the canvas. I can update it, or down here
you can update them all. So there’s loads of updates. So what you’ve got, this kind of like
pyramid scheme of symbols. All relying off one master brand
image file, which would be super smart. You could just go through and
update all of the updates. Alright, let’s jump to two more features. One takes a little bit more time
but it’s pretty awesome. This is the quick feature, it’s Spelling,
or at least half spelling. Now I am the world’s worst speller,
and this really helps me. We’re back at our InstructorHQ UI. I’m going to click on this box… hit ‘Command 3’ on a Mac,
‘Ctrl 3’ on a PC to zoom in on it. And what ends up happening is… it doesn’t run a spell check
like you do traditionally. It’s just kind of like a dynamic spelling,
which I find useful. Click in here, with my Type Tool… give it a second, you see,
failures is wrong. I can right click it, and it gives me
actual proper spelling within here… which is super cool. You’ve got to actually select it in here
and give it a second. So it’s more while you’re typing. It probably needs a spell check
from my copywriter anyway… but it’s less embarrassing for me. As I’m typing, there’s lots
of did you means. Let’s get on to the next feature… but before we do, if you’ve
enjoyed this video… I’d love a ‘Like’, it really helps me. Subscribe to my YouTube channel as well. All that sort of stuff
helps me in what I do. Also remember, I’ve got other reviews
for 2019 updates for things like… Photoshop, Illustrator, InDesign, Premiere,
they’re all in there. And if you’re just getting
started with XD… you might want to check out
my XD training course. Alright, let’s look at the last feature. The last feature is to do with
exporting for After Effects. So if you’ve got some basic
After Effects skills… or you’ve been meaning to learn it… your vision of XD is going to really help. I’m going to show you the
kind of things to consider… when you are exporting to After Effects. So After Effects is an animation tool,
if you’re not sure. We can do micro interactions in here,
but it’s all very limited. With no timeline and no control
of the easing… you might want to jump to After Effects
to really add some pizazz. I hate that word but I said it anyway. So the way this works,
let’s create a little thing. So I’m using the Repeat Grid
just to grab a few of these. Because I want to show you what happens… when you use Repeat Grids
when you go to After Effects. If you haven’t already, you can see if
it’s got some basic text in there… you can actually dump sample data
into XD, which is cool. Doesn’t really matter,
because I’ve only got four of them… but imagine you had hundreds of them,
or a few of them. You just drag them into the values
and it goes through and picks them. And all these are, is just standard
text documents, .txt files… and the return ends up being the new value.
I’m looking forward to a plug-in…. to actually do that automatically,
generate random data… based on some categories, images,
that would be a cool plug-in. Or maybe a table, you’ve got
your own database, can’t wait. But for the moment text documents work. So I’ve created this kind
of repeating grid, right? And if I leave it like this,
and I go and export it… one thing to know is, if I have this
selected and go to export, so ‘Export’… and if I go to ‘After Effects’,
it’s only going to explore… the thing I have selected,
not the whole Artboard… which could be cool, but I want
this whole Artboard selected, ‘Edit’… I’m going to start using the shortcut,
this one here. On my Mac, that is ‘Option-Command-F’. And in the background
After Effects is going to open up. And like magic you’ve got an Artboard,
well it’s a Comp over here. So if you’ve never used After Effects
this might be a tad bit confusing. I’ve got a course on After Effects,
if you’re keen. It’s that motion graphics one
and animated infographics. Either one will give you the skills you
need to start animating these Artboards. Now what comes through, first of all
the Comp size matches your Artboard. So After Effects considers
Artboard as a comp. So when I say Comp, I mean Artboard,
Artboard, I mean, Comp. If you are an existing
After Effects user… you’re going to love it because
everything is editable. Can you see over here, those are
shape layers, those are type layers… all the masks are preserved,
the layers are preserved. Any buildings you’ve made come through. I don’t think they’re editable anymore,
but they’re full paths. Symbols become pre-comps. So what we’ve got here is
quite a complicated timeline. Now if you’re okay
with After Effects, it’s fine. And what it’s done is,
that Repeating Grid… is being turned into
something called a Pre-Comp. You can see it there, Repeating Grid. Now you can dive into that
Repeating Grid and start working on it. You can see here, original dashboard comp,
my pre-comp. And if you’re experienced
that’s not going to be a drama… but if you aren’t, and you’re like,
“Oh, it looks confusing”… what you can do is–
I’m going to bin all this… I’m going to show you a couple
of ways of bringing it in. So I’m going to delete it, go back into XD. And what we’re going to do is… first of all break apart
our Repeating Grid. So I’m going to ‘Ungroup Grid’… so now if I click on it
they’re just separate groups. And now if I export it,
and if I click on the Artboard name… ‘Command-Option-F’, or ‘Ctrl-Option_F’. Dumps it all in here, and what
you’ll notice, in here… is it’s a little bit easier to work with,
little bit, but not the best. But I want to show you all the things. So what ends up happening is,
there’s a group, and it’s the parent… and all of these things within this group
are children of this parent. If you’re okay with After Effects,
it’s no big deal, when I move this group… everything underneath it, which is
these fellas, all come along with it. But even then that can be
a little bit hard when you are new. So I’m going to bin that again… and show you probably the nicest,
cleanest way to come through. I’m going to grab that, and I’m going
to turn it into a symbol. Either using this little + for symbols,
or I’m going to hit ‘Command K’. So still a group, I’m just converting it
into a symbol as well. Should give it names. There’s my symbols library. Go away, missing font. This one here
is going to be the fourth tile. Tab down’s really handy in XD. So you don’t have to keep double clicking. ‘2 Tile’. ‘2 Tile’, next one, ‘1 Tile’. I’ve named them all just to make it
a little bit easier in After Effects. The other thing you might do
to make yourself a little easier… so it’s not the symbol order,
it’s the layer order. I want the tile 1 to be at the top… then tile 2, tile 3, tile 4. This thing here is a group. There’s all this top junk,
I’m not going to group it… I’m actually going to select it
and make it a symbol as well. Give it a name to make After Effects
easier to work with. And the ellipse by himself,
he can be called ellipse. So, select the Artboard,
export it to After Effects. Somehow magically After Effects
gets it all… but if you use symbols instead
of groups or your repeating grid… now in After Effects, and for a newbie
that is a whole lot nicer. You can get inside of these
by double clicking them… but like little nested animations,
if you’re from Adobe Animate… think of them as symbols you can dive in
and do animations inside of. If you’re a newbie
it might be just easier… just to work with these kind
of high level graphics. Now we do a basic animation,
select them all, come out a few frames. it’s giving me a minute,
which is quite long. I’m going to go about 40 frames.
Going to hit the ‘P’ key on my keyboard… to show all the positions. I’ll hit the stopwatch, at almost a second,
I want it to be on screen… but way back at the beginning
I’d like you to be over here. I’m just using my keyboard. Holding ‘Shift’ till it goes straight. So that’s going to be their little bit
of animation, I’m going to offset them. Caveman style, we’re just kind of dragging
that one there, that one there. How good is my timing?
Probably pretty bad. ‘+’ key to zoom in, give it a preview,
but you get the idea, right? So the new version of
XD has Auto Animate… but you can’t do separate animations
all at once, not at the moment anyway. What I might do is just tidy this up. Select all my little keyframes,
these little blue guys. I’m going to right click any one of them. Go to ‘Keyframe Velocity’, and that’s
the cool thing about After Effects. It’s got like full control over
Easing and Velocity. I’ll just pick 75 and 75. They all change, the hourglass,
and just a nicer bit of animation now. And let’s turn on Motion Blur
for good measure. Motion Blur on for the whole Comp. Turn it on for all of these guys. So that when it moves they’re
kind of a bit blurry. Watch. So this is perfect for interactions
that just can’t be done in XD… or if you’re presenting to a client,
and you really need a kind of sex it up… you do a lot more animation
in After Effects. It’s not interactive,
can only be exported… as a non interactive plain
old movie, so an mp4… or you could do an animated gif… which would be perfect for your
portfolio or the company’s portfolio. One last thing about it is that,
we’ve just brought in the app dashboard. If I go to– as long as it’s open
it’s going to just try and– let’s say I want that,
plus I want my onboarding… I’m going to do a nicer
bit of onboarding… so I click on the ‘Artboard’… do the exact same thing as before,
use my shortcut to export to After Effects. You’ll notice that, can you see… the cool thing about it is it brought
in that Artboard with the name. If I hit this one, double click it,
this one, double click it. So down here, I have my two Artboards
that I can animate separately. And these are the assets
for the two Artboards. Symbols, images, they’re all in there,
ready to go. So you could export all
your different Artboards… and start animating between them,
do some nice transitions… set up some cameras and some lighting,
put them into live action. That’s the power of After Effects. So that’s it for the features. We’re going to jump out to the
real life Dan in a second… to go through a bit of an outro,
and what the next steps are. Not sure why I talked about
myself in the third person… when I’m inside the computer. I feel like the real version of me… you will see in a second,
is a different person. Dan you’re a weirdo …to know is that if you’re new to XD,
or maybe you’re self-taught… you might want to check out
my full course on Adobe XD. Look for my name Daniel Scott and XD,
and you’ll find that course. Alright, that’s us, you made it to the end,
well done, high-five. I will see you in hopefully another video. haere rā.

19 Comments

Add a Comment

Your email address will not be published. Required fields are marked *