Figma Design Tutorial: Hover Over Light Glow Effect

hey everyone what's up welcome back to the channel and in today's video we'll be building this glowing light Trail effect using just figma prototyping it's a very simple interaction to build yet really cool and is in the same principles we will also be building this light glow effect this text glow effect using exactly the same principles and Basics they might look really different from each other but they're using the exact same behavior so let's see how can we build these two really cool effect using just figure prototyping so let's get started [Music] so we're in figma right now and the first thing that you need is an artboard I'm picking an iPhone artboard but you can pick virtually any artboard that you like so I'm gonna pick iPhone 13 artboard or iPhone 14 artboard that's perfectly fine and you can pick any adword as I was saying because this is irrespective of an artboard that you choose so we have our artboard here and for this demonstration I'm just gonna take a really dark background so I'm just going to take a black background for this artboard okay now the next thing that we need to build is I'll hit a on my keyboard and I'll create a frame okay so it's really important that you create a frame and the size is basically the size of the dots that I want so I shown you in the early introduction of this video that there was just dots that were trailing my cursor movement so I'm just going to pick a 20 by 20 Dot and this is the frame basically and the frames Dimension are 20 by 20 add a rounded column okay so now it looks circular perfect the next thing that you need to do is come to this effects panel hit this effect option and hit on a layer blur okay 24 or maybe 100 it's perfectly fine whatever size you feel like you can go with it I think this looks perfectly fine gives a really nice glowing effect now the next thing that you need to do is I'm just going to call it glowing State okay and what you need to do next is you need to just duplicate it and this will will not be the glowing so this is when I hover on this this should be the glowing State and this should be the dim state so I'm just going to call it dim State okay and you don't have to do anything else at this moment what you have to do is just come here and give it a pass through of zero so you've done nothing you've just taken two frames one has been given a white color and some blur and the other one is given same properties but with a zero pass through now I'll come here I'll select both of them together I'll go on the top and I'll set create component set so it'll now create a component set and what we have to do is just drag this Arrow from here to here okay and you don't want it to be on tap you want it while hovering so select while hovering property one and two glowing State perfectly fine smart animate and you have to pick linear here so as to get a really nice um linear effect and the more time that you give here right right now it's 300 let's say we do 600 or maybe we do 800 the more time you give here the more trailing effect you will see if I show you again the interaction right if I give it more time then this Trail this trail that is following my cursor will be longer so totally up to you what time you want to give it here just come here and play with this time option okay so yeah while hovering this to this perfect now the next thing that you need to do is you have to lay this down on this artboard so what I'm going to do next is I'll hit my assets Tab and I'll drag my component here and I'll place it here if I don't select it will not know where this dot is okay so to just counter that what you can do is you can just come here in the properties selection and for time being just select it to glowing state so that you know where your dots are okay your frames are and what I'm going to do is I'm just going to align it here okay on the left and I'll just drag my and create a duplicate option so what I did here is I just held hit option on my keyboard and just drag that component and it created a duplicate copy of that so you'll get this double headed arrows that you're seeing here and you can just duplicate things so you duplicate it again and now since you're duplicate it again if I just hit command D on my keyboard figma will automatically place everything in the same line so if you see I'm just hitting command D on my keyboard and it will be Ctrl D for Windows user and automatically placing everything on the right side equal distance okay so if you see it has already placed everything so our one level of layer is complete what I'm going to do is I'm going to select everything again and I'm just going to duplicate it again so I'm going to do the same thing I hit option on my keyboard and just dragged it below so now I have two lines of this same component and all of these are like exactly this one component and again as I said I just do command d figure will automatically place it for me okay so what I'm going to do now is I'm just going to fill this entire artboard with these dots till the end I'm just hitting command D or Ctrl D on my keyboard and that's it so our entire artboard is now filled with this dot okay if I show you it's just filled with this same component and what we have to do again is I'll just select all of these components like this all of this components selected now just change this glowing state to dim State again because we don't want to see it initially only when we hover we want to see this so now our artboard is ready what we have to do is hit prototyping and let's see how this looks like okay so our prototype is loaded and if you see here I'm getting this really nice white Trail effect okay what we can also do is we can just play with colors so I'll just come here and I'll change my color from this to probably a yellow and similar thing here and let's see how this looks like now see and if you want things to be more blurred what you can do is just come here and select the layer blur and just increase it to a really high number if you want it to be really really uh soft you can do that so if you see it's now really soft and if you want it to be really hard as well that's also you can do so you can come here and just give it a blur of zero okay just come here and I'll do it again and you see you'll get this got it so this is how you build this really simple one component effect in figma an extension for this would be to use different colors so let me just quickly show you that so what I'm going to do first is I'm just going to hit a on my keyword to create a frame and I just wanted to be again 20 by 20 exactly the same step I have to create another camera but with different color okay so here's the yellow color I'll round It Off and I'll probably want to give it a different color so let me just give it a different color I'll give it probably a red okay I'll duplicate it again and what we have to do is Select both of them and create component set let's create component set now the first one we wanted to give zero pass through so we'll give it a zero pass through as usual now uh we'll see the blur variant soon but let's first do a zero blur and the next thing that we need to do is hit protyping option and just link one to the two and instead of ontap while hovering smart animate linear 800 milliseconds you can just change it to any value you want um let's keep it 800 for now or maybe we can do 500 okay and that's it so what you have to do is now pick different colors that you want and add their variants here so let me just quickly do that okay so now I have created all the variants with different uh different components basically but with different colors so if you see the component one is with this this was our original component this color this color so I've added like eight different colors and created their components exactly the same way that I showed now the next thing that you need to do is just to do a really cool effect here I'll go to my assets tab okay come here and I'll just keep dragging so I have these eight components here and I'll keep dragging them here one minute okay and I'll just change it to this glowing state and keep it here now again duplicate it the same step that we did for the previous tutorial so now these circles are of one color okay and I'll just change it to non-glowing state done now what I'm going to do again is I'm just going to come here and drag the entire thing from up and down and here we don't want the component one component one is basically this color we want a different component so I'll just do component 2 here and we can just overwrite these components so that's the best part of creating components you can just switch between these different components without dragging it again and again so I hit it here and now we have if I just quickly show you now we have the different color one okay and I'll just duplicate It Again by hitting option on my keyboard and instead of component 2 we want component 3 now which is basically this color okay if I show you it's that color okay by the way just rename the frames I have just forgot to rename it but you should do it and let's duplicate it again the entire selection so if you see now everything is filled nothing is visible because we are on this non-visible state now let's see how this looks like see this looks absolutely phenomenal if you see when I hover I am seeing different colors and different colors that we have placed you see this is a really really nice effect and if you want the speed to be slow this trailing speed to be really slow you can just come here and change these speeds from here this is basically the time between transition of one to two states so it's right now 300 you can just change it to 800 1200 2000 and it'll become even slower okay and let's say in case you want um this effect to be not this uh solid like this dots to be not this much visible what you can do is just come here and select all of these um circles all of these different colored circles and what we're going to do is we're just going to add a layer blur of let's say 24.25 okay I'll just diffuse this color and once you do that if you see here now you have this really nice effect really nice soft glow effect okay so yeah so that's how you build this simple colored variant as well now I'll show you how to use this we have built this entire thing now let's see how can we practically use it on our website so let's do that now let's see what we have learned so far this exact same light Trail effect how can we use it on a website like this like a practical use case for that so let's see how can you do this and for that I have this artboard where I've placed a dummy UI so I have some navbars some icon of the sneaker some subtext and a text which is calling out sneakers and then a button okay a CTA button now we're just going to animate this bigger text sneakers and rest of the UI will be as it is we are not going to animate it so and for the sneaker text I am using Poppins font extra bold and 200 font size the next thing that you need to do is I'll just select the sneaker font and I'll hit option on my keyboard and just drag it to create a duplicate and I'll move it outside of the frame so I'm just moving it outside of my artboard and here will work out with the component so this is for our reference this is how this how much big is the text is and the next thing that I'm going to do is I'm just going to hit a on my keyboard the same process that we did for our other components previously I'll just hit on a on my keyboard and I'll create something like 50 by 50 slightly bigger circles this time and I'll fill it with probably yellow a bright yellow and I'll just duplicate it and we'll apply an effect here and we'll apply layer blur and instead of 4 we'll just apply something like a hundred layer blur okay so it looks really really diffused and the first one I'll just give it a zero pass through exactly the same steps I'll select both of them and I'll hit create component set and our component is ready and I'll call it glowings component sure so now our component set is ready just quickly prototype it so I'll just hit the prototyping tab link one to the another instead of one click we want on hovering as we already know and linear 500 milliseconds I think this is fine and that's it okay so I've created the component and now what we have to do is we just have to I'll just move this component out of the site okay so now the next thing that we need to do is I'll just go to the assets tab here so my component is here just to show you it's here okay like this and what I have to do is I have to just make sure that I just cover this entire area of um sneaker text with this basically this component so I'll just come here I'll just skip it probably I'll have to create three rows so I'm just duplicating it again and again okay so now I have three components and I think this is the fine size let me just add one more so now I have four components tagged and I have to just trace the entire width of this um sneaker text so again I'll just hit option and drag it and let's create a duplicate duplicate and then now I'll do command d so basically what I did is I created this slab of component which covers this entire sneaker text okay and now what I'm going to do is I'm just going to select all of this component and I'll just hit option command J to group them in a frame and I'll call it glowing frame okay great now the next thing that you need to do is you need to align these two things together so the frame that we created of the component and this together okay like this foreign is on top of this sneaker layer so the sneaker text is below and the growing glowing frame that contains all of this glowing element on top okay the next thing that you need to do is really important again Club these two together into a single frame so I'll hit group them together I'll hit option command G and I'll create a group and I'll call it mask I have to come to this sneaker text hit right click and you can you have to click use as a mask so if I click use as a mask you see everything out of that text is not visible and only the inside part is visible okay the next thing that we need to do is I'll just come here I'll select all of these components that we have added and they are all in this glowing state so we don't have to do that we'll select our dim state so glowing State we only did to just make sure we know where we are placing the elements now this mask is ready okay and this mask contain your elements as well as a mask sneaker text mask okay now the next thing that you need to do is just pick this up and place it here so you have to place this mask on your artboard and you have to make sure that your glows above this sneaker text it's also align them if you want okay so just make sure that this entirely covers the text below and for this text we need to make it a little bit less YT so that we can see that glow otherwise the glow will not be visible so what I'm going to do is I'm just going to hit this sneaker text that we have created and I'll give it a let's say linear fill so this looks great and what we need to do is I'll just reduce the opacity also so that it can also blend a little bit with the background you can see the glow nicely so I'm just reducing the pass through to 60. and this is how it looks like perfect now our everything is ready our we have the text below and on top of it we have the mask that we created with the components here and now let's see how this looks like okay so our text is here and if you see we are getting this really nice glowing effect you're using the same principle and now we're getting this really nice glow effect only when we are hovering over the images and the glow is only contained till the text because you have used it as a mask this is how it looks like and and yeah this looks amazing just comment below how this looks like and I also animated this button text so I'll tell you how to do this in a later video if you want just let me know if you want to see how this button is animating and yeah that's it for today's video guys I hope you understood you learned something new and yeah try it out let me know in the comments and I'll see you in my next video take care bye [Music] thank you [Music]

Channel: Akash Yadav

Views: 7,388

Keywords: UI, UX, DESIGN, INTERACTION, ux design, User experience, figma, sketch, prototyping, basics, scroll, carousel, figma tutorial, user interface design, ui design, slider, interactive slider, zoom, light, glow, effect, website

Id: Bri1jSWy-qw

Length: 18min 36sec (1116 seconds)

Published: Wed Jan 18 2023