Design This ON/OFF Toggle in Figma (Easy)(2023)

hey guys today I'm going to be making the sun in Moon toggle with a hover effect in figma let's jump into it I'm going to open a new document I'm gonna make a frame [Music] let's make the frame 369 by 145 and around my Corners to 200 I'm going to zoom in draw a circle o on your keyboard [Music] let's change this to 120 by 120. yeah and then put it to the side inside your frame alright let's name this Frame Sun and we'll name the ellipse Sun as well I already have my colors preset so I'm going to just pick some from there so we'll take our frame make the background blue grab the ellipse and make it yellow I want this to look three-dimensional so we're going to add some highlights so let's go to effects inner shadow and let's add a white highlight adjust the opacity you can actually make it more yellow and we'll put it more on this side [Music] let's also give it a shadow on the inside so an inner shadow coming from the bottom [Music] I think that looks good we'll actually make this a little more yellow now let's add some rays behind so I'm going to take my ellipse and put it into a frame option command G I'm gonna name this sun and Moon now I'm going to add some rays behind so let's choose our Circle tool again foreign and then underneath make it white adjust the opacity to 10. make sure it's centered command d to duplicate make it bigger I'm pressing option and shift to pull from The Middle command D again duplicate same thing option shift to drag out I'm going to grab these put them into a group command G let's name this Ray now let's make our clouds so I'm going to grab the ellipse tool o on your keyboard I'm going to change these to a white color but more of a blue white and you can adjust your circles any way you want to just make sure they stay inside of your frame so I'm option dragging making my circles inside the frame making sure they're inside foreign once you have something that looks sort of like clouds and they're all in the frame grab them all shift and click on all of them and let's unify the selection Union selection stainless clouds front I'm going to put it behind my sun and moon frame have one on top though make sure that's in there all right that looks good I'm actually gonna move this down a little now that looks good all right let's duplicate this commandy push it up change this to cloud back [Music] put it underneath change the opacity to 60. and adjust your Cloud pieces so they come out a little bit further it's totally up to you however this looks you can adjust them making bigger all right I think that looks good okay let's add some inner Shadows on this Frame so I'm going to close it option l go to your effects Let's do an inner shadow I want to keep this black because it's going to go on a different background as well so I'm gonna blur it out adjust your settings let's do one for the bottom as well in your shadow coming up from the bottom give this one more blur and we also want it to look beveled so I'm going to grab the whole frame we're going to add some drop Shadows [Music] this one's going to be a highlight though pushing the white we're gonna drag the opacity up [Music] let's do it one more time and we'll add the top just push this to the top that looks good now it looks like it's beveled we're going to add a shadow on our sun it's a bit of effects drop shadow just your settings you can make this totally accustomed to you as well however you feel it looks best I'm just going to add another one to add some depth and that looks pretty good to me now we're going to add the Moon I'm gonna grab my son press option drag it over put it back into my frame let's name this Moon I'm gonna adjust the colors I'm gonna use this gray color we're going to adjust the shadows as well to make this darker grab this one and make this lighter so no yellow I'm going to add Moon spots so press o on your keyboard for Circle you can make these however you want and grab all of them command click [Music] change the color to gray a darker gray we're going to add an effect of an inner shadow and we'll adjust it down to about say one command G to put these into a group and name the spots put it in grab your moon make it a group we'll name this one [Music] you can adjust these however you like [Music] grab your sun and moon frame and good content and change the corner roundness to 200 so grab your frame click on your moon change the x value to zero grab this layer and your raise move it over to the side by sliding your x value let's take our clouds front and back and push them down on the Y value [Music] change this to a darker color let's add some Stars so we're going to go up to plugins icon duck star find a star that you like we're gonna go with this one [Music] I'm gonna drag this out of my frame close this double click I just want one of them so I'm going to grab it happen shift click off this one command X to cut delete these command V to paste and make it white let's put it in my design and I'm going to scatter these around so option drag to copy I'm going to do different sizes all right once you have your stars the way you like grab them all grab this one shift click all those we're gonna put them into a group command G we'll name it stars move your group Under the Sun and Moon frame and that is our moon spring all right let's move it back to the Sun so I'm going to grab my stars and both of my cloud layers using the Y value bring them back up [Music] then I'm going to shift sun and moon and the Rays back over by using the x value [Music] then I'm going to move the Moon put the x value off change the background back to the light blue let's option L to close our layer option drag to make a duplicate and we're going to make our hover for the Sun so we'll say Sun hover and all I want to do is scoot the sun and the raise out just a little bit [Music] all right let's move the sun 1 out we'll put it underneath we'll name it Moon hover take your sun and your raise move them with the x value over to the side move your clouds front and back and your stars down with the Y value [Music] change your frame to a darker color and then set your moon x value to zero duplicate this put it underneath remove that it says hover go back up to your moon hover take the Sun and the Moon and the Rays nudge them over a little bit option L to close all of your layers grab everything put them into a component set go to your prototype panel command click on the Sun drag it down to this Frame we'll say while hovering it's going to ease out at 300 milliseconds I'm going to command click the sun and the other Sun [Music] and drag it down to the Moon and go on click smart animate gentle at 2000 same thing with the Moon command click on the moon make sure it's on this layer drag up while hovering ease out 300 we'll grab this one shift command click to grab both push it all the way up to the sun on click smart animate gentle 2000. add a frame change the background go up to your assets and drag in your component then play your animation if you guys like this tutorial please give this video a like and if you want to see more stuff please subscribe thanks guys [Music] thank you [Music]

Channel: Shmelt studios

Views: 17,370

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

Id: S6T6hrc8cQo

Length: 14min 30sec (870 seconds)

Published: Mon Mar 27 2023