Figma Parallax Effect - NEW Smart Animate Feature! 🤩

things just got really exciting in the world of figma because it just released something called smart animate look at what you are going to learn how to make in this tutorial look at that hey everyone what's up Gary Simon so today is exciting because first of all I changed up my camera perspective I pushed it back and I don't know you can see more of me now I I don't know maybe you guys want it I just suck Gary Schutt but no it's exciting because Adobe XD had their auto animate for quite a while and a lot of users of Figment wanted something similar something that would allow them to easily create animations and transitions between different artboards and now they finally have it they couldn't call it auto animate that would be way too obvious so they called it smart animate and it works pretty much exactly the same way so I'm gonna be showing you how to create that parallax sort of eye effect before we begin though 'la note the sponsor of this video makes it easy to host your site your app for service on whatever technology stack you use with one-click apps like wordpress 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 to 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 Lunada count and the main purpose of course of doing that is just to show off this new smart animate ability which you wouldn't really have been able to do this prior to smart animate anyhow so here's the thing if you guys want me to show you how to make this a reality in the browser with web technologies such as HTML CSS and JavaScript which is what it would be required then here's what you have to do I need a like from you and I need to get to 1,000 likes within 72 hours of uploading this if I don't make 1,000 likes then I'm not going to do another tutorial that shows you how to make this a reality in the browser so if you're watching give a like and because trust me I get like 2,000 views in the course of like three or four hours so give a like leave a comment share it around let's get started alright so the very first thing you need to do is to figure out obviously the composition you know in order for you'd have a parallax effect you have to have layers so layers would be it could be layers of photographs on top of each other cut out with transparency on them it could be illustrations as long as there's transparency in them then you can create the effect where one is moving faster or slower than the other so I decided I was going to do a kind of like just a wilderness scene alright and so I went to unsplash.com as you see here and I typed in trees and I found this example right here which I it was perfect because it has a white background I can very quickly in Photoshop which is what we'll be doing just remove the background this lists the sky background from the trees so download that it's free of course and then also the I wanted to have mountains behind it so we're going to do a little bit of compositing I search for mountains and the one I decided to choose was this one right here and so we'll just be using part of this image we'll be using a photoshop tool that will get rid of all the orange from the east and I'll show you how to do it so just make sure you download both of those and after you do that we can go ahead and hop inside of Photoshop oh but real quickly before we hop into Photoshop let's get the canvas set up in figma and that way we will know the exact dimensions that we can set up then in Photoshop so we're going to take the artboard tool here we'll use iPhone X so we're just going to make this mobile for now and then we will check it out so what is this the width is so it's a twelve by three seventy five so three seventy-five by eight twelve we'll hop inside Photoshop create new hope sorry so on the other screen so it's going to be a twelve by three seventy-five hit create and I do want it to be a little bit larger than that so I'm just going to go to image image size and of course it's showing up on my other screen and I was going to change 375 make sure the this is constrained so if we change the width it'll change the height as well to 500 in that way we have a little bit larger resolution images to work with and that way if it's scaled up larger on bigger monitors it won't be so pixelated okay so now what we'll do is import both of those photographs that we downloaded all right so let's go ahead and import the mountains first because that's going to be the very background element so what I'll do is because this is larger definitely larger than our our canvas here I'm going to hold alt scale up right around there and then apply it there and then we'll just put it right around there or so and I we're going to go ahead and fix the trees but we're gonna wait a second we're going to import the other one the other download the trees graphic so drag that from your desktop or wherever you saved it and then yeah maybe right around here and there we go so first we'll take the well you can use the magic wand tool but there's also the background eraser tool that you can use but in order to do this we can see there's a stop sign here right click we can take both of these hold shift right click and rasterize them because they're smart object layers whenever you import it or drag it on from the desktop so now what we'll do is take the back the magic eraser tool and left-click and that's not ideal because we can see all that stuff behind me though there's still whiteness behind there so I let's see here yeah so I think we need to turn off continuous there we go so that's a little bit better it's still not perfect we could still see a little bit white in here but I'm not too concerned about that i if you had more time we can go ahead fix it up and for this it's fine and then also we will fix up all the orange we kind of basically just want to desaturate the the orange here and so there's a tool that I found and I believe it's new relatively new it's a color replacement tool and so we can just increase the size of this sucker way up and we just get like a color here alt left-click and then kind of just desaturate them here it's in reality it's probably gonna be up a little bit higher right around there so let me fix that too just delete it alright good so I want this to fade off into kind of like a darker color so we're gonna take our background we'll take the foreground and we're gonna make it somewhere almost black but not quite so 1/4 1/4 1/4 for the color code and then go ahead and I will paint bucket this in and the the back here and then we will use don't worry we're almost done with Photoshop here create a new layer on top of let's see this layer and then what we'll do is take the rectangular marquee tool and just come out like this just beneath where it starts and right around in a halfway section right around there you know we don't even have to put this on a separate layer I guess we will initially and then we'll take the gradient tool make sure it is set to foreground to transparent so take your foreground color to transparent start at the bottom hold shift drag up and there we go we've created a nice kind of just gradient that blends all the way down alright so I the fact that this has kind of been high up in the middle right now it doesn't matter we can reposition it once we get it into figma so at this point we need to export to graphics so I'm going to take this layer one in here which is the gradient that we added in the trees and we're gonna merge those ctrl e and so now we have our two different layers that we have to work with so I will go ahead and take both of these right click and let's do quick export as PNG and then you want to save this wherever you're going to save it alright so now we have both of these graphics here and let's import first the the mountain scene alright so they're like right around there we can position them up and change them here in a second where am I at wrong one there we go and then this layer on top of it alright pretty good so now we just want to make sure what was that color code oh it doesn't matter we can I drop it so to take the canvas select it change the background here get the eyedropper and just choose that one right there so now we have our background matching up with the graphic here so now what we'll do is just to make this look like you know an actual app actually has something going for it we'll take the type tool and we'll call this a nature company or just comp Swart I used a specific font for this noble noble okay let's see your know n OB IL e so you guys can use that as well and then we'll bold no well we'll choose medium and we'll increase the font size so you can just use your up arrow key on the keyboard put it right around there good white space or so from the left and top all right and then we'll go ahead and control mouse wheel to zoom up we'll get a little hamburger menu go on something simple that's a good width or so and then ctrl D to duplicate it and then ctrl D to duplicate it down very simple stuff okay so now group those make sure there's a good even spacing next up we'll also have a text area for a headline so I just go from the very left of there every right and we will Center it and we'll say preserve nature I'm gonna put these on two lines though so now will increase this quite a bit good visual hierarchy you know in terms of your type you don't want people focusing on the logo as much as you do on your message all right so right there it's looking pretty good yeah and I want this to be quite simple by the way so I'm not going to be having a lot more content in fact all I'm just gonna have is just like I got a line here wait not that we want to align there we go or the L for shortcut there we go get around the center kind of like where the lighter section is just make it that long and let's yeah that's pretty good just one pixels fine get it centered up if you wish duplicate ctrl D drag this sucker down and also make this white so it kind of just like this is I don't know something to direct the I saying hey scroll or drag this thing so you can see this awesome parallax effect and then finally we're gonna come down here and we will use the polygon tool to create the arrow I'm used to Adobe XD and the scroll shortcut is ctrl not alt so that's why I'm like screwing up a little bit there all right if you ever run into this issue by the way where it doesn't seem like it's really centered up I think that's pretty Center right there you can always I just hold shift and scale it up and sometimes that'll get it working better so now what we'll do is these two are going to be on a group so ctrl G everything else is pretty good that's our starting point so what we'll do now is hit control D on the artboard or select a canvas and initially we want this stuff to animate in alright so this is where the new feature smart animate finally comes in to the video so what we'll do is we'll have this stuff maybe come down from the top so we're just going to put it up here also by the way if you drag it outside look what happens in the layers it goes outside later it won't work so if you do that make sure you just take those both and put them back in and we're gonna take the opacity or they'e pass through to zero so now they can't be seen so it's going to animate it's going to smart animate based on those two elements the position because we moved it up and also the opacity then we're gonna take I suppose this one this is well we'll come in so we moved it up holding shift to make sure it stays on the vertical path and then zero pass through I suppose this as well yeah I'll do the same thing and then this element how about we just have it come up that way there and that's all oh wait we'll have these elements to come in so maybe this comes in down here we'll also select the mountain let's see where and layer 11 it's called so I'm just gonna use it down oops no it's not it's called that one there we go oh we don't want to do that maybe we'll just come up from the top a little bit all right so now a bunch of things are going to animate so in order to make them smart animate go to prototype select this we're gonna drag this over to here there we go and then this is gonna be after delay we'll say like a 200 millisecond delay just to get it and hit play and then see it load up or whatever then we want to change the animation to smart animate with a a total of maybe 800 milliseconds and we can see ease out that's fine that'll work so now hit play well sometimes this happens because there's these images are large so hit R on your keyboard there one thing that needs fix is this we need to push this down a little bit so I'll do that there that's very cool so let's go back here and I'm just going to take this and keyboard down arrow key to right around there it updates automatically and that's pretty good so now our alright so now let's make this thing actually you know draggable so what we'll do now is let's see here we will control D on this second artboard and now we want to make some drastic adjustments to this so first in order for parallax to really have a parallax sort of effect the elements that you're animating need to be animating in different speeds if you will so the the two primary elements we have here for this effect outside of the type and you know this little illustrations here are the background mountains and also the foreground element of the trees so we see our mountains are already up here we're not going to want to move the mountains a lot but we are going to move the trees quite a bit so what we'll do is first I guess we'll work on the foreground elements and getting them out of the way so we'll take this nature preserve text we're going to shift it up just make sure it gets back in there and then go back to design and change the opacity to zero next we'll make this one move just a little bit and that will be a pasady zero as well and then we'll take our mountains and it's gonna move maybe just up to here alright and we're not doing any opacity this time it's just going to be a position animation then we're gonna take this a layer 11 and this thing is gonna go way up oh man I should not have let's see here there we go yeah I wish I didn't make this why so what do you call well that's fine so long but that's no big deal so now let's see here I think we'll just go to there so alright so now this element I think we'll just push it up as well and put 0 and let's give this a test so we'll go to prototype and we'll choose it's already asked more animate ease out maybe we'll do like eighteen hundred milliseconds for this one and instead of on tap we want on drag all right so let's give this a shot here look at that let's hit R again so it comes in we drag down how cool is that I still don't like the I think the appear locks effect could be helped a little bit more if for instance see because if you look at the trees in the mountains they're going at the same rate almost and that's not helpful so I think what we'll do I'm probably gonna pause and we're gonna edit this real fast I'm going to edit so there's not so much trees behind us because we don't even need this let me go back to here maybe I won't pause I don't need to early there we go I got the the edited image back in here so now there's less space I was able to move the mountains a little bit less in fact we could probably take them here and push them down just a blip not quite right there yep nope you can still see it there we go alright so now let's give this a test here and let's hit R to reload that's much better drag now of course when you're dragging you really you just drag a tiny bit and just going to keep on going it's not really drag base you should strike activating animations nonetheless is still pretty cool so now let's add in the foreground information and the text it's just going to be you know nothing too exciting let's see here we'll have strategic alright so let's go back to the design make this white and then left aligned it so just something like that duplicate why is it not duplicating what is going on oh it's Duke its duplicating the fill okay let's get rid of those select this now duplicate there we go and then I don't know a lie a lie wait no Alliance okay strategic alliance I think that's what I'm using okay so then we'll scale this down quite a bit I don't know I'm just screwing around having fun what type that looks pretty good and then we'll finally have we're gonna use some lorem ipsum generator good stuff here let's see and where is that will make that there we go scale is down probably like sixteen and then where's my lips imply Ginn we go to plugins lorem ipsum if you don't have it manage plugins and then choose lips um lawyers or search for a law remand just install it oops what am i doing where am I going there we go I warmed up something there it is generate alright so not quite enough let's do like 15 here and then let's increase this section we'll go ahead and maybe make it not quite white fill maybe right around there yeah we're just about done I think we'll just take this text and give ourselves a little bit more to work with regular that's just on the borderline not being enough contrast in there there we go so now we'll take this stuff see in order for smart animate to work just like auto enemy and Adobe experience design or wxd these layers have to exist in the previous artboard from which it's animating from so we just take all them ctrl C to copy select on the artboard ctrl V to paste and this will start down a little bit and we'll give it a 0% and there we go let's try it out so let's it are I think I wanted to have it animate just a little bit more so we'll take this a tick control Z a couple times there we go so I'm just dragging it down even more so so are there we go so now it's nice and in pretty smooth very cool oh and also if you want to reverse it so you can go back and forth which is you know worth doing we go back to prototype drag this over here choose drag on drag and maybe we want this one to go a little bit faster so it doesn't have to be eighteen hundred milliseconds we could do like a thousand milliseconds or one second what are you doing there we go and that's good so come back drag down and then drag up a hohoho look at that awesome alright guys hopefully you enjoyed that you learned something new it's really exciting having you know these big titans like such as Adobe and figma going at each other you know releasing new features in order to compete and the end users us being the consumers were the ones who benefit awesome stuff so again if you want me to release the HTML CSS and JavaScript portion another tutorial that will show you how to take what we just made and make it a reality and devices in the browser give me a like I need to get to 1,000 likes within 72 hours once we do that then fine I will do it and I'll upload it within a week or two alright see you soon goodbye things just got really exciting in the world of figma because it just things just got really exciting in the world of Adobe enough things just got really exciting in the world of things just got really excited in the world things just got really exciting in the world of figma because it just released something called smart animate and this is what you are going to learn how to do look at

Channel: DesignCourse

Views: 167,337

Keywords: figma tutorial, figma parallax, figma parallax scrolling, figma parallax effect, figma smart animate, figma smart animate tutorial, figma smart-animate, auto animate, adobe xd auto animate, figma vs adobe xd, parallax prototype, parallax effect, gary simon, ui design, figma ui design

Id: RT5h-lLH0QA

Length: 24min 57sec (1497 seconds)

Published: Wed Oct 09 2019