How to create a Parallax Effect in Figma

[Music] hey youtube this is will from wilbrat design today we're going to be looking at uh parallax and how we can create a parallax effect in figma so figma is a 2d software and parallax is usually a 3d kind of effect so we're going to be faking it but first of all what is parallax so parallax is the apparent displacement of an object because of a change in the observer's point of view so what does that really mean um so i've created a few different shapes here and to kind of explain what parallax is and what the parallax effect is and how we can achieve it in 2d as we have no z axis we've just got an x and y so the way we're going to do it is objects that are in the foreground are going to move further than objects in the background giving you kind of a fake sense of fruity um because if you were to imagine looking out um as far as you could see or and there's some mountains in the background in the foreground are some trees and then really in the foreground are some people and you were to move from left to right the people in the foreground would be moving faster than those in the background so the the mountains wouldn't be moving much at all so let's have a look how we're going to do this so this object here this rectangle the largest object is going to be the foreground and the smaller the object the further it is into the background so if we were to move objects from the center of the screen to the left of the screen the larger objects are actually going to be moved further to the left than the smaller so we have everything's kind of a little bit out of alignment compared to when they're in the center and when they're over to the right of the screen the foreground objects are again further to the right with the background objects being less so i've then gone and created a little prototype where we click this object it then loads this one and aft after a short delay it then loads this frame and then we've got it looping between these two frames and it's all smart animated so let's have a look at that here we go so we're now in the prototype and if i click what's going to happen is those objects are going to shift to left and to the right and it's going to loop and we're going to see that the objects in the background don't move as far and it kind of looks a bit 3d so here we go so if you look directly at the triangle in the center you will see you it will kind of give you a fake sense of perspective this is called 2.5 d so it's trying to fake 3d in a 2d space so how can we use this in our designs so what we're going to do is we are going to create a a little mock-up in fact i'm just going to pull here we go an iphone here and we're going to create a window here with a small scene and as we swipe or drag through this screen we're going to create a parallax effect with the image and then load some different items down here so let's get going so i'm just going to create a small frame there we go let's make that 450 height and the width of the entire device let's then let's do this in three stages so i'm just going to make some breadcrumbs here so let's make them much smaller than that let's make them 24 still quite big let's go 16 and if i zoom in a minute whoops i'm just holding down alt here to drag and duplicate there we go let's group those together let's remove that fill and add a stroke for those instead i don't know not to drop down the stroke and let's make all of that one color let's go what should we do here let's do a blue okay and do the same for these two on the e-stroke there we go so we've now got our bread crumbs let's add some text let's call that title one make it bold make it 30 from there and 30 from there i'm not actually following any kind of spacing pattern here but we should probably do it in multiples of eight let's make that 24. cool and then let's just add a bit of lorem ipsum or just some placeholder text i'm just going to pull some from the internet quickly or you could use a plugin for this and let's make that regular and let's make it 14 seems a bit small 16 and then let's just change that line height to be 140 percent there we go so that's a bit more readable there we go so that's our first screen made let's now go and duplicate that a couple of times make sure that's actually inside the frame so this could be a perfect example of making a ui for an onboarding or an introduction to an app or something like that let's just do let's oops a quick swap over not sure why that's not working there we go whoops should be two and then three let's put these two round there we go so we've got our screens ready so we now just need to make our scenes i'm just going to pull these down stack them because our scene is going to be quite wide and it will give us more room to work with so if i just open up my finder i've actually already created some images or i've pulled some images off the internet i should say um but i've separated them out into different layers and then just saved them out as png's you could do this with svgs if you would like something a bit nicer a bit more vectorized because these are actually quite pixelated but for for this purpose it should work these are also saved out at the exact same size so if i just overlay them there we go we've got our scene together now so what we're going to do is we're going to be placing this scene just quickly inside this frame and we're going to have it move from left to right so it probably starts somewhere like this and then in this frame it moves to the middle and in this frame we'll move it to the right but we're going to do something a bit better we're not just going to have everything moving at the same time we're going to have each of these layers moving at a different rate so hopefully we get that nice parallax effect okay so we want to do that now let's bring that inside our shape here and let's let's make that a mask so we no longer have that rectangle um or do we want the rectangle actually i think we'll keep the rectangle because we've got the frame itself working as a mask so let's make that rectangle a different color so it's not so horrible or shall we keep it white maybe we keep the rectangle white and in fact make the scene itself let's make it that blue that might be quite cool and then we'll come through and make this white and this also white yeah i think that looks better to me and let's do the same let's do the same for this these two as well so this would have been better if i'd had a bit more of a plan before starting this video um oops it's just a bit of the design process as we go so let's just do this one as well change all of this and there we go so right there we go so we just need to make that and that white now and let's copy that out and we'll start on the first scene instead the first frame sorry so i'm just gonna group all these together quickly and let's call this parallax group and then move it inside that frame change plan ungroup and we're going to bring these individual levels in one at a time so what i'm going to do is i'm going [Music] to first of all center this one i'm going to bring this kind of cityscape in again center it we're actually going to move this um so it's more left aligned but for just to start with we're just going to do that and then we need to do the same with that one slide where i want that to go somewhere like that looks good and then again center that one cool so we can now come in grab all of those copy command and see and do the same select this frame copy and paste it in by pressing command v and we'll do the same here okay cool so we've now got all our different screens and we're now going to start working on the movement so remember the background if i show you from the previous example the background object moves the least amount so it's still closest to the center when it's moved to the left so and the same when it's moved to the right it's still closest to center and then those foreground objects are moving the most so we need to apply that same principle to our scene here which means we want this foreground which i've numbered for um to move the most so we are on our first screen and we want let's move that right to the left like that let's go to the next one so if we were to move that right to the left as well so if it's left aligned that'd be a bit too much but i'm going to start out with moving left aligned and then i'm going to hold down shift and move it to the right let's say 5 and then if we grab this layer with the two which is the cityscape do the same and we're going to move it 10 to the left using shift so that's actually moving 100 pixels to the left 1 2 3 4 5 6 7 8 9 10. and lastly grab the clouds that's again left align it and then this time we're going to move it 20 i think or 15. yeah let's go 15. so one two three four five 6 7 8 9 10 11 12 13 14 15. cool so we can have a quick look at what that will look like if we just hold down shift e bring up our prototyping we don't want instant we want a smart animate we want it over a pretty big period of time so let's make it 800 and let's do a nice ease in and out and for now we'll just do it on on tap and just for this demonstration we'll do the same going back the other way so let's have a quick look nice legs this might take a little while for the images to come in wow they really are quite pixelated so if we do a smart animate you can see that that foreground is moving much we need to fix that issue there but the foreground is moving much quicker than the background and it gives you that kind of cool parallax perspective what would be nice is if eventually we do this on a drag so let's carry on working on that so first of all i want to fix this issue where i've actually just moved these around and that looked terrible so i'm just going to hide this a second so i can get hold of these swap those around and we're going to have to do it the proper way which is remove the fill on that one add the stroke and then apply it to this one instead so that's the fill remove the stroke and again we swapped i believe just need to show all these again wouldn't that work there we go i believe i swapped these two around last time add the stroke remove the stroke add the fill so let's just make sure that is actually correct now shift e into the prototype takes a little while to load especially because i'm using uh jpegs or pngs even um it's got loads of those image files as well there we go that's much nicer cool so let's have a look let's see if we can make that work on a drag instead on drag and on track so hopefully yeah there we go we've now got a nice kind of swipe motion that you would expect from the phone and we've got a really cool little parallax effect up here let's then go ahead and do the same for the third in fact copy the first no yeah copy copy uh from the middle because everything's centered and paste it into that frame and then what we did last time is we left aligned everything so we're going to right align everything this time so just go back to our design right align so the top layer was fully right aligned then the layer after that we right aligned it and then we moved it five so 50 pixels to the back to the center so one two three four five same for the cityscape behind one two three four five and then one two three four five so that's 100 pixels and lastly the clouds right to line and then we did 15 so that is a 150 pixels one two three four five one two three four five one two three four five there we go and we now need to do a on drag from there this might animate over 800 seconds and we also need to do one back [Music] right i've not actually played around with the same command on drag from the same screen so i'm not sure if this is going to work if figam is smart enough to know if you're dragging left or right i'm hoping it is but we shall find out now okay moment of truth no okay so how are we going to fix this for the purposes of this prototype we can do i know what we can do let's delete all of our transitions and what we're going to do is we're going to have stay there stay there so we're gonna go from this state to this state this state to this state this state to this date and this day to this day so essentially we just doubled the middle state okay so we want the on drag 800 milliseconds smart animate and up to this one same again on drag 800 milliseconds he's in and out this one will go to this state one drag all right there we go and then this one will go [Music] back to one so hopefully that makes sense and we'll test it to make sure it does there we go not sure why a top tip which i keep forgetting if you're going to be working in your prototyping a lot just don't close it because then you don't have to do that load each time um you make a change because it will update it uh it does like hot updates which is pretty cool so let's have a look nice so it's not exact behavior that you'd expect because you might want to swipe between one and two um but it's pretty cool for this example we could also go in and add a button so let's just create a quick button if you don't know how to make a button in figma there's a really cool way that you can do it and you can um do it really quickly as well so we might as well demonstrate that now so let's just bring it in button what i've done there is i've just created a text layer i'm now going to auto add auto layout to that so you can either well actually first you've got to frame it but although you don't you can press shift a to auto layout so it's now got a frame and if we add a fill to that frame but yeah white works for this and let's make that text bold because buttons should be better we can bring it in there make it a bit bigger you can see the text isn't centered so let's do that let's go find that text center that and do the center there we go so let's make this button a bit nicer so i'll center in the frame 24 24 let's add 380 that should be yes nice there we go so we now got a button which we can duplicate actually before with that let's uh let's just finish off this properly let's pull this button back out and we call that button active we're now going to have a button hover and then we can have a button pressed and not that we're going to use it in this example but a button disabled so just so we've got all the different states and then if we just come through and do it how we how do we want this to do so we could perhaps uh what could we do on this one we could make it let's just do a color change so on hover it changes to blue when it's pressed let's just change this to change the background to just a slight gray and the button blue can make it darker blue perhaps and then disabled we can just make text great okay and then if you select all those multiple components make sure they're named correctly before you do this so you call it button and then forward slash and then the state you want and we're going to do combine this variance so now we've got our buttons here if we go to assets pull in our button that we just made and drop it in to each one of these one thing we haven't done is we haven't done our states on this so let's go shift e so that button on hover or smart animate over 200 milliseconds to our hover state hover state on tap will smart animate over 200 milliseconds to that and then that will return to our active state not on a tap but after a delay and we'll say let's say one millisecond so if we go back to our prototype we will now see now we went why is that not working uh while i figure that out we are just going to also have it so that you don't have to just drag you can also click button to go to the next state so we're going to do a smart animate over 800 milliseconds easing them out for that one to that one and same from that one to that one and same from that one to that one and because we created a new component i am actually going to close that because that might be what the issue is and reload it here we go so there we go it's now loaded so yeah that's what it was we just needed to um reload our prototype so we've got the hover state on the button now and clicking it will take you to the next section obviously you wouldn't expect that button to take you back but for the purposes of this tutorial it will so that's pretty cool we've now got this parallax this is a really nice way of doing some onboarding and i've done this in a few projects before and it's been quite successful especially when you're kind of explaining new features or celebrating something in the app just a nice nicer way of displaying information um this is probably just aesthetic and not that functional um you could probably find some ways of making it functional but it is just to add a little bit of polish to the app which is pretty cool so let me know what you think drop your questions below in the comments and i i do try and respond to everyone if you have any questions about parallax or about using figma or design in general i'm a professional product designer and have been working as a digital product designer for some of the biggest companies in the world so hopefully i'll be able to help answer your questions if you think of some other uses for parallax that i haven't mentioned in this video also drop them below that'd be really cool um i'm sure there's stuff i've not heard of so i'd be really excited to have check that out but also to share it with the community and grow our design skill sets globally would be really cool too um if you have any other questions about anything else drop them below um please like and subscribe to the video share it with your friends i'm putting this out for free with the idea of just sharing knowledge to as wide an audience as possible so the quicker this channel grows the better and thank you very much for watching i hope you enjoyed it and i'll see you in the next video cheers bye

Channel: Will Brett Design

Views: 1,498

Keywords: Figma Parallax, figma, figma how to, figma tutorial, parallax, parallax effect, best figma tutorial, UI design, figma ui, will brett design, will brett-atkin, william brett-atkin, design, figma parallax effect, figma parallax scrolling, figma parallax animation, figma parallax tutorial, figma parallax prototype, figma parallax background, efecto parallax figma, figma parallax backgorund, figma parallax scoll prototype, Figma parallax scroll prototype

Id: XmNGjHcKhyY

Length: 29min 30sec (1770 seconds)

Published: Sun Nov 14 2021