Figma Depth of field Card Hover Animation

hi everyone and welcome to create beautiful things today i will have a very special package for you today i'll be showing you how to create this depth of field card cover in figma as you can see when i hover over a card it actually just pops out and the rest go back into position so you realize the ones in the background actually they have to have a layer blur in them and there's actually that change of animation when i hover over a card it just pops out and then the actual even leaves space i'll be showing you how to create this using figma alright let's get into today's video [Music] all right so i've created a new project i'm going to call our project um depth of field let's spell that well depth of field all right you you understand why i'm calling it that later on all right so next we're gonna type in some text uh i'm to type in some text right here i'm going to make use of a plugin that i already have i'm going to set the size to 10 okay then we hope then we're going to right click and make use of the plugin i already have i'm gonna make use the plugin lorem ipsum you can install it then we're going to create generate um two sentences just generate that okay that's actually fine actually i don't need all the we don't we don't need all that so we can delete some of it yeah somewhere around there i think that's enough okay then we're gonna centerline our text okay that will work right next i'm going to make use of our ellipse i'm going to run ellipse hold shift just make sure that um that the parameters are even all right then we're going to right click then organic is another plugin i've installed it's called unsplash we're going to use this to generate some faces this may be like the the editorial team at cb2 create beautiful things make sure to subscribe all right then we're going to search for faces um i have plenty plenty of options but i'm gonna make use of this let's click on this all right so we have that image but i just want it to position i just want to position it better so i'm just gonna crop it a little bit so i'm gonna drag it a little bit down with the cropping all right that looks better all right so next we're gonna draw a rectangle make sure to do a rectangle it doesn't need to be so big right right around there i'm gonna type in some text in our rectangle gonna type in there right sorry i'm gonna type in some text read more okay so when i place our text right within the rectangle just make sure that the text actually appears on top of the rectangle all right just want to make sure it's at the center all right so i'm going to change all our text to pop pins i love poppings so i'm going to change this to pop pins this for me is easy to work with so i'm gonna change the read more statement to bold okay that looks better okay that actually looks okay then i'm gonna just change this to a little bit of darker gray something like that just change the read more statement to white okay that's okay now next we're gonna do some auto layout so we're gonna highlight and select all but before we do that let's first group this group read more and the rectangle just make sure these are set in a group okay then you can right click you can right click and then you're gonna say click on add auto layout all right so right here we have some our panel here now we're going to just make sure to center that just make sure everything is centered okay all right so we're gonna just compress our text a little bit around there that looks better okay so i'm going to right click and then we're going to add an auto layout okay so we have our auto layout right there and then we're going to change the setting to center we're going to align everything towards the center okay so enough in our auto layout we're going to add some fill color i'm going to add a white fill color that actually looks okay yeah but then we're gonna do some padding around it we want some padding of um let's try 15 yeah that looks better we just want to make sure that uh everything around the card doctor looks good but that's actually neat okay right so next we're gonna uh create a component out of this so gonna click here just say create component so we have a component created so inside our component we're actually going to create a variant of this just make sure your component is selected then we're going to go right here to the right side and then click this plus icon it's going to add the variant okay all right so i'm gonna drag just enlarge this a little bit all right so we have our default component here then we have the variant two now we're gonna make some changes to variant two we're gonna enlarge variant two a little bit so just make sure your variant is selected then hold shift and then we're gonna enlarge this just to make sure it's slightly bigger all right then inside variant 2 we're going to change the text font size to 13. okay then it's going to increase the size of the rectangle just make sure it actually just looks bigger then we're gonna change the text size to 13 also okay then we're going to increase the size of our image just make sure it pops out a little bit more okay so we're going to change something so inside variant 2 we're going to change the color of the frame i'm going to change it to light blue i'm going to give it some light blue color something like that and i'm going to change the text color of lorem ipsum to white okay but i'm gonna make that size semi bold right so within the grouping here i'm going to change the text color of read more to black i'm going to change that to black i'm going to change the rectangle color to white okay it actually looks fine right there now one more thing we're gonna do just make sure your frame is selected we're gonna change the name of this property i'm gonna change it to open okay just make sure it's set to open now i'm going to change the name of the default to false i'm going to change the name of variant 2 to true okay that's that's okay much better all right all right so having done that we're gonna do some prototyping just make sure you have your so just go to prototype mode then just make sure we have our default state selected we're going to add an interaction when i make sure while hovering it will change to make sure that this is set to open just make it to change and smart animate as it changes to the other stage to change to the variant one not just make sure this happens actually just leave that at 300 300 is fine right that's basically it then we're gonna create a frame all right so we're gonna duplicate this so just duplicate make a copy of your default all right so here we have our copy right there and i'm going to test it go back to design mode just click just make sure this is set to open as you can see it changes all right so that's fine that will work then we're gonna uh add an auto layout to our frame so just click add auto layout to this new frame we've actually just created then we're gonna drag and place a copy of that default into the frames so we're going to enlarge your frame again just make sure frame is enlarged we're going to give it um a darker color yeah right it's just that you can see our cuts very well so we're going to change this we're going to align this to center just make sure that everything in the frame is actually aligned to center right so within so we're gonna duplicate uh this frame three times just click ctrl d ctrl d ctrl d ctrl d okay so i'm gonna resize our frame a little bit more right looking good uh huh so we just want to make sure that everything is pissed by at least 30. okay that's much better all right so we're to go in inside here then we're going to change the colors of that different uh of some of the different shapes so just make sure your unsplash plugin is open it's going to change the colors i mean sorry the images i change the images to new ones just to make sure this is set to another image so that's for that frame it's also going to set the this to another image let's make use of that all right then i'm just going to change this image to this let's use that right so we're going just gonna do some little bit of cropping i don't like the way that that image actually just looks compressed just gonna crop that a little bit okay that looks better okay that's fine i'm gonna crop this also let's just crop it a little bit that would that's okay all right so uh some something something else you wanna do is uh this is the most important piece of it just make sure that in this new frame of ours just make sure that every frame actually has the same name so we're gonna change the the names just call each one of them frame from what i've been testing i've actually realized that it actually does not work unless the actual all carry the same name just make sure you change the name of each frame to the same names just for this example we're just going to call each one of them frame but you can call them anything just make sure the names actually equal otherwise while hovering you actually not see any change you actually not see much change okay so that's a very very important thing so something else when i do we can go we're going to go back to our default here then i just want to make sure before the hovering happens that there actually there's actually a layer blur that actually bright blood at the beginning all right until someone hovers over them so let's first test this around here as you can see and someone hovers over that it will actually change another just evenly spaced all right so let's prototype this just give it a second to load all right so we have our prototype here as you can see when i actually hover over any card you can actually see that it actually pops out and the rest just evenly space as you can see it doesn't matter which card you hover on it will actually just happen like that and then this is how it actually create the depth of field hoover in figma thank you so much for watching if you learned something for this video just feel free to tell me below in the comments and then uh just feel free to like the video it actually helps the video actually be promoted a little bit more and if you're new to this channel i encourage you to subscribe so that you can join in the community and then don't forget to hit that notification bell so that you get updates every single time i upload a new video otherwise thank you so much for watching i'll see you all in my next video bye [Music] you

Channel: Create Beautiful Things

Views: 43

Keywords: Figma Depth of field Card Hover Animation, figma card design, figma card autolayout, figma card animation, figma focus on selected, figma focus on frame, figma blur image, figma blur effect, figma card hover, figma hover effects, figma hover, figma hover states, figma auto layout responsive, figma auto layout tutorial, figma component variants, figma components, figma image hover, figma image scroll, figma image slider prototype, figma image slider, figma image accordion

Id: tQvSxSczLUc

Length: 14min 14sec (854 seconds)

Published: Thu Dec 09 2021