Amazing Cursor Follow Animations in Figma! 😲 — Figma + Spline | Design Weekly

hi everyone welcome back to the channel today we are gonna make something super magical inside figma the first design we'll be making is this little circle following the mouse and the color behind the circle of the text or of the background changing as we scroll through also we will be working on this really cool effect that i've seen being used on google's websites on a lot of different popular websites i'm going to call this quick sand these little lines are caving in to wherever the mouse is going so basically a great tool for backgrounds for things that follow your mouse etc are gonna be amazing when you implement them into your prototypes this will take us less than 10 minutes so without further ado let's just get started with the video okay so the first thing that we have to do is actually make our artboard so i've already prepared two artboards there is this one the circle follows you everywhere kind of artboard and this effect is called quicksand artboard i'll be sharing this figma file so that you can just pick it up and try it for yourself so let's first create the circle follows you everywhere effect so to begin with we are going to go to this website called spline.design you can search it on google or you can just type it in your browser first thing we're going to do is say a new file we're going to create a new project here and spline again is free of cost so don't worry about the cost or anything you can just get started on your browser you don't even have to download anything so here what we have to do is create the circle which will follow you every now you can experiment with the shapes you can create a 3d object you can do whatever you like here as long as it suits the mouse as long as it doesn't cause a distraction so for this one i'm of course going to change this to a white of course i can change this to any color that you like but white for now suits the best so basically you can see what size it is as compared to your mouse here as you can see on screen so if the mouse is half of this then it's fine if it's extremely big then the mouse will look a little off so i think this big is enough for now now what i'm going to do is on the side there's something called events now under events there's something called type i'll click on type there's a drop down that comes up i'm going to say follow so follow will essentially follow your mouse everywhere it goes so if i press play as you can see it follows me everywhere it goes the thing about this is that you can even add other events alongside it so if i want to add say uh when i click there should be a certain effect so states allows you to change your state to any state you like so in state one i will change the color of this circle to say a teal or a turquoise whatever you want to call this i i'd say it's a little more like a light sky blue and i can go back to my base state and as you can see it's changed every time i click on this ellipse there should be the state should change to state one so if i click on play here and if i click on this circle as you can see the color changes to blue now there is a little bit of a bug here as to whenever i click on this circle it kind of moves up a little bit i i'm not sure why this bug is being caused but when i was trying it it was okay so it might be okay on your end so of course you can experiment with the states and everything for now i'm just gonna keep it as it is all right so now this is ready and as you can see there's a slight delay in the follow as well which looks good actually it should be that way because it gives it that following effect if i want to bring it to figma there's a simple trick to it if i click on export and public url is selected make sure that is there rotate no no everything should be no if you have spline premium you'll be able to hide it for now i'm just going to keep it as show i'm going to say export as you can see there's this thing called doing the magic which means it's working on it now once this comes up you can use embed right here i'm just gonna copy this and i'm gonna go back to my figma file right there now right inside figma now right inside figma all i need to do is make sure i have this rectangle ready and i paste another rectangle right inside here now this rectangle is where the circle can flow so wherever the rectangle is going the circle will be there you can either place it behind the text and everything or above i suggest above especially for areas where there's no button or anything then i'll click on command p or control p to bring up the menu here and i'm going to search for anima now once i've searched for anime click on it you'll have to probably log in or sign up for me it's okay now inside here there's something called embed code all i need to do is just embed the code right here and i don't need to change anything here so no coding knowledge required save and that's about it now i can remove this gray by reducing the opacity of the gray color on the right under fill to zero percent to give it the effect where it changes the color of the background or it changes with the color of the background under layer there's something called pass through i'm going to change the pass through to something called exclusion or difference it basically gives a similar result and that's about it so now if i play this using anima of course i'll say preview in browser and it immediately opens a preview right here it doesn't even take time to load and as you can see this circle follows me everywhere a little bit of a delay which is nice along with changing the color of everything in the background be it an illustration an icon a button logo whatever it is and it looks really really good and it adds a little bit of a flare or an interactive element on the screen right here and now let's move on to the next effect which is my favorite called the the quicksand effect i'm going to click on another new project so that i make i can make another new project inside here i will delete everything on this screen and for reference for now i'm going to create a little rectangle by clicking on this rectangle on top just so that i can see where the quick sand is or where the text might be placed so in this case what i'm going to do is i'm going to go to the plus sign here and i'm going to select the cube we're not going to create a cube don't worry you can hold alt or option on your keyboard and just drag around to see the thickness of this of course the thickness doesn't matter too much here i'm i'm also going to change the color to a nice jet blue i'm i don't know why i call it a jet blue it's more like a rich blue which i think is really cool now what i'm going to do is i'm going to rotate this at a certain angle if i hold this green circle right here which turns to yellow now and just drag out like this as you can see all i need to do is make sure that it's around 90 degrees rotated towards you in that case so if i now play so if i now view it from the front angle as you can see it is almost flat so now before you do anything this is a mistake i made so make sure you don't make this mistake do not duplicate this until you've made this next setting on the right there's something called events again you click on it and there's something called look at so if you've made the rectangle properly it will look in the right direction where your mouse is going so just to test this out i'm going to click on play and as you can see it does follow your mouse around a little bit all the rotations are set to these weird minus 180 minus 87 that is not what we need so we'll change all the rotations to a zero and now what we're going to do is we're going to make the rectangle in such a way that it is facing us without having to rotate it at all so that's a mistake we made and we're going to fix it if i if i hold this little ball here and i drag out it will now become a longer sort of a cuboidal shape which i really like now if i go back i reset here by clicking reset and i play this as you can see this is perfectly viewing your mouse here all i need to do now is make sure it's placed properly duplicate this by saying command d or control d and just keep on dragging it out left or right so that it plays its place in one line or one row here now yes duplication can get a little tedious so once you say place three of these hold shift select all three right click and say group selection so you will basically be able to duplicate this group now and drag the group collectively this makes your life much easier and faster now once this is done what i did was just select all of these groups right click and group these as well don't worry the grouping is not going to break your animations or your interactions in any way possible so depending on how much area you have you can place three or two columns as much as you like i will also give space in between for the text and then drag around like this now once this is done you can quickly press play to test it out and ah as you can see it is now working perfectly and since your mouse is at a different distance from all these cuboids they'll they'll view the mouse from a slightly different angle and the lighting will also be slightly different the best part about this tool is that you can change the lighting the 3d aspect of everything but for now i'm just keeping it basic if you know how to if you are if you create something advanced make sure you tag me on instagram at puneet official or on linkedin or twitter all of these handles i do respond and see your work so now once this is done all you need to do is remove the background make sure that there is a transparent background for that you will have to reduce the frame if you if you have nothing selected on the right there's something called frame under frame the opacity should be not 100 but zero and as you can see we now have a transparent background if you want a transparent background for anything this is how it goes set everything to no for this one because there's no need for it and i'm gonna go ahead and export this once this is done you can always click on the embed copy it say okay go back to figma inside figma we're gonna repeat the exact same steps for the first effect which is just hold the rectangle create a rectangle which covers the entire size of this inside this i'm going to bring up anima once again thankfully anime is so quick to use doesn't load anything it opens up fast and inside this i'm going to say embed code again and paste my code now here you can see two properties called hundred percent with 100 height if by chance your rectangles are not big enough or there's not enough space around your text you can always adjust this from 100 to 200 and so on and so forth so depending on the size of your frame size of your text etcetera you can adjust this properly here so i'll click on save remove everything here make sure that this gray is either above everything or below depends on you and i'm gonna reduce the opacity of the fill to zero percent if i play this in anima go back to anima and i'm just gonna quickly click on preview in browser that takes half a second and it opens a little window here in figma itself and it might take a few seconds but it loads properly and look at that amazing fantastic effect of course you can make this a more flat looking lines as well i've seen those flat looking lines on a lot of websites so you can do a flat line if you reduce the width or the girth of these cuboids so as to say but i hope you really like this video i loved creating this effect for you guys in figma and spline to watch more spline related interactions and tutorials in figma and spline i will give some links in the description as well as something on the screen on top of my face i hope you liked this video if you did make sure to thumbs up that supports the channel lot as well as subscribe to the channel sharing is caring so if you create something like this make sure you share or just share the video in your groups or with your friends i'll see you next time same place same time every monday and thursday until next time take care god bless

Channel: Punit Chawla

Views: 57,481

Keywords: ui design, figma tutorial, figma cursor, figma animations, figma spline, spline tutorial, punit chawla, spline animations, spline and figma, figma ui design, ux design, ux design tutorial, figma ux design, figma smart animate, figma animation tutorial, figma for beginners, figma course, figma plugins, figma smart animate tutorial, figma drag animation, figma design

Id: lVSUSGq1G4k

Length: 12min 1sec (721 seconds)

Published: Tue Feb 08 2022