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

Подписаться 43 тыс.

Просмотров 17 тыс.

50% 1

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

Хобби

Опубликовано:

10 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 25

@mavidesign Год назад

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

@maryna4338 Год назад

Extremely useful, thank you!

@MartialTricker Год назад

Very useful - thank you!

@yan-hs9sn 2 месяца назад

thank you, this is very useful

@amaru_17 4 месяца назад

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?

@royalf944 10 месяцев назад

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

@soniamaklouf1178 2 года назад

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

@mavidesign 2 года назад

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 2 года назад

@@mavidesign I imagine it for a presentation. There's some cool powerpoint animation like this ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-ccxFYm5rYHU.html and I guess that it can be done with figma but I haven't found anything on it in youtube.

@mavidesign 2 года назад

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.

@obiomaajoku7233 Год назад

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: RU-vid Studio

@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!)