Nike Spinning Animation in Figma (2023)

hey guys today we're going to make this pretty cool Nike spinning Carousel in figma we're gonna jump right into it look at this watch what oh yeah first I'm gonna go to nike.com to grab a pair of shoes I want to use if you guys do this uh don't sell your files so that we don't get in trouble so I'm gonna find a pair of shoes that are interesting I'm gonna grab these guys I want this picture so I'm going to right click save image as save it into my downloads I'm gonna grab the next style of shoe right click save image as save do this one too I'm gonna get three pairs of shoes you can use any ones you like remember don't sell these files because this is just for learning purposes I'm also going to grab the Nike logo Google Nike go under images and then save this foreign once I have all my assets I'm going to go into figma and I'm going to start building this page out so let's add a frame F on your keyboard let's do a 14 40. desktop [Music] I'm going to change the background to a purple color I have my in my colors already in my file so I'm going to use those so I'm going to change this fill to this light purple and put a circle on here real quick and fill this with another purple the darker one I'm going to change my background here to purple I'm going to put another frame on it so F on your keyboard pull out a frame fill it with white it's round our Corners to 10. let's add a drop shadow to make our drop shadow purple a darker purple pull the opacity down and then blur it that looks good I'm gonna pull this down and I'm going to make my header section and let's add our shoe so I'm going to go to my finder if you're on a MacBook there's a cool thing that came out if you grab your shoe right click go to Quick actions and remove background that will remove the background for us if you're on a PC you can go to canva and remove the background or I'm pretty sure figma has a plug-in to remove backgrounds but I don't want to set up the API key so this will do for now I'm going to do this with all the shoes quick action remove background another one quick action moving the background all right I'm gonna drop this shoe in here and I'm going to command drag my frame so I have a smaller frame just like that I'm also gonna twist my frame a little so rotate 26 degrees that's right [Music] make sure your frame has clipping content off and let's add a shadow under here so I'm going to press the o on my keyboard for Circle draw on a circle and I'm going to go to my fill change it to radial radiant change this to a purple change this to the same purple and drop the opacity to zero that should give me a decent looking Shadow I can also drop this down to PD percent you can adjust the width that looks about right I'm going to grab both of these so the ellipse end my screenshot and I'm going to put them into a frame so option command G puts the meta frame I'm going to command drag my frame to meet up with the edge of the frame and I'll tighten this Frame up as well alright now that we have our frame set let's add in some navigation at the top so let's drop in a Nike logo shrink it down let's meet up with the edge of the frame there and let's add some navigation so t on the keyboard for type and let's type in min we'll change the font to babe bass noon I think you can get this font on googlefonts.com I'll put a link below press K to scale and let's scale it out all right option drag to duplicate grab both of them shift a to put into an auto Leo let's make this say one woman or woman [Music] command e to duplicate but kids [Music] duplicate again accessories duplicate one more time and sales all right looks good grab your frame let's name it nav I'll also name this logo and pull it out of this Frame put it up above your nav then let's go to Icon duck and find a couple search icons so icon duck to plug in let's type for search or search for search grab your search icon let's look for a cart [Music] I like this one I'm going to turn this into a vector so I'm going to grab a whole group command e to flatten it this has a square on it I want to delete this Square underneath the group and the vector command e to flatten it all right so this icon is 88 .86 pixels High I'm gonna constrain the proportions and do the same with this grab both of them [Music] and let's make the height 80. shift a to put into an auto layout [Music] and then put them up top okay press K to scale down open up your auto layout grab your vectors let's make them 39 I think I actually want them to be smaller so let's not do that let's do 25. I think that looks better we're also going to scale the logo to be 25. I'm going to drag my ruler out I'm going to drag this one out as well let's name this icons we have our logo here and our navigation I'm actually going to put the icons below grab all three of these shift a opening this nav on gation I'm going to grab the nav Auto layout part and switch it to fill container and grab this whole navigation section and switch the Gap to zero and then move it into the center grab the navigation again and move that to the center all right now everything's centered let's put some big text across the top t on the keyboard then paste this same font press k for scale I'm going to stretch this all the way out [Music] I'm going to make this a purple color and I'm going to drop the opacity down now because this frame has a drop shadow on it everything else is also getting to drop shadow so I'm going to move everything out of this Frame make sure you close your navigation Auto layout we're going to move these things out of our frame just move them up out of the frame so now they don't have any shadow all right I'm gonna go command e turn this into a vectored object I'll drop it down to 20. we want to be able to barely see it and make sure it's underneath your shoe listening this background we'll name this shoe one okay let's add some text on top of this now I'm going to lock this layer and this one so nothing moves t for type and then chew grab everything let's do it as public Sands [Music] as the font we'll drop this down to 16. we'll zoom into this option drag the name of the shoe in there let's change the font to DFS k for scale and scale it up I want this to be pretty big and then we'll line break it [Music] can also adjust the size on this until it looks right to you I'm going to grab this option drag let's make the price [Music] these are expensive so they're going to be a hundred and sixty dollars [Music] let's do this font for that [Music] scale it up price the title subtitle shift a to put into another way out I'm gonna grab my description off the Nike Site I'm copying everything from nanky so you can do the same thing let's grab this piece here copy it go back over to figma put a text box [Music] paste in our copy command a to grab it all let's meet this public Sans let's change the font to 16. and regular I'm going to add this into the auto layout as well okay let's make a sizing selector so I'll grab this option drag out of the frame say select size [Music] we'll change this to a regular font and to lighter gray option drag down let's put us 8.5 will be the shoe size make this black and bold I'm going to make this 22. or more than that 30. we'll do shift a to put it into an auto layout and I'm going to put a little arrow right next to it so we'll go back to my plugin I comd up you could make one I'm just gonna do this because it's easier this one's not as thick command e drag it down make sure the stroke weight is a little bit lighter [Music] rotate it and then add it into our Auto layout make sure our Auto layout is aligned to the center this is still looking a little bit big so I'm going to zoom in scale that a little bit more I'm gonna change this to a lighter gray and I want this space in between to be a little bit larger then I want the padding on the sides to also be more so let's do 20. it's out of fill it can be white to add some depth let's add a shadow go to effects drop shadow let's make it purple again [Music] and blur it out I also want to round my corners so let's grab it go up to the top here it's around the corners to five and now it's about right I'm going to line it up here option drag to copy and I'm going to add an add to cart button I'm going to change this to White I'm going to change this button fill to Black and I'm going to delete the arrow I'm gonna go up here and grab my cart copy command C come down here into my button command V change this to White flip it to the other side and then let's adjust those space in the middle of them [Music] also want this to be not so bold let's go medium that looks good I'm going to scale these down a little bit too grab all of this k for scale let's make it line up with our um text box so let's put these in an auto layout shifting this as well thought all looks good so I just added those all to Auto layouts let's give our text wrapper and then our sizing chart we can name rename these things on the layers panel [Music] say text wrapper all right that looks pretty good all right we've made it really far let's get to the fun prototyping part all right let's add a button right here because this is how we're gonna change from our different shoes I forgot to put in the shoes let's put in the shoes so we need to put three different variations of shoes here so let's add those in go back to my shoes grab our three shoes that we have drag them in foreign command and dragging I'm reshaping the boxes may have to reshape individually now all right that looks good Auto layout shift a you can add some space in between them then we're going to press k for scale and Shrink them way down [Music] I'm going to name these shoes shoes [Music] all right and let's find a place to put them inside here I can't believe I forgot them but it is what it is all right so maybe I'll scale my buttons down a little bit scale these down and then put them [Music] right in between the text wrapper and the sizing chart foreign [Music] can also adjust this spacing here and move this up [Music] I'm gonna put a line underneath these so that when the shoe switch the line moves back and forth so I'm going to go shift command G or option command G that'll put it into a frame I'm going to command pull down so we have space in there you have our shoes here I'll name the shoe one [Music] shoe two [Music] and shoe three apparently I really want to go to a show I'm going to add a line so L on the keyboard for line drag out a line let's change the width to four in the corners to round and let's make it a purple color and that's going to indicate what shoe we're looking at all right let's add a button up here so we can switch the shoes back and forth so let's type in next Style [Music] and change this to public Sands [Music] I'm gonna make it a medium and scale it down I'm going to put an auto layout around it shift a I'm going to add a fill of black grab into the middle make the font white I'm going to round my Corners let's do 200. add some spacing on the sides let's add an arrow so we can go up to our Chic tools shift L for Arrow put one in here let's make it white and then make sure our Auto layout is aligned to the center [Music] I'm going to make this point two points and drag this back down in put a little bit of spacing in between these two and then we're going to give some more padding on the top and bottom all right everything's looking good I'm going to tighten everything up a little bit so I'm going to move this up push it down [Music] I want this to come down to give us a little bit of room move this down all right I'm going to scale this down okay [Music] I'm going to duplicate it option drag to this side [Music] delete this next style text but before you do that make sure that the height is set to fixed on both of them I'm going to command to press the text and delete it I'm going to click the arrow and press shift H to flip I'll push this in grab both of them shift a for auto layout and I want to hide this button beneath this one so let's make sure this button's underneath so I'm going to say this one's left say this one's right seeing the switch [Music] all right now I'm going to adjust the auto layout so this is hidden in behind [Music] I'm gonna grab my navigation and the button press shift a and it's going to align it to the middle all right now it's time to put on those super fun animation let's get to it [Music] all right we got shoe number one we need to duplicate shoe number one so option drag down here [Music] and we want to make shoe two commanding and shoot three command D I'm gonna put this at zero this one at zero as well I'm gonna pull out these shoes both of these option drag all right let's look at the size of this Frame 476 copy that and then put this here [Music] I'm going to do the same thing with the next shoe all right let's place these on top it didn't exactly give me the right size that I wanted so I'm going to let it do this manually by pressing K and scaling them to the size that looks good I'm going to delete the shoe behind and I'm going to tighten up this container so now we have shoot two I'm going to take this and put it at 26 for rotation same thing with this moving this into this Frame here and then scaling it up to where they look about the same in size and then deleting the shoe behind going to tighten up the frame by pressing command and dragging right I'm going to grab all of my shoes change them to 16 so there's not such a drastic angle [Music] I'm going to place them in my frame to see how I want them to show up then you add a little spacing at the bottom of this grab shoot two press k for scale drop it to 120 . move it to the top [Music] I'm going to make sure my background is locked [Music] and this is locked as well we'll move this back down so it doesn't interfere with anything [Music] I'm also going to put in shoe three drop it to 120 foreign make sure it doesn't go into shoe one [Music] one two and three [Music] okay that looks right let's add a circle now to make our animation seem seamless so press o on your keyboard draw out a circle and I do it as big as the frame so drop it to the frame here in the frame rate here drop the opacity to 50. then move it to the center of that line so it's in the center of the shoe that looks about right I'm going to move shoe one two and three up and move the ellipse into desktop one make sure desktop one has clip content off foreign number three and move it to this side of the circle making sure it's still inside I'm going to duplicate the circle command d ale it up option shift till all our shoes are inside [Music] then I'm going to grab these two ellipses and shoe one two and three and put them into a group command G [Music] Onna zoom out close all my layers optional press command D to duplicate let's move this over grab the group rotate it negative 90 degrees turn off the circles grab shoe one two and three change the rotation to zero so press k it's 120 let's make it back this is at 7-Eleven remember that 120 we'll change this one to 711. make sure these shoes are all hitting them around the same spot some of them will need a little bit of tweaking so you can look inside your circle make sure it's kind of on the center same as shoe too and we can delete it or turn off V visibility [Music] what we also want to do is now that wonders you two we're going to move the line over one so using our x value slide it over till it's underneath that shoe we're also going to take our button we're going to slide out [Music] the button underneath so add some Gap into the middle so let's do 30. I'm also going to take off the text that says next Style turn off visibility so it's just two arrows I'm going to do this again so let's press option now to close all our layers command d to duplicate desktop 2. move it over let's turn our circles back on [Music] we're going to rotate it 180 degrees negative 180 grab the shoes one two and three change them to zero turn off your circles change this one to 120 k for scale 120 oops make sure you're only grabbing one [Music] shoe number two change to 120 [Music] shoe number three change to seven eleven put my circle back on make sure it's about in the same spot foreign I'm going to go through and click all of these shift click turn on clip content we also want to take the next button and make sure we can only go back we can only go back to the left so grab this [Music] and we'll push these together but we want to make sure that the other ones on top [Music] we also want this line to be underneath shoe number three once everything looks right we'll move the prototyping sure all your circles are off foreign let's get to the Prototype panel we're going to prototype this in a few different ways so first we're going to use this button double click on it and we're going to drag it to the next frame say on click navigate to smart animate gentle 2 000 milliseconds we're gonna grab this button go back to the left you might actually want to pull these in closer so you can see a little bit more there we go all right grab this button shift click [Music] to this Frame It should keep your settings [Music] grab this button shift put it over here gentle [Music] and then this button here draw your line back to that frame all right now we have our buttons set up for Prototype we also want to be able to click on the shoes and then go to where they need to go grab on shoe number two and I can grab over here shift command click to grab both of them at the same time grab the arrow and drag to the spring chantilla 2000 I'll grab this one shoe number three shift command click shift number three over here move to this Frame [Music] and then the colorful shoe of shoe number one shift click to this Frame over here I also want a dragging effect so if you drag the shoe up and down you'll be able to change the variation so let's grab on shoe number one make sure it's on shoe one and I want to be able to drag so this over to this Frame here [Music] let's go on drag smart animate gentle two thousand same with this shoe number two on drag shoe number two is gonna drag both directions [Music] gonna be able to drag it up and down and then shoe three when you drag it should go back to shoe number two once you have all of these crazy looking lines let's play the animation and see what we got I think this looks super cool if you guys have any more ideas on what you want to see or any other tutorials you can think of that might be fun um send them my way in the comments and I will definitely look into them if you like this video consider uh following and subscribing what is it subscribing uh thanks guys [Music] foreign foreign [Music]

Channel: Shmelt studios

Views: 12,721

Keywords: Figma, ui, ux, animation, tutorial, webdesign, adobe, design, speed art, beginners, advanced, auto layout, diy, figmatips, web flow, project, how to, prototype, plugins, learn, logo, wireframe, toggle, zodiac, nike

Id: -puTS2tpVCo

Length: 35min 9sec (2109 seconds)

Published: Wed Apr 05 2023