How to Create PARALLAX Effect In Figma ? Figma Parallax Tutorial for beginners

hey what's up guys welcome to another exciting design tutorial with ux made today we are going to create awesome Parx effect in figma and we'll be understanding principles of it so you can do it in any other tool or in the you know HTML CSS as well uh wherever you want so we'll just understand how the parallx animation works and how this effect is achieved okay so let me quickly you know show you the couple of things which we have here we have basically a background layer which is simple gradient nothing fancy then we have uh some small lipes or you know small dots which are basically stars then we have a sand and some heels like some background heels and some foreground heels then we have some trees and one object which contains water and some bushes kind of thing or Island you can say and then we have these foreground grass elements right and then uh these are some objects which we may merge them with the heel one right okay and then we have this empty frame uh which is going to be our starting point for the Parx so uh so yep let's start with the Parx thing uh so this is a simple frame a simple MacBook frame you can choose uh any desired size which you want I have used MacBook Pro 16 in so let's uh assemble all assets right so now we'll take uh these each and every layers or each and every frames in the PX frame and we be creating animation so let's uh get in the background okay so now you know uh there's a cool tip guys uh so if you you know try to move the objects and it you know using the mouse it basically you know takes the objects out of the frame and if you don't want that what you can do is basically you know uh you can start dragging the object and you can hold the space bar so you know uh it will not drop the elements outside the frame it will still keep the object within the frame and you can still move it wherever you want you know without worrying uh if you know it is going to be out of the frame right so I hope the school and handy te will help you uh now let's bring in Our [Music] Stars let's arrange them something like this then probably a hill or maybe we can have Sun first and then heal on top of [Music] it I'll do command X and command oops just to avoid you know uh add the elements in different layers I guess we move Stars inside the background so let's just take them out we have stars and then we have Sun let's align it maybe somewhere here okay now let's bring in a hill above the sun layer make sure you know you're keeping a eye on your layer stack because uh in the Parx effect it is very important that you know uh your objects are arranged in a way so I'm just you know uh aligning it somewhere at top of the screen then let's bring our heel to and let's yeah probably a little down okay looks good then these are some uh foreground trees we'll put them just after the Hills right and then let's get a water layer in and let's move it at the bottom you may use any other picture you may use you know any other assets uh by the way I have you know downloaded this asset from preck if you want the same uh you know image I'll put the link in the description you can download the same uh picture from there and you may you know recreate the same PX effect and if you want anything else you can uh you know get something from the free pick or you can create your own assets so up to you how you want to do it okay just scale it a bit just so you know match the harmony which I'm looking for okay so our basic picture setup is ready now we'll be creating the interaction and to create the interaction we can have a scroll bar it is up to you if you don't want any scroll bar you can simply you know uh do the interactions on the frame itself but I feel you know to have scroll bar will help users to understand you know uh where they can uh click and drag to create the interaction or to create the PX let's just simply align it at the extreme right age okay great uh something like this let's call the scroll so we will not get confused while creating the intructions and animation and probably I'll lower the opacity so maybe uh 40% okay looks good now let's create the duplicate of this this is going to be our uh second frame and uh now I'll tell you you know how the parallx actually works so uh basically parallx is uh basically you know where uh the multiple layers are arranged uh in the 3D space right so that is environmental or you know uh effect which basically takes place when you uh pan around the multiple layer so the objects which are far in the distance are you know uh basically they move quite slower and objects which are close closer uh to the camera which basically you know moves faster so that is how you know the parallx works so when you are creating the animations for Parx this is a important tip which you need to make sure that you know objects which are closer to us you know those should be moved uh quickly and objects which are far away like you know stars or the hills in the background they would be moving quite slower so when we would be animating them we' be you know making sure that we are recreating that effect of the parallx thing and the second thing uh of you know uh or the second rule which you can say is basically the objects are animated relatively uh you know or relative to each other not relative to the stage or to the position of you know the entire artwork it is basically moved or animated relative to each other so that's how you know we can create the parallx effect so uh let's see how we can do it with this particular example and you can you know transform the same things in any other image as well that really doesn't matter matter so let's uh let's keep this out of the frame for now let's focus on the second frame okay and we have the scroll first let's animate the scroll let's move this at the bottom of the frame great uh now as I said objects which are closer they will move faster so we need to you know change the position of the closure elements a lot than you know the position of the background events uh uh background elements right so let's just move this quite up okay um something like this now then let's take the water as well and move the water a little bit up so maybe like this okay and then what do we have here okay we have these uh small bushes so let's just do it something like this Hills I'll move down and Hills one as well I'll move them quite down now you'll be seeing okay uh we are still seeing them in the background so yes we'll fix them soon but let's just animate the sun and the Stars so sun is kind of you know setting so we'll just move it and let's move the background a little bit down so you know we'd be having more of this uh darker age you may scale it up if White and The Dark Age you know at the top of the uh uh top of the age because we are creating that you know uh Sunset effect or you know the sun is down and the uh moon is about to rise so we have the darker sky right and then what else we left we left with the Stars so we can move the Stars a little bit upwards so now if you see we are not you know animating all the elements in a single direction if we do that then we'll not able to you know get that parallx effect and now to cover up up all these things we'll be having a rectangle so I'll just quickly draw a rectangle first okay and I'll take the color of the you know uh foreground bush is just to you know match uh the layer and match the continuation and then you can have your rest of the design there I'll just move this uh in the frames so first scale it up okay and now I'll just move it a little up and now we need the same thing on you know the first frame as well because uh if you know figma how like how figma animates thing basically it takes the name uh of the you know objects or name of the layer and based on that it creates the interpolation uh between it if you uncheck the you know master class which we have uh or you know we had the figma live session on animation I would say you know please have a look at it because it has very detailed explanation about the animation curves about the timings and different techniques of animations and and we have explained how does figma interpolate animation and you can understand a lot of uh nice insights about the figma animation so let's just say maybe you know foreground color right and make sure it is uh behind the scroll bar or else your scroll bar will not be visible let's just copy this move it uh paste it into the first layer as well but now we'll be moving it away uh from the frame so we let's just you know move it out of the frame now our basic set is done our you know uh uh all the things which we wanted to animate we already animated them now the fun part is uh create the interactions between them so let's you know uh create an interaction on click interaction uh and that is going to be navigate to make sure you not there make sure you're selecting you know move in or smart animate you can choose either of them I'm choosing move in because I want you know uh this to create a uh you know two layers kind of of Animation so when I'm saying move in it is basically moving in my frame completely you know uh from the bottom so I'm giving the direction here and then I'm checking this bo uh you know check box where it says animate matching layers so it basically you know animate the layers which has U uh similar names and then uh for the timing curve again I would say you know if you don't know how these timing curves work then I would say you know go ahead and check the uh check the master class or you know the live session which we had on the figma animations because we have explained all these timing curves what does linear mean what does ease in ease out ease in and back ease in and um ease out back you know what is the basier tool or basier curve how to you know handle uh these things we already uh you know talked about it in more detail so we'll keep it you know Limited in this video I'm using custom spring just to create that you know nice and cool springy animation and uh I just have you know uh a subtle springy or you know a bouncy effect not a lot a subtle effect and uh sorry instead of on click we are going to use on drag because we want to create that scroll effect so we'll be having on drag uh and let's do the same from you know the second uh scroll bar to the uh or the second frame to the first frame this time let's do it you know uh direction would be uh from the top to bottom because this layer is like what we are creating basically we are creating a scroll effect you know using the move transaction and then we are again asking figma to animate the matching layers so it is basically creating this it is a mixture of smart animate and scroll uh kind of thing and we are cheating to to basically create a scroll effect right and as we have animated the layers it will basically create this uh nice paralex so let's just tast this I'll create a quick starting point here and that is going to be paralex and let's just test [Music] this so now now if you see you know our foreground layers are going up and background layers are going down oops I guess uh from the second layer we have created on click interaction so make sure it is on drag as well and nice so if we want to know uh the interaction on the screen itself rather than just on the scroll bar we can do it that as well so let's just create a quick interaction from the frame [Music] itself we can you know further adjust uh the elements you know as uh you want so let's you know let's say if we don't want to cover you know that much of uh of you know the screen with the darker background probably we can just you know do the trick as well let's just adjust the uh elements a little bit this is completely you know up to you how you want to basically create that look and feel if you want to show you know some uh sort of you know the elements at the background and you don't want to hide everything we can still do that so you can keep you know some part of the background images uh background Hills a little bit visible and I'll give you one more trick guys now what uh we are going to do here is for the heel 2 and for heel one in the you know uh in the second layer make uh in the second frame I'll just close this for now so make sure you are in the second frame and you're selecting this uh heel 2 and heel one okay and we'll add a layer effect so we'll add effect and that is going to be a layer blur effect on these two layers or these two frames Hill two and Hill one because we want to you know show uh that these objects are far in the background and just we want to blur them a little bit just to create you know that uh that bluish kind of thing so seven seems good let's just you know see how this interaction works by the way one more tip uh guys if you want to switch between design and protype tab you can simply hit shift e which will you know uh shift between prototype and design tab easily so let's just taste this so now you can see I guess I'm not happy with the movements of star because you know stars are moving up uh which is uh I am personally not liking so what I'll do I'll just move these Stars uh in the second layer uh these stars oops sorry actually I have changed the page accidentally so I'll just move the uh you know by the way if you if you hit function and you know up and down arrow you can shuffle through the pages at least on Mac I'm not sure on Windows because uh I have mostly used Mac so yep I'll just move the stars as well a little bit you know downwards uh because I'm not happy with the way they are looking yeah so very subtle and you know nice interaction there now uh we'll be you know adding a little crisp to this so crisp as in you know we'll be just now we are just move move the elements in you know One Direction which is up and down now we'll be moving the elements a little bit right and left as well right so that will create more interesting uh parallx effect so I'll just close this and I'll select sun in the second layer and I'll move it a little bit right okay so that is a bit right and then I'll select the the grass and I'll just zoom in a it a bit zoom in as in like I'll just you know scale them up and I'll move them a little bit on the left same I'll do with the water I'll scale it up a little bit in the second frame and just move it slightly towards the right not much uh that has to be very subtle because if you do it you know uh a lot then uh you will not get you know the the look and fail or you that subtle uh animation so just make sure you you are doing it very few pixels you know uh 10 to 15 pixels here and there and then just move these Hills a little bit here so that is again your personal choice uh we are done with you know the basic parallx effect and you know you understood how it works but now if you see uh the way you know the sun is uh going towards the right and you know uh the way the hills you know are slightly Shifting the way water is you know kind of zooming in a bit and you know the grass is also zooming in and you know moving a bit away from each other so we'll just enhance that a little bit more and we'll just scale them uh you know at least these two layers water and the grass and we can you know adjust the look okay uh let's just see this right so we have this nice parallx and figma and I hope you enjoyed this video make sure you have already subscrib to the channel if not then do it right now and don't forget to hit that uh like button because that will motivate us and if you have any doubts if you have any suggestion if you have any questions uh feel free to know write them in the comment that will help us to you know bring the content which you want to learn and till the next video yes keep watching keep learning keep designing

Channel: UxMate

Views: 885

Keywords: Parallax scrolling effect in figma, figma parallax scrolling, parallax scrolling figma, parallax effect, parallax scrolling website, figma tutorial, figma tutorial for beginners, parallax effect figma, parallax animation in figma, figma parallax animation, figma, figma parallax animation tutorial, how to create parallax in figma, figma parallax effect, ui, figma ui design, figma tutorial for begginers, how to create parallax effect in figma, figma for beginners, figma basics

Id: qXTFtWO8s0c

Length: 18min 50sec (1130 seconds)

Published: Tue Feb 06 2024