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
https://unsplash.com/@virussinside
https://unsplash.com/@daniel_sturgess

#UXandD #FIGMA #UIdesign

--

❤️ Subscribe to the channel: https://bit.ly/2AQm1xh

🐦 Follow UX&D on twitter:   / ux_and_d  

💵 Buy design resource files: https://gumroad.com/uxandd

--

Top Adobe XD tutorials

⭐️ Wireframing in Adobe XD:    • Wireframes in Adobe XD and why you sh...  

⭐️Why and how to use UI kits in Adobe XD:    • Why and how to use UI kits in Adobe XD  

⭐️ How to use the grid tool in Adobe XD:    • How to use the grid tool in Adobe XD  

⭐️ How to create inner shadows in Adobe XD:    • How to create inner shadows in Adobe XD  

⭐️ How to mask in Adobe XD:    • HOW TO MASK in Adobe XD!  

--