Menu Animation in Figma

[Music] what's up guys let's uh make this cool animated menu bar first you're going to open up figma draw a rectangle and round your corners then change the fill to Black let's put a circle on top you're going to change that fill to White I'm actually going to change the corner of this [Music] double click on your circle grab the anchor points and drag it up until you get this weird ugly dripping shape you're going to make your shape a little bit bigger and stretch the anchor points until you're happy with your shape [Music] let's make another circle on top Center it and change the fill to Black I'm going to open my favorite plugin for figma Icon duck and type in home that looks good search for fire flame and setting said teens can't spell that looks good space them out [Music] and then I like to take my icons out of the icon duck folders and move them up when you have a group like that you can make it one vector by pressing command e all right and you're gonna move your house into the circle to find the right size I'm going to pull my icon out and then resize my other icons so they are the same size [Music] those look good I hid my group and now I'm going to put my icons into the rectangle and make all of them white you can tidy them up and then adjust the margins between them and then Center them and turn your group back on and move the house up into the center of the group that looks good now we're going to change the fill of the house to an orange color select the whole group and frame the selection let's name this Frame home option drag down to make a second frame let's name this one fire move the flame icon up to match the house move the group over into the center of the fire move the house down to match the settings icon change the fill to White change that fill to Yellow option and drag again to make another one name this one settings [Music] move your group over to the settings icon move your icon up change the fills and move that one down grab all of your frames and make a component set switch to the Prototype panel click on your icon and drag it to the next frame frame your settings are going to be on tap smart animate gentle at 800 milliseconds [Music] move your component off of the frame go to the settings panel and add in your component now let's play your animation and that's how you make the animated menu bar in figma if you like this video please subscribe thanks [Music] foreign [Music]

Channel: Shmelt studios

Views: 218,857

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

Id: P8O78APM17c

Length: 4min 51sec (291 seconds)

Published: Fri Nov 11 2022