Design a Functional SIDEBAR MENU in Figma (With Hover States)

[@mavidesign]

Upvote this comment this comment if you'd like me to add this component to my store 👉 bit.ly/mavi-design-store

[@f-ou2jw]

Thank you! that is what i want to learn 🙏❤

[@maryna4338]

Extremely useful, thank you!

[@yan-hs9sn]

thank you, this is very useful

[@amaru_17]

Too useful, thanks. The example works well for me, but when I adapt it to my app it becomes complicated. I'm having trouble adding an icon because I can't change it for each option, and I would also like the text centered, could you please help me?

[@MartialTricker]

Very useful - thank you!

[@KaylaSu-f4i]

very useful video! But how can I make this whole page section into my landing page? because the final look is multiple pages, i dont know how to add them into a landing page

[@illiakolesnikov7169]

I did examply the same, but it didn't work for me. After the first page changing figma just losess the focus and while hovering still works, my active button is not visible.

[@teejay5992]

I have the same problem as well, can't figure out if this is a bug from Figma or what? I have redone many different versions but none works for me :(

[@illiakolesnikov7169]

@@teejay5992 same, man. Same :( I even asked more experienced designer to help me, but he wasn’t able to fix this issue. It seems like at the end of the day we need to find a different way to set this up

[@teejay5992]

@@illiakolesnikov7169 it might a bug because I follow 2 of his similar tutorial but none of the active state works

[@teejay5992]

@@illiakolesnikov7169 Hey I think I found the way, you should be able to select all prototype connections and tick the “Reset component state” and it will reset the active state of the buttons on the next page after the click 👌🏼 It might be a new function because in the video, he doesn’t have that tick box. Hope this helps!

[@illiakolesnikov7169]

@@teejay5992 Thank you! I tried and it worked!)

[@royalf944]

When I press preview, the menu goes to the default state " in your case to the page 0 " what I'm doing wrong?

[@soniamaklouf1178]

Hi Mavi Would you consider making simple Character Animation in figma like you do in after effect ?

[@mavidesign]

Hello Sonia, that’s a very interesting idea!💡 what exactly do you imagine the final product to look like? Because Figma allows animation only through prototyping + you cannot export video from Figma. I’ll think about it!! Thanks, Mavi

[@soniamaklouf1178]

@@mavidesign I imagine it for a presentation. There's some cool powerpoint animation like this kzbin.info/www/bejne/mZTbd4yjateMfrc and I guess that it can be done with figma but I haven't found anything on it in youtube.

[@mavidesign]

Interesting, thanks for the tip! Doing this in a form of slideshow could work:)

[@wighatsuperreggie]

What is it that prevents the hover state from just looking like the original hover button. The original hover button just says "Page". What makes it, for instance, so that when you hover over "Page 2" that it doesn't just switch to "Page"?

[@mavidesign]

Great question! I think Figma is smart about this and understands that what you're attempting to do is to override a text value of a specific text object (let's say the layer is called "text"). It then sees the layer "text" in other variants and assumes it's the same and behaves accordingly. Similar mechanism happens with Smart Animate when you're prototyping.

[@obeyyy10]

at what instances do you apply this in a webpage

[@mavidesign]

That depends, usually whenever you have some kind of "system" that you need to navigate through. For example: KZbin Studio

[@watchingrain1621]

we all came here to learn the function and prototype as the title says, and you spent 80% of the time on the design.

[@mavidesign]

The title starts with “design” though