Adobe XD Tutorials

Using Adobe XD Auto-Animate & Delay to Create Complex UI Animation Sequences

today you're gonna learn how to create complex sequence animations with Adobe experience design oh and hey I'd like to point out this

videos awesome sponsor skill share calm which offers thousands of classes in design coding business and more for instance you're about to watch this quick video on Adobe XD but you could

watch this full xD course at skill share now skill share is just ten bucks a month but if you're the first 200 students to use my very exclusive link below in the description here in YouTube

did you get the first two months free alright so let's get started hey everyone Garry Simon of course at Rosso it's been a massive week for Adobe and Adobe experience design in particular

and I've had some time to really play around with the new feature specifically auto animate for animating your prototypes initially when I saw it and realized how simple it was I thought

that well it's kind of simple it's gonna be you know you you're gonna be confined to very simple animations and you know you can won't be able to do anything too cool with it but then I realized you

really can I so let me show you real quickly here in the browser exactly what I'm talking about or the desktop rather so if I play this I this animation that were or this prototype we're about to

create watch this so this is obviously entirely in Adobe experience design so we click on this and we have a cascading or a kind of like a sequence animation occurring right off the bat so we click

it notice how the menu items will kind of come in one by one all right and then also notice right after that we have this animation occurring which is also very slick as well so click it and then

it shows up and we can control all these parameters now let's click on services look at that I obviously I creating this stuff you know when you're actually in production in working with code that

would be one thing but now you can so easily create these prototypes about how you envision the app should respond based on user interaction and this is a massive step forward in my opinion and

so I'm gonna show you exactly how we create this right here alright so for today's question what do you use for animating your UIs straight-up CSS or perhaps you use some sort of CSS or a

JavaScript based animation library let me know in the comments and let's get started alright so I have a brand new artboard open here I just click on the default

iPhone six seven eight I sort of artboard I'm gonna make it a little bit larger and also copy the height so that we can have the viewport height equal the same all right so I'm not going to

really spend a lot of time on the actual UI itself because I want to demonstrate and show how to use the features themselves having said that we need to get at least something on here to you so

I'm gonna take a rectangle tool and draw out just same size as the artboard and we're gonna with it selected I'm actually gonna use one of my installed plugins so if you go to plugins here

which is obviously one of the brand new features only a couple days old from Adobe XD will see that we have plugins here and we have one called photo splash so if you don't currently have this

installed you just go to discover plugins and then you just type in photo splash right here and then click install after that you don't even have to reload at all all you have to do is go to

plugins with that selected make sure you have that that rectangle selected and go to photos splash right here alright so the way this is set up is you have I two options here on the side just

random photos every time you click it it's going to generate a random photo or you can search for specific photos right here in our contest it doesn't even really matter originally I was using a

guitar I think here find photos I'm just gonna use this one and then hit apply there we go no more searching in a separate browser and then dragging things in manually awesome stuff so what

we'll do is just I take this down a notch but before I do that we're going to create a another one real quick or instead of doing that we'll just take the art board itself and

we'll get a kind of just a dark absolutely dark color right there all right and then we'll take down this opacity well one second sorry I'm screwing around here

make it like a a mid gray color right around there there there we go that's what I wanted something that's just kind of gray but a watermark type of background real quickly I'll just put in

a sort of watermark logo I'm gonna use white for the color will use montserrat for the font and make it bold all right and then let's stick it right there and then we'll have a hamburger icon

menu except I'm going to do a trendy way it's not going to just be three equal lengths we'll have one come on around here we'll make this white take the size to

two well duplicate it control D make this one a little bit longer this way and then control D as well make it like that all right so with that I selected those three control G to group those and

then we use the keyboard arrow keys to make sure it's all lined up and with equal whitespace and all that good stuff awesome so now that's all the setup that we're gonna do with this for this

background we can go ahead and just lock that so we don't get same thing with the logo we don't need that selected at all either all right so let's say for instance we wanted to simulate you know

what happens when an individual clicks on the menu all right so let's go ahead and take this and we're going to duplicate it ctrl D all right so when we do that we're gonna right here just draw

out kind of just a vertical menu of sorts all right so I'm gonna take the rectangle tool come out to right around here kind of like a 2/3 sort of column

situation we'll take this and we're gonna make it black actually no we're gonna make it a little bit off block there we go I like that and then we'll go ahead and we're gonna

zoom up here I'm gonna take the line tool hold shift for a 45 degree angle right around there make it white sighs – for the stroke and then real quickly we'll duplicate it and then we'll take

this hold shift just that top anchor point and then move it into place now we have our little X right here so with that selected we're gonna hit ctrl G to group that up and also we'll move

it into place where it needs to be roughly right around there awesome okay so now after that we're going to put in some of our menu items so when you construct the menu items you

can make them all part of the same text layer but if you want to individually kind of animate and control each menu item then you're going to want to make sure there's separate items separate

text layers themselves so we're gonna put in home hit escape control d hit V for move and then hold shift and I'd say you're ready to round there's pretty good the next one will be services

escape control D hold shift scale down we have our equal spacing between them the next one's going to be about us you know the drill at this point and then finally contact all right awesome so a

couple things – I pay attention to is when you're doing this you want to make sure that I if we want to animate this in for instance on when somebody clicks on this and we want to have this this I

this navigation of sorts like the whole panel kind of just kind of move in from the side as well as maybe animate these individually you have to make sure that at first all these elements have to be

on this artboard as well this very initial artboard otherwise it doesn't know how to go from point A to point B so the way these are is kind of just basic tweens in a sense that you should

have a starting and you have an ending point well right now we have an ending point but we don't have a starting point so we're gonna take these and make sure nothing else is

selected here so for instance we have our rectangle 1 make sure nothing else is selected up this right here that I know this part there's the this thing right here we do not want that at all

which is it's called group 1 so if we I select everything we don't want to select Group 1 so we can't just lock that all right so now we select only what we want so for instance if I select

everything here but it's still being selected there we go now it's not selected anymore all right so now what we can do is I we're gonna go ahead and we're gonna hit control g8 to group

everything up together all right so this is an important step all right because you don't have to do with this a but when you go to duplicate this it's gonna make it life a little bit

difficult because you're gonna have to rename these layers to make sure they match up and you'll see what I mean so now that we had just have this group 3 we could just call this nav right here

well duplicate it and we're just gonna drag it into this one right here all right so we have nav here and we have nav here as well so that's exactly what we want anything we want to animate what

we want to make sure that the layer names match up all right so where is this going to be going from well but a fault I we don't want to see this at all so we're gonna be dropping the opacity

completely off for all these elements but before we change that we're gonna change the position of a few of these elements in and of themselves so first off I'm gonna move everything pretty

much off-screen maybe right around here now when you move these things off make sure that they don't go outside of the particular artboard or it won't work so then what we'll do is I'm gonna take

I'm gonna double-click on this home right here I will take all of them so all 4 of these I'm just gonna move them over just a little bit and then I'm going to hold shift and

select that in order to deselect home we move this over a little bit more and you could do this vertically as well as horizontally so the way these are gonna work is these are gonna connects cascade

in horizontally because I'm changing the physical distance between them alright so contact will fade in or come in last because these this is further away from its original distance over here alright

so that seems pretty good to me right now now we'll take the whole group right here and we're just gonna take the opacity of everything and drop it off awesome so I think at this point we're

ready to do our first kind of prototype so what we'll do is when somebody clicks this I'm going to drag it to this artboard we're gonna make the trigger a tap and the action is going to be auto

animate all right so we also have the easing and the easing you could play around with it will affect the animation and how that works and then also the duration of the animation itself let's

make this like 0.6 all right we're just gonna leave it at ease out and then let's hit play to see how this works so we're gonna come over here click it alright it's a very subtle let's try it

again but it works let's make it maybe last a little bit longer just so we could see the effect because it is very subtle although that is sort of ideal you don't want to overdo your animations

and your you eyes and such but I will just set this at one second here so we'll be able to see the effect a little bit more in this manner there we go now of course if we change the easing

options here like I will try windup all right that's one option but I think we're gonna set at I will just do ease in all right so next how about when we want to exit out of there we can do that

as well all we have to do is select this right here make it go back and it will remember that is on animate and it'll just remember all the settings so when we hit I play there we go now that is

awesome now let's say for instance that you wanted to have a little bit more of a complex animation sequence occurring here in the in the sense that maybe right after these cascade in there be a

brief pause and you'll have maybe a search area show up down here first before I do that though I'm getting annoyed with the alignment right here I want to make these a little bit closer

to this edge all right and everything should still work after you making these changes so what we'll do is we're going to go back to the design tab and duplicate this and we're going to create

a rectangle right here so a rounded rectangle will go right here all right and we're going to drink bring a drag those corners in all the way and we'll take the fill somewhere right around

there four oh four oh four oh four the hex code all right and real quickly we're gonna create a magnifying glass icon we'll make this white and we'll make the

size two just to keep things consistent and then we'll take the eye line tool just to create the bottom handle portion of that so let's go ahead and take those two hit ctrl G and we'll put this right

there all right so what we can do if you want to have more sequence based animations take place through Auto anim it's use a delay all right so remember though if we want this to kind of maybe

just grow well to exist on the artboard as well there has to be a point a and then a point B obviously a start and an end so to do that we'll go ahead and first we will

take these two elements and group them ctrl G all right so let's just call this search now let's duplicate this all right so we'll ctrl D to duplicate search and we're going to put it right

here and the change that we're gonna make is first we're gonna pull this all the way in and then also we'll take the whole group itself and we'll take the opacity down all right so let's go to

our prototype tab and I will take this we'll drag this artboard over to this artboard we have auto animate but the triggers not going to be a tap it's going to be a time with a zero delay

alright so let's try that maybe we'll make it a point six seconds duration and hit play so we click it and there we go awesome stuff so hopefully you're now starting to realize the app you know the

power of being able to do this I what we can do real quickly is we'll take this and if they hit X out of here it will take them back let's just say to this one now because we've done that and

we've gone from this third artboard to the first artboard which doesn't currently have this part the animation might not be ideal but just to show you yeah we just saw right there so if we

click it and then we click X it kind of just fades off but so you would want to account for that in this artboard but we'll keep on going anyhow so let's say we also wanted to just to gain more

experience with auto animate let's say we also wanted to simulate what happens when somebody clicks on the services button alright so let's go back to design and hit control D and let's go

ahead and say ok somebody clicks on services the first thing that's going to happen is we're going to extend this entire background right there alright and because they click

services something unique is going to happen with it so what I'll do is take these three the other three right here we're going to push them to the right and just double click because they're in

a group just to access that given layer and then we'll take them and we are going to hide them and then as for this section right here we'll take it and then hide it as well all right so let's

I give this a shot we have to go to prototype select services it's a tap trigger with auto animate and we'll say we'll leave it at six seconds so let's hit play services look at that

so now let's say also I this is kind of silly though because if you're just left with this is horrible usability so or user experience so let's go ahead and duplicate this in our design tab and

what we'll do is we'll move this one up yeah right around there is fine all right so again this is our starting point I'll start here and then it'll move up so it's going over here from I

right to left and then up all right so after that let's also add a couple more things that will happen or animate in so take this text area here and I'm just going to type in what we can do for you

okay whatever some type of catchy headlines here right we'll bring this in yeah right around there looks good and I just wanted one more other UI element so real

quickly I will just take this rectangle tool put this around here maybe we will go real quickly to our plugins because life is a lot easier now with the plugins I'm just gonna put like a

random here there we go wait maybe we can use a Harambee there there we go awesome oh that's great okay so let's get rid of that border alright so we'll say that when this

fades up as well or this moves up we want this stuff to move up as you know along with it so remember there has to be a starting point this is point B we need a point a so we'll take both of

these and let's go ahead and I want to rename this or let's see here this one will just call this Gore and then we'll duplicate duplicate both of these ctrl D move them into here and we're gonna

position them down so that they will actually come up and then we're gonna take the opacity down as well and this one will make it come down even further so create kind of like a almost like a

parallax effect alright so yeah we should be pretty good here let's go to prototype and this is going to be a time-based idle a so no delay here and we want this to be instant so choose

zero no come on now zero point zero s or 0s there we go and then we can leave this at ease in let's try one second and let's give this a shot hit Play services look at that awesome awesome stuff so

now let's say just to wrap this up let's see what happens let's try to make this ex work so what will the ex do alright well if we make it go back to this right here it's simply just going to end up

going back to our services and it'll create kind of like a loop actually I think it will I never really tried that let's just try it on a tap it's gonna auto animate and then it's gonna go back

to this but this has a time trigger automatically applied to it so I'm expecting a loop so let's select this artboard and then hit X yeah it's gonna be a loop no matter

what so how do we fix that all right well what we can do is let's go ahead and sever that connection here oh wait no we want that there this one we don't we don't want the connection going there

what we'll do instead is duplicate this let's just drag it down here all right and what we'll do here instead of having this time trigger we'll have the time trigger except it's gonna go over here

now all right so it's a time-based trigger and it's Auto animate all right so now what we can do is I we could take this make it go here instead and it should work as expected so let's give

this a shot hit Play services hit X look at that I can't believe it worked the first time without me screwing something up but that's how freaking easy this is and

it's immensely powerful to create really just almost anything you can imagine I I can only match the two as they start to add more to this it'll definitely be quite powerful all right so hopefully

you found that useful and now you have a new skill set under your belt and this is gonna be so much fun for myself I know specifically to play around with so make sure you answer today's question

which is what do you use to animate your UI straight up CSS or perhaps some CSS or JavaScript animation library let me know in the comments make sure you subscribe of course if you enjoyed this

and I'll see you guys soon with a new video [Music] [Music]

#adobexd #adobemax #ui Today’s Question: For UI Animations in production, do you use just CSS or a CSS/JS library of sorts?
https://skl.sh/designcourse2 – First 500 people to sign up will get their first 2 months free!
— With Adobe XD’s massive update a couple days ago, we now have the ability to create simple and complex animations for our prototypes. In this Adobe XD tutorial, we’re going to break down exactly how to use auto-animate along with delay to create impressive animations.

Let’s get started!

– – – – – – – – – – – – – – – – – – – – – –

Subscribe for NEW VIDEOS!

My site: https://coursetro.com
My personal FB account: http://fb.com/logodesigner
Coursetro FB: http://fb.com/coursetro
Coursetro’s Twitter: http://twitter.com/designcoursecom

Join my Discord! https://discord.gg/a27CKAF
^-Chat with me and others

– – – – – – – – – – – – – – – – – – – – – –

Who is Gary Simon? Well, I’m a full stack developer with 2+ decades experience and I teach people how to design and code. I’ve created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.

Now, I focus all of my time and energy on this channel and my website Coursetro.com.

Come to my discord server or add me on social media and say Hi!