Figma Tutorial: Hamburger Menu Animation | 2021

In this UI Design Figma Tutorial, I'll teach you how to animate the classic hamburger icon so that it open and closes a mobile menu.

The hamburger icon is pretty much a cultural icon of the internet these days. There are so many variations, just like the delicious meal itself! I like to keep it simple with the three bars.

But thanks to its popularity you can now quite confidently use it with a label and most* people will know what to expect when they tap it.

*ideally a text label should accompany your icons, but this isn't always possible.

The three bars lend themselves well to animating into the closed cross icon, and that's what I'll show you in this tutorial.

As always your feedback is very welcome, let me know if you found this useful or not. Until the next one!

Images courtesy of the wonderful photographers on Unsplash

#UXandD #FIGMA #UIdesign

--

--

Top Adobe XD tutorials

--

[UXDesign]

The hamburger menu is a stable of responsive design these days. Learn how to animate between open and closed menu states in this Figma Hamburger Menu Tutorial!

[StarcoreLabs]

Great video. I love these focused how-to topics.

[humayrabushra]

Thanks a ton for this super awesome and easy tutorial! Was of great help!

[kuso]

this is very useful share, thank you so much!

[MRC]

thanks!!! great tutorial, Question for you, when I want to add the animated menu to other screens it won't work any idea? I can do the menu to slide in, but then the animation from hamburger to "x" doesn't work. any ideas?

I want the animated menu to be available from any of my prototype screens

I don't know if I made myself clear haha ✌🏻

[PcHabitat]

Great video air. Do you happen to have a video with spacings between components? I mean like blocks starting at 8px, 16px, and so forth so all components have eaqual length lets say between a headline and paragrapgh for example.??

[Naz-yibs]

Subscribed! just added this to my own hamburger animation :), thank you. There is a slight issue I am having however, I use the naming convention for icons where, when you swap icon instances the color persists. If the icon, has more than 1 vector layer, those layers need to be put into a Boolean Union. But, within a union, giving a layer an opacity of 0, doesn't work. Hiding the layer altogether doesn't give the same animation as the one in the video. I would like to keep color overrides along with the animation. Is there a way?
Thank you in advance.

[abdi_pie]

I feel sucks dude, the text is too small

[dariayudina]

u didn't tell that u need to click overlayer

[yostinawasef]

The video was too quick to keep up with what's needed to be done