Designing Expandable Menus in Figma: A Step-by-Step Guide

In this step-by-step tutorial, I'll show you how to design collapsible and expandable menus in Figma using auto layout. We'll cover the design process for creating a hamburger menu and how to set it up with auto layout to create a scalable and easy-to-use menu for your designs. This tutorial is perfect for UX designers looking to improve their Figma prototyping skills and optimize their design workflows. Follow along and learn how to design expandable menus in Figma today.
Try Figma for free: bit.ly/418GTGC
Get Figma Professional: bit.ly/42cql1U
🚀 CHAPTERS
0:00 - Intro
0:34 - Header
2:00 - Nav items
3:30 - Designing expanded state
4:22 - Aligning icons
5:15 - Components
7:02 - Prototype and animation
10:05 - Final result

[@rizqyrobbyalamin6897]

Interesting !!, Hope you keep it up for the upcoming video soon with another tutorial in figma

[@jeremywheat1062]

I just watched it and then followed along in Figma, and I have to say, you've done a fantastic job. Your use of the Font Awesome icon is such a great solution and really brings the design to life. Thanks so much for sharing your expertise.

[@blueskylabsyt]

Glad it helped!

[@Gatfullhet]

I couldn't change the icons, how did you do that?

[@blueskylabsyt]

I'm using Font Awesome so you can just change the content of the text layer as a local override