Parallax Scroll Effect - Figma Tutorial

yo what's up guys Adrian here in today's video I'm going to show you how to create the illusion of having a parallax scroll effect right inside figma without any plugins using figma itself so without any further Ado let's jump into the video and I will show you exactly how we can do this [Music] okay so we are going to start by adding a desktop frame so let's hit F and choose our Default Resolution for desktop screens which will be 1440x1024 and let's call this Frame one because this will be step number one and let's add start adding our design components and for this we need a pretty simple design that can give the illusion of having three-dimensional space so let me just hit T and start adding our text let's increase the size this like a high value of 80 and let's place it in the middle and holding option drag to resize our text text box and let's middle online art text I want it a little bit too far with the text size so let's reduce it to let's say 70 but we want the text to break uh like this that's our text done and let me zoom in a little bit and I will add a button here so it's also hit T and start typing our text get started and we'll make our text 17 maybe 16 pixels and let's reduce the up to medium hit shift plus a to add a auto layout frame around and holding shift and option drag on those handles and let's middle align this let's Middle Line This and add a fill of let's go for something purple like this around those Corners to about 12 pixels and change the fill to White let's paste it 24 pixels from the top and let's quickly add our header header and I'm now going to create a header from scratch if you want to see how to create a header watch one of my previous tutorials end of the pride it's marked as a chapter so we can quickly navigate to the exact part of the video that I'm discussing this or you can head out to my description and download the ultimate prototyping pack and use the components from that pack as your Baseline when designing your prototypes for our hero image I'm going to use three screenshots of an app I have previously designed on dribble so I'll just drag and drop it here just wipe it into a frame and so option command NG call it one option command and G let's call it two option command NG and let's call it three and what I need to do right now to make it a bit prettier to put it inside of a iPhone model mock app select your frame right click on the canvas go to plugins and I will use the mock-up plugin and I believe you need to have a premium subscription uh purchase to use this Library so if you can't afford it uh you might as well just go to a factory 3D elements and use one of those mockups from the library so I'm not going to use it maybe I'll just show you how you need to have an image of this exact dimensions so for this example you would need to increase it just so it fills the entire frame here but I will just use a mockup plugin so let me just quickly go to the library and let's use this iPhone frame so let's click on the plus select frame number one crop it paste in canvas actually you know what I will use this darker color of the iPhone 14 pro just so I can distinguish it from the background so let's do it one more time drop paste in canvas click on the plus select our frame crop paste in canvas and I will clean it up later so I'm not worrying about it right now and our last frame prop pasted in canvas and let's click out of the mock-up here and we need to resize it just so we have only this one frame visible the best if you put it side by side adjust it easier you might actually change the background color I'm not able to see the sides here okay last image and you can also drag your rulers so click shift plus r and make sure like like you have the perfect dimensions for all of these images okay perfect so shifts are to remove the rulers and select our first image drop it inside here and holding spacebar push it a little bit down and holding option and shift resize it and we can resize these from already and let's put them side by side push them a little bit upwards let's push this text a little bit to the top and make sure we are following the 8 pixel Rhythm and lastly I will just add a background visual just to add some visual impact to our design so this will be our first frame now we'll create our second frame so let's move it to the side command and D to duplicate it in here let's select our iPhone Pro resize it push it upwards and let's also remove the text from here so let's push it up and double click 0 to reduce the opacity of this layer did the same with our button and I'm not naming my layers right now because I'm I'm trying to do it fast but obviously you would have to name your layers I mean you don't have to but this is just the thing that I'm doing whenever I'm going into development I already have these layers named and I don't have to worry about naming them again in framer um okay so let's uh let's push our iPhones to the top and don't worry about this space right now now we're going to let me just move them to the side now we're going to add a frame so let's hit F and make it the size of our entire that's the frame so 1440 by 1024 and let's make this fill darker and add our text with this will be our second check sections introducing let's place it in the middle and I'll just copy this text over from my reference frame increase the size of this text just a bit and this will be our second section we're gonna also call it like that let's select this second section and drag it on top of our second frame maybe to about this point just so it's sitting in the middle push this just a little bit further and let's add a slight layer of blur to our objects here just so it's giving a bit more depth that it's losing focus and maybe just to break this motion down into smaller steps will reduce the size of this Frame just a little bit and increase it in the next step so let's select this Frame copy it over and this will be our third step okay I need to keep cleaning this okay and now that we have this step let's select our second section and push it again to the middle and resize it just so it's filling out 10 24 pixels of space and let's just resize these images again and add a bit more blur to them so I think that's enough let's move on to the step number four and we can now push it all the way top to the top um and here's the thing let's go back to our header and make sure that the header is sitting at the top of all layers and actually we need to select this section and paste it on this section number one move it one step below our header and push it all the way down just so it's not visible on the frame anymore you need to have it on all of these frames because when we're starting to animate this and this layer is missing Sigma will try to animate this on on its own so this will probably fade in instead of just a sliding from the bottom let's make sure that the header is sitting on the top and one more time you need to make sure that your layers are named the same way so this Frame 160 will not animate the right way because the name of the container is different so we need to make sure that all of your names are similar as well as the placement of these layers on the frame as exactly the same as all the frames that you want to animate select our logo and our links and make sure that they are white just so they're visible on top of our frame let's select it one more time and select our second section frame and add our visual inside and paste it behind the text and yeah we can leave it at 30 percent and let's make sure that the same image is sitting in all of those frames as well just make sure that the visibility is set to zero and let's just keep adding this image onto our second section and reducing the opacity and let's move on to our sixth step I know it's a lot of steps but it's a pretty complex animation and let's reduce the size of this image just a tad bit and increase the opacity to 100 by clicking zero and remove the text from here so move it up and double click zero and the next step will have the second section so let me just find it on the canvas here on the frame I will have it slide out of you so let's click shift and hold spacebar to move it upwards you can select all of these groups and reduce the opacity to zero let's add another frame a width of 1440 and height of 10 24. let's call it a third section and let's paste our elements inside here we'll use this image and I will add the animated text and I'll just need to make sure that the text is sitting behind our iPhone Pro frame let's select your third section move inside of your frame and position it right inside here let's duplicate this Frame select our third section move it all the way up and again make sure the header is sitting at the top of all frames same here and let's also change the color to Black again just so it's visible on the background let's select this iPhone 14 Pro Image frame hit K to access the scale tool and holding shift just reuse the size of this Frame and reduce the opacity to zero and do the same with the text and now that we have all of these frames all we need to do is we need to connect them and in figma you can't really use the scroll trigger like you can and Adobe XD principle prototype so we need to give the illusion of having the crawling motion and it will achieve that by just using the on drag trigger okay so our trigger will be on drag our type of Animation will be set to Smart animate and we'll use a slow animation with the speed set to 600 milliseconds let's repeat the same animation on all of the remaining frames okay so let's hit play and see what we're standing at if and if there's anything we need to fix so let's click and drag on our Mouse and see the transitions taking place and you see that they're pretty Snappy in some um in some cases so we might want to you know play around with trigger timing just to see if you can find the right fluid motion so let's give it a quick test run and see if it's working so what I'm going to do is I'm going to click and drag on my mouse to give the illusion of scrolling down the page and as you can see our animation is working uh just fine as we wanted it to work and before you go I've got some important announcements to make if you're interested in prototyping I've got some exciting news for you the waitlist for the prototyping masterclass is officially open as of today if you're ready need to take your design skills to the next level and learn all there is to know about prototyping I would help me build my personal brand and close over five thousand dollars worth of projects in the past two years alone join the wait list today we are going to start a pre-sale in about two weeks but the number of spots in the pre-sale will be limited to thousand only so if you want to secure your spot now and be the first to know when the course pre-sale starts during the waitlist the link to join the waitlist is in the description of this video okay that's it for this tutorial guys thank you so much for watching this was your Adrian and I'll see you very very soon foreign [Music]

Channel: UI Adrian

Views: 10,379

Keywords: figma parallax effect, figma design, ui design, ux design, uiux, figma, parallax, figma animation, figma tutorial, figma parallax, figma parallax scrolling, adobe xd, uiadrian, figma ui design, figma smart animate, auto animate, adobe xd auto animate, parallax effect, figma design tutorial, ui, ux, product design, figma animation tutorial for beginners, parallax scroll animation in figma, parallax scrolling figma, scroll animation figma, how to create parallax effect in figma

Id: 4r5T4zeQDjM

Length: 13min 45sec (825 seconds)

Published: Mon May 29 2023