Adobe XD Tutorials

Adobe XD Prototyping to GSAP 3.0 Tutorial – Part 1

today I'm going to show you how to create this here in Adobe XD for this two-part video tutorial where I show you ultimately how to create this using G

SAP 3.0 everybody what's up Gary Simon here so the green sock animation platform or otherwise known as G SAP they've upgraded to version 3.0 and it's a major release I and a lot of things

has changed and I've done videos on on them in the past if you're unfamiliar with what the G SAP is it's basically a JavaScript animation library and they allow you to do awesome complex UI

animations relatively easy so this new 3.0 version packed with tons of features and one of the most important things is it's half the file size so this is a two-part video tutorial this first video

I'm not getting into gzip or any type of coding I'm a big proponent of prototyping first so we're gonna step in Adobe XD I'm going to show you how to design the user interface as well as how

to actually figure out in and you know try to get an idea of how the animations are going to work so that if you were to pass this on to a front-end developer for instance who's responsible for the

coding they can have an idea of what it should look like once they actually start working with jisub alright so make sure to subscribe if you haven't yet and let's get started before we begin though

'la note the sponsor of this video makes it easy to host your site your app or service on whatever technology stack you use with one-click apps like WordPress and Drupal getting up and running is

easy with back-end access to your server customization options are all but limitless a fully configurable dns manager allows for you to easily switch or do name over to your new server and

SSL certificates can be installed for free using open source tools so sign up using the link below to get $20 in credit on your new lenôtre count alright so what we have here is a quick just

kind of a mock-up of a vibe just some ad copy that we are to take and convert this into an actual UI design so the reason I did this is because usually if you're a UI designer I most of the time

you will be provided with the ad copy either by your client if freelancer or by your employer if you're working with a team or whatever and I kind of wanted to include this because I

really haven't done this sort of thing before just to give it a little bit more relevant context and in terms of what you would actually be doing if you're a UI designer so in this context all we

have is this information so it's obviously going to be a very simple landing page we have a headline so we have to use this ad copy a sub sub headline of course I didn't really give

that much lot the call to action is a button so they want to a call to action with this on this page with the label start dreaming or they text rather and then we also need to show an

accompanying photograph all right which I have outside the desktop and I'll show you that after and so our goal and as a UI designer will be to take this and structure it into a useable I interface

and also something that looks good so this we're actually playing the role of a UX designer as well because we have to figure out how to lay this stuff out in a way that makes sense so there's a lot

of overlap when we're talking about UI and UX design so let's go ahead and get started with that and usually I'll start to think about okay well I show an accompanying photograph we have to have

a button headline and sub headline at the very least and so at this stage it is usually helpful maybe some people prefer to get out like a notebook with a pen and just start sketching out you

know very what rough wireframe of how this might be laid out maybe you can do it right here like a very low fidelity wireframe as well so usually what I do for the most of the

time I'll just kind of hop right in and I'll do not necessarily the intention of going into or creating a loaf I wireframe I usually will just kind of place things around quite quickly and

then just go straight into you know what I ultimately think it will look like if you understand what I mean so I have this on its own artboard I have another web 19:20 artboard over

here now I real quick before we start designing I am talking a little bit much usually if this is our real project you would want to start mobile first with your design to think

about how it works on mobile devices in the most simplistic form and then I build out to two tablets and then desktops to progressively enhance it you do the same thing for front-end

development as well but for this project just so it doesn't take too long just so I can demonstrate really about the core and the purpose of this two-part video tutorials about which is translating

animations and a G SAP we're just gonna do desktop all right in my full UI design course coming up obviously be a little bit more comprehensive than this so I we have bridging the gap between

dream and reality okay so that's the headline I'm gonna get that out first and the idea that I had right away is kind of go with a two column layout where we have like a photograph with an

accompanying sort of abstract graphic over here and then on the Left we can have those three elements in terms of the headline sub-headline the call to action so I'm just gonna left click and

drag out a rough area where I can put that so it's bridging the gap between dream and reality alright so I'm just going to use montserrat of course my favorite font for this I'm gonna make it

bold and it's our headline so we want it to be the thing that really sticks out the most all right so this is what's called visual hierarchy in UI design I visual hierarchy something that applies

to all forms of design but for I UI design I in our purposes with these three different elements that are sitting right here we really need to emphasize the headline the most all

right the sub headline is kind of secondary in nature I and so in order to reinforce that secondary nature let me just take this or rather where we at 61 wants are

at bold yeah I'll take this if I were just to do real quickly I'll get my plugins will go to lorem ipsum fill that that's a Adobe XD plug-in you can get oh that's not enough I let's just say that

this was our szabla headline right here we see no distinction between these two elements our eye is equally drawn to both of these because these elements are styled the same so if we want to

emphasize importance to one element over the other then we do through a number of different ways we can do through the font-weight so for instance if I take this and go light we can see we're

suddenly drawn automatically our eye is to this Boulder area because it takes up more space and it just sticks out more because of fact that that's bold you could also do it through color we can

take this down oops the color too maybe more of gray so now automatically we've established this visual hierarchy through both of these or you can do it through scale as well and you can do it

all three at the same time if you want and if it's effective and still readable so that's what we're gonna do we're going to take this down in terms of size quite a bit so the size that I think I'm

gonna use here is gonna be right around Irun they're probably all right and we're gonna make it also not bold it's going to be regular eye wrinkled right around there and I'll make this extra

large just so that when we run this plugin again it will really fill it all up there we go and we only want just a few lines really maybe just two and then we'll increase the line height because

it's a little bit crushed and crammed a little bit so maybe 250 or so alright so now we've really established that visual hierarchy between these two elements we got a headline our sub headline and

notice that I decided to kind of really give this a lot of white space in this desktop format because we have very few elements to design for we only have a headline sub-headline whatever so it

wouldn't make sense to stick like this stuff up here or anything like that so we can really just frame it very well usually the more content you have the less whitespace you will have naturally

now we also have our call to action which is a button start dreaming alright so we'll go ahead and put in just a button here all right and we really want this to stand out so when

you have a call to action it's something that you want in action that you want the users to take I'm in that case it's really beneficial to make that area stand out very well and again you do

this through size scale color and all that good stuff so in this case I think we'll just make it kind of like this purplish color which will work and of course scale is really important you

don't want a button probably that big and you don't want one that's too small so we'll stick right around there and I want this centered this button to the text in it to be centered so a quick tip

for that is just a left click drag from the very left to the very right it will snap there automatically to the sides when you drag and then we will Center it and then we'll just put in start

dreaming and we want maximum contrast so we're gonna make this white and we could also make it bold and oops wrong one maybe just slightly decrease the font size and we also want it to be centered

here right there looks pretty good alright so now we have the photograph so remember I mentioned like a two column layout so we'll go ahead and I'm going to first drag out a column here with a

rectangle tool and get rid of the border and then just while it's selected I on my desktop I'm gonna pull in this this is from photos laughs photos splash this graphic right here and I this looks

pretty good so right here very very simple and people are calling me sorry about that but I want to kind of set have something else extra to really make I hate using

this term because clients use it it's very frustrating when your designer trying to interpret it but really make it pop I can't believe I just said that so I I decided to use some sort of I

found some I'm sort of abstract element from yellow images calm this is one of my spawn they're not sponsoring this video though I just I genuinely I thought of I want

like a certain sort of look and they have this awesome thing called images 360 and these are all like 360 PNG so like if you click on this one this cookie here I notice it's loading all

these images once it's a little done loaded I can take this thing and like rotate it and find like this perfect angle based on my needs and there's a ton of assets here so I typed in umm

what did I tape in I typed in swirl I think I wanted some type of just cool sort of graphic and I found something yeah this one I and so I thought this was really cool and I and the colors

would work with what I'm doing and utilizing I so I just decided to get this one yeah so definitely check that out I have this already saved off-screen so I'm just going to copy that and then

just paste that in here so check that out so the colors work really well I think I might move these both over just a bit take this there we go might just move things around just a tad

bit now we're kind of centered vertically and right there so I'm happy with that as it is and so now at this point let's get to the part where we prototype the animation I'm and again

we're gonna be using G SAP or the greens talking to make some platform and within Adobe XD we're gonna get as close as we possibly can to you know what we want but due to current limitations we're not

gonna be able to do you know anything that comes up you know on the top of our heads inter certainly when it comes to sequencing animations or making animation multiple animations occur at

the same time when it comes to the way Adobe XD currently is it's very linear like you have to wait for one animation and then the next and you'll see how that plays out especially when we get to

the second part of the video where we make this stuff work in the browser but still it can give us a pretty good idea of how we want the animations to play out so you can hand us off to a

front-end developer or you know for yourself if you're handling the front-end development process so before we do that there's a couple considerations I when you're doing this

sort of complex UI animation where there's multi stepping animations you definitely want to take any components or any any type of UI element like this is a UI element this is a UI element

anything that might change and you want to make them into components Adobe XD components so that let me just give you an example real quick we'll take this we'll duplicate it a few times let's say

we're doing our animations here and we're making them come in and we're just animating from one screen to the next eye and then you want to change at the button like the good button color you

want to change the button color or you want to change the font that's in the button or whatever well if I change it here okay it doesn't change here so that means any changes I make to any that

makes any of this stuff I'm gonna have to do for each one of these artboards which is very frustrating so I'm going to delete these you want to turn those into components so what we'll

do is we'll take like for instance this button here is a component so I'm taking both of these elements which is the text and the container behind it and we're going to right click and choose make

component so now if i duplicate this we now have a child instance or an instance of the component we know this is the instance because of this little eye it's a hollow sort of diamond shape here

this one's filled in this is the master component so if I make a change for instance if I double click into it cuz it's a group and I change the background color to black it changes here as well

all right now what's cool is you can modify the the instance the in any of the instances of this component and customize certain elements so if I make this blue for some reason I and then I

try to change this and make this blue or green it's not going to affect that because I overrode that particular style so that's how I'm components work very handy very important to utilize those I

just so you know what you're doing all right so we have our component there I'm just gonna leave this one this is the only component I'm going to use I just want to demonstrate that important

process so now what we'll do is one of the things I wanted to happen here I wanted to reveal or show you how to do something interesting with gee sap so we're gonna make more complexity

animation and this bridging the gap between dream and reality I want each of those three lines bridging the gap and then between dream and then and reality I wanted them to kind of I have some

sort of texts reveal animation as its animating in and so the way to do that is we're gonna go ahead and I'm actually going to redo this so it's 61 montserrat bold

alright so these each will be their own three lines so it's going to be bridging the gap alright so this is going to go here I'm going to duplicate that with control D alright and it's between

oh this is Center aligning that's why it's all messed up okay between dream and then and reality I forgot to put the period there we go so I'm going to delete this the one in

the back now that way we have their own text layers for each one of these and we can do a a mask on here so I'm going to show you how this works is very cool so I'm gonna go back to the layers and I'm

going to get the rectangle tool and I'm just going to draw out just to where we overlap that entire element right here now I'm gonna take both of them just by left-clicking dragging so we can see

rectangle two and bridging the gap is selected we can right click and I can choose mask with shape all right so it's a group a mask group has seen up here and if we click into this we can now

either hide it or show part of it by adjusting that rectangular to a rectangle to layer or we can hide it all the way so we can animate that position of the mask and then we can create this

kind of cool sort of blinder effect or this texts reveal effect on here so by default I we're gonna have it up like that you're going to be hidden by default and they're gonna come in and

display so we're just gonna move that up so now we need to do the same thing I for this one get rid of that border we don't need it I just hate how Adobe is always adding in a border there I should

at least remember my last selection alright so anyway I what I'll do is take these two now you see it selected both of them the correct ones will do mask with shape and then we'll get in there

and we'll take this and hide it and then same thing here mask with shape get in there and voila alright so now those are gone now the next thing

we don't want any of this stuff showing initially when the site loads we want to animate all this stuff in so what we'll do is we'll take all this stuff all right and what I did there by the way I

just left clicking drug and then just select the other wines I'll hold a held shift and then just select these other ones as well and then what we can do is just take the opacity down so now you

have to ask yourself how do we want this stuff to animate you know do we want it to animate all in at the same exact time well no I personally think it would be a little bit more interesting to have it

kind of Cascade and animate in so we duplicate that and then what is it that we want to animate in first I think it'd be coolest and it would make the most sense from a UX perspective to have the

headline in that way people kind of understand right you know right out the gates you know what this site is or what the site's about at least I have some idea so this is where we animate our

masks all right so I'm just going to open up all these I'll take this one and I'm gonna zoom up here a bit drag it down drag this down and drag this down so what's cool is we can go and start

prototyping this right now we can just drag this we can make it a tap trigger or click trigger just to start the animation and then the rest will be time-based and they'll all animate

without having any user interaction we do want to change this to auto animate and this will just be ease out I think maybe one second and now if we hit play tap look at that very very cool stuff so

now we can also take it a step further and we can animate these things down as well I think that's one of the animated animation themes that we'll carry out through this project I the things will

come they'll they'll be as a past DZero like they are here but they're also gonna come from the top and kind of rest at a certain position the position is where we want it to be currently so we

take this stuff and we'll move it up we want these three elements at least to all cascade down so I have these three in the previous artboard and I'm gonna use my keyboard up arrow key actually

that's not a good way because I couldn't really see what it was doing and just kind of move them up slightly if you do too much animation that where it's going from great distances it usually won't

look very good but if you're it's more subtle usually it'll look a lot better so now if we I we hit play click it so now it's it's coming in and it's doing that texts reveal animation looks which

I looks really cool alright so now what we can do is after that we can duplicate this and we can reveal the next piece of content so that will be this one so this needs to be opacity 100 and we can also

make this kind of oops we can take this one over here and push it up because remember it only animates from the previous artboard so we have to move this one up and then go back to

prototype connect this up all the same maybe we'll make these go a little bit faster like 0.6 seconds so now if we go back hit play click it ah where did it go oh

it was a tap animation that's alright we have to change this to time with a zero second delay so let's try that again click it there we go now when we actually do this for real

when you get into the front-end development process with G SAP these are going to it's not going to wait for this to finish for each one of these elements to come in they're gonna come in at an

offset it's not looking to be at the same time but it's also not going to be where you know this element has to wait for the headline to finish there they're going to be enemy at the same time but

they're gonna be staggered but unfortunately we can't recreate that currently here in Adobe XD based on the current feature set all right so next up is the call to action button that's what

we want to animate in so we'll duplicate that go back to the design tab and we will just take that pasady up and if we want to animate that up as well slightly just push that up and then duplicate

that again next we'll probably bring in this element so with the background and I think we'll slide that in maybe from the right so we'll take this and just push it over here holding shift and keep

it on the same horizontal path and just offsetting it to the right and then we will take this and we'll make this guy the swirl graphic 100% opacity and maybe it'll just will come down from from down

and then it'll go up alright so now we just have some hooking up to do with the prototyping stuff we'd have this and I'm just gonna keep the same exact settings for these alright so now let's give it a

shot hit play hit play or click rather alright and that's it very simple stuff and we'll give that another play alright so make sure to subscribe here if you haven't yet

because in two days I'm releasing the part 2 where we step into the front-end development row with HTML CSS and JavaScript with help of G SAP and to make this a reality

in the browser I'll see you guys soon goodbye

http://www.linode.com/designcourse – Use code ‘DESIGNC19’ to get $20 credit on your new Linode account!
— Recently, GSAP (GreenSock Animation Platform) just released to version 3, which includes a large number of changes. GSAP is a javascript library for creating awesome UI animations. In this video though, we won’t be touching any GSAP (that will be part 2 coming in 2 days), instead — we will use Adobe XD to prototype the design and the animations that we intend on creating with GSAP. So, be sure to subscribe for Part 2!

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!