Design a Functional SIDEBAR MENU in Figma (With Hover States)
HTML-код
- Опубликовано: 31 май 2024
- Visit my STORE: bit.ly/mavi-design-store
Explore Mavi Design COURSES : bit.ly/mavi-design-courses
Download FIGMA for FREE: bit.ly/get-started-with-figma
Take FULL advantage of ALL FIGMA's features: bit.ly/figma-professional-plan
In this video I'm going to show you how to design a fully functional / working sidebar menu navigation for your app or website in Figma. It's great when you want your user to be able to navigate through pages and give him visibility into where he currently is
Steps:
0:00 - The Result
0:15 - Tutorial structure & steps
0:54 - STEP 1: Creating pages
1:50 - STEP 2: Button component
5:50 - STEP 3: Menu component
7:44 - STEP 4: Link buttons to pages
8:31 - STEP 5: Create menu variants
9:58 - STEP 6: Place menu variants
11:39 - The Result
----
© 2022 Mavi Design
How to Create (Design / Build) a Fully functional Sidebar Menu Navigation With Hover State in Figma (Full Process Step-by-step explanation tutorial) - Figma tutorial for beginners. Simple and easy to follow tutorial with explanation 
Хобби
Upvote this comment this comment if you'd like me to add this component to my store 👉 bit.ly/mavi-design-store
Extremely useful, thank you!
thank you, this is very useful
Very useful - thank you!
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?
When I press preview, the menu goes to the default state " in your case to the page 0 " what I'm doing wrong?
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"?
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.
Hi Mavi
Would you consider making simple Character Animation in figma like you do in after effect ?
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
@@mavidesign I imagine it for a presentation.
There's some cool powerpoint animation like this ruclips.net/video/ccxFYm5rYHU/видео.html and I guess that it can be done with figma but I haven't found anything on it in youtube.
Interesting, thanks for the tip! Doing this in a form of slideshow could work:)
at what instances do you apply this in a webpage
That depends, usually whenever you have some kind of "system" that you need to navigate through. For example: RUclips Studio
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.
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 :(
@@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
@@illiakolesnikov7169 it might a bug because I follow 2 of his similar tutorial but none of the active state works
@@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!
@@teejay5992 Thank you! I tried and it worked!)
we all came here to learn the function and prototype as the title says, and you spent 80% of the time on the design.
The title starts with “design” though