Collapsible side navigation bar in Figma

figma file: www.figma.com/...
icons: heroicons.com/
variables starter plugin: www.figma.com/...
01:19 nav item component
04:39 header and collapse button
06:51 putting it all together
08:11 collapsed state variant
09:35 making a small prototype
related videos:
• Figma tutorial: Checkb...
• Add colors, radii, and...
• Gentle intro to Figma'...
get in my head: world.hey.com/...
new to figma? get started here: letsbuild.clic... (affiliate link)
inspired by tailwind components: tailwindui.com...
#figma #designsystems #uidesign

[@MayerAd]

Masha, been loving your content. Thank you so much!

[@mash312]

thank you thank you 🙌

[@alexzlatkus7057]

I like the softness or this design!

[@mash312]

🤍🤍🤍

[@whennn]

Thanks. Think you could do one that its collapsed all the time and it shows the icons, and only when u hover the icons it expands and then closes again when the mouse is off? Been trying to do that but it’s a bit tricky. Specially having hover effects and on click effects.

[@mash312]

I think it's somewhat possible, but definitely tricky! Here's an example where you hover over to expand it: www.figma.com/proto/sAS6AMz4ZbP2ejCe6TG7eA/Collapsible-navbar-(Community)?type=design&node-id=9-1543&t=uyGnjEOZ69ayfyei-1&scaling=scale-down&page-id=0%3A1&mode=design
It's a bit buggy since it treats the width of the collapsed state as the hover area and not the expanded state (so if you bring the mouse over to the right too much in the expanded state, it will collapse even though it's not supposed to)