Create An Animated Component That Follows The Cursor - Figma Tutorial

okay on today's tutorial we are going to make a interactive hero graphic that follows your mouse As you move it around the screen uh kind of the caveat here is figma doesn't really have the interactions to support this as it would on a on a website but what we're going to do here is hack it a little bit so that it is good enough for prototyping and illustrative purposes and it's pretty fun to see it in action all right let's get to it so the first thing I've done is you can use any graphic you want Arrow Compass doesn't matter I'm picking an i because I picked it so I've got my eye graphic I've got the iris mapped or masked out so it's individual and I can move it so the first thing I'm going to do here is I'm going to make this into a component because I want to Nest this in case and want to use this eye somewhere else in my project okay so turn that into a component great I'm just going to rename this because I think I already have an eye component so now we've got our I component and now we're going to create Six States for this eye and that's going to be where it's looking so I'll add a new variant and then we will just three four five six okay now for these states uh the first one I'm going to leave like that second one I'm going to bring to the top right this one I'm going to bring to the bottom right this one will bring straight to the bottom bottom left and top left so there we go now we have an eye that basically does a full circle now to make this easy we're going to name all of our variants so I'm just going to call this top to T for top top right bottom right bottom you'll see this comes in handy later bottom left and top left okay that's all we need out of our I component so let's fire over here we're going to create a new hero frame I'm doing this for desktop because obviously there's not a lot of cursors to follow on mobile um you can leave this transparent or you can pick a color I'm just going to pick a color that works for me at the moment I'm not gonna get too crazy with it good enough okay uh so the first thing I'm going to do is we're going to grab our I component wherever that went drag it in we'll Center it and that's good now we're going to create hot spots to use while hovering so I'm going to create a frame and you don't have to be exact on this because we're going to throw them into Auto layout in a second here so I'll just create three across the top shift a put those into Auto layout set that to zero I'm gonna bring that up I'll make this about a half the width and then each one of these will grab each of these frames we're going to go fill and fill and then we're also going to name these as well so this one is going to be left this one is going to be always name your layers and you never know where you are all right so now you've got that you can duplicate it so I'm just going to hold that down drag it down there that's great so we'll name this one this one on the bottom and so this will be bottom left bottom bottom right perfect uh and then the next thing we're going to do is Select these and we're going to set them to scale and to scale and then we are going to select our eye and set him to Center the reason we're doing that is just in case you want to resize your hero all of our hot spots are relative okay honestly that's all you need to do to set up your component so what we're going to do is we're going to call this eye block I'm going to make it a component and we are going to turn this into six variants as well we're going to create again Six States of this so there's three four five six and just uh we will name them as well right okay we'll start here all right so this will be top this will be the top right will be the top left there we go okay so now we can go through and we can select our I that one's good so we're going to go through here and we're and we're going to set our eye to the top right here we're going to select our eye to bottom right top left okay that's set up now we need to set up our interactions so we'll start here and we'll go around so you pick this one on Hover change to top right and we'll go smart animate I'm gonna go 500 on this and then we'll go down here hover change to the bottom right this one we're going to change to bottom I think we should be remembering all this if you do it a new interaction every time so it's probably easier to just drag this to the actual uh frame you want there you go see that's what I get for trying to save time and then this one is going to go to that guy okay now we're gonna have to do that for each one of these you don't need to do the one that the eye is set on because you don't need a hover State for the current frame so I'll speed this up I think or cut it out but same thing we're going to skip this one we'll go down to the bottom here so that's going to that one hovering let's call that one hovering okay now we've got all our interactions set up we can grab a frame grab our asset and Prototype at a starting point and there we have it now your eyeball follows the cursor now it does get a little glitchy if you start moving around too much but where figma's at now this is the best we can get it'll still blow the socks off your clients and uh your design team so there you go an interactive hero component that animates uh based on your cursor position uh thanks for watching like subscribe check out my other channels check out my patreon and uh as always thanks for your support see you next time

Channel: Darren Northcott - Figma, UX & UI

Views: 6,367

Keywords: figma tutorial, ui design, ux design, #smartanimate

Id: FvjEHsZxHPo

Length: 8min 58sec (538 seconds)

Published: Sat Mar 04 2023