Collapsable Sidebar Animation in Figma (Easy)

Learn how to make this animated collapsable sidebar in Figma! Build frames and prototype your animation while using the best auto-layout techniques.
👇Get the Studio Pass
bit.ly/49COJNQ
👇 Try Figma for FREE
bit.ly/figfree
👇Download Figma For Pros
bit.ly/fig-pro
🚀 Subscribe for more Tutorials
bit.ly/3T22qMZ
📥 Buy Design Files & Merch
bit.ly/3WuUl6D
🌎 Find Me on Social Media
Tiktok: bit.ly/3U7TdnQ
Instagam: bit.ly/3fF9hyf
Facebook: bit.ly/3ML5axg

[@mimobenslimen7035]

thank you for the tutorials 👌

[@chiomaezeugwu7800]

Thank you so much 🎉

[@akashparadkar882]

Thanks Bro. Its very east to follow.

[@DiviNe136]

Thanks so much for the video, started to know a little more.

[@user-ze9jg6xg9w]

Thank you. You are probably one of the best on this platform with your tutorials. Pls post More.

[@shmeltstudios]

whoa im flattered

[@apoorvamhalsekar409]

This is fantastic and so well put. Would love to see more of these✨

[@shmeltstudios]

Thank you! Will do!

[@julianamadeiradesigner]

I Love it! Thank you!

[@apurbohoque6829]

Good shit ❤

[@imca-b-10rajwanijatishmano4]

Thank you for this wonderful tutorial!!
How can we change icon color for both while hovering and when clicked?

[@rezkitabmagang]

salute bro

[@AlexGamerShow1]

It was great, I get motivated by watching your videos

[@shmeltstudios]

I'm so glad! Thank youuu 🤟

[@chaipat0_0]

thank youuu😍

[@shmeltstudios]

You're welcome 😊

[@sergiylutskiy]

Good job, thanks for you tutorial
Very aesthetic

[@shmeltstudios]

Glad you like it!

[@narendrapotturi548]

How to integrate this with Power bi ?

[@thebram]

How about if the menu has a submenu, it drops down if you hover to a menu option?

[@dailyquotes-]

I wanna do a scroll down one ..when we click on 3 dots in chrome the menu opens like that but i am not able to please tell me how to do it 😊

[@jerronickog9933]

Then how to prototype?

[@Goofykumar676]

There is an error after mouse hover full text displayed in collapsed state
Here you showed the hover state after the expand collapse
It does not work well after the hover

[@d2ka]

Learn how to use space between and stop creating invisible rectangles ;)

[@fewcharecords1339]

What are the benefits or reasons for creating a side menu like this ? I see a lot of designs like this

[@SulkinWolsla]

🙄

[@dunsindavid5446]

Please how did the vector you option dragged from the “button template” become a dashboard???

[@shmeltstudios]

When you option drag the vector off of the button template, put it into an auto layout (shift a) and name it dashboard, then put it into your icon section

[@dunsindavid5446]

@@shmeltstudios thank you

[@dunsindavid5446]

Cause on mine it’s still named vector

[@user-de5ud9vy8i]

Вопрос... зачем раскрывать схемы конкурентам?

[@saarsharabi5397]

CANT 👂 !!!!

[@DanielCodes-xyz]

Maybe you can help me with a quick question. I made a similar menu, but I have 3 states. A default, hover, and clicked. If you collapse the menu, click a button, then expand it again, the button remains small and doesn't expand back to full size. It works the other way around, if you click a button (set it to clicked state), then collapse the menu / expand it, it functions as it should.
I can't figure out why that is. It's only when you click a button while the menu is collapsed that it starts getting screwy.