Create a Collapsible Sidebar in Figma like a PRO!

In this Figma tutorial, we'll be creating a collapsible sidebar in from scratch. This video is great for beginners and those interested in learning some advanced techniques. We'll go through the entire process, from designing the sidebar to animating it for a smooth user experience.
Download the tutorial project file: bit.ly/3NMDHgW
Try Figma for free: bit.ly/418GTGC
Get Figma Professional: bit.ly/42cql1U
IN THIS VIDEO
- Designing a collapsible sidebar in Figma
- Adding animation to your Figma prototype
- Useful Figma tips and tricks for better design workflow
Whether you're new to Figma or looking to expand your skills, this tutorial offers a clear and casual approach to creating an interactive collapsible sidebar.
CHAPTERS
0:00 Intro
0:48 Building the navigation item
9:15 Building the sidebar
16:13 Building a dynamic page
Disclosure: Some of the links in the video description may result in the author receiving a commission or other compensation for any resulting sales or clicks. All opinions expressed in the video are truthful and based on personal experience. Any sponsored content will be clearly disclosed.

[@KulwantSingh-ic8uz]

Great tutorial.....thanks plz mention how can we add submenu to some of these options.

[@micaelaestrella7290]

I am just amazed with your tutorial. It was really helpful. Thank you!

[@olenaguryeva1035]

Next-level tutorials, really appreciate the work, thank you!
I hope you will return to creating them.
🌼

[@mariabrunalopes]

Thank you so much 🙏

[@larissacamara1393]

LOVED THE
TUTORIAAAAL AAAAAA WILL HELP ME SO MUCH

[@viktoriamarch9571]

Really helpful video. I was struggling doing almost the same collapsible sidebar menu but some of my menu items have also the accordion menu (the 2nd level), the main trigger is hovering over the area, not a click. During prototyping Figma constantly started to switch smth incorrectly or during collapsing chose the wrong variant and the menu item didn't collapse fully or run away from the screen. Things became very messy and I couldn't understand why. I almost gave up but tried to change the names of the child menu items inside a sidebar so they don't repeat and looks like it helped. I kept to your logic while building and now I think it's almost usable .
Thanks a lot for such an informative video.❤❤

[@koyekfrnd]

i can't change the icons, only star is showing

[@alfamalik9027]

how to add your own icon? should i make a different component?

[@jusssable]

I can't add a Collapsed state in the variant, why is this?

[@hrishikeshupadhyaya7229]

Click on your component , in the properties tab you will a + button on the right corner , there you name your property and add a value to it as well

[@hrishikeshupadhyaya7229]

Select the variant option from the dropdown

[@heryseptiansyahti-a9817]

your video too small in my laptop, next time, decrease your resolution desktop,

[@fooballers7883]

Nice one thank you....