Create a Functional HAMBURGER MENU NAVIGATION in Figma (Tutorial)

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

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

50% 1

Get the SOURCE FILES for this project ($1.99): payhip.com/b/O...
Visit my STORE: bit.ly/mavi-de...
Explore Mavi Design COURSES : bit.ly/mavi-de...
Download FIGMA for FREE: bit.ly/get-sta...
Take FULL advantage of ALL FIGMA's features: bit.ly/figma-p...
Mobile App UI Design Playlist: • FREE Figma Mobile UI D...
In this Figma interactive prototyping tutorial, we're going to create a mobile app / website hamburger navigation menu in Figma. This interactive component / prototype features 6 pages: homepage, page 1, 2, 3, 4 and 5 that you'll be able to navigate through. We'll be using the "open overlay" as well as "close overlay" prototyping features alongside with working with components and variants (pressed down button state).
How to create / design / build an interactive mobile hamburger navigation menu prototype in figma (step-by-step explanation tutorial)
--------
© 2022 Mavi Design

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

25 окт 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@dgitalnative 8 месяцев назад

As a figma Newbie who just starts, this is so fascinating :D I need a half day for this i guess, and youve done it in 15 min. The good thing, everyday i learn something new and getting faster :-)

@MissAussieChick84 25 дней назад

Thank you so much for your videos… I literally failed out of a university semester because I could not wrap my head around Figma. But this time, with your help - I’m sitting on a distinction!

@felicenguyen7121 28 дней назад

Thanks so much for your helpful video. I've been struggling for this problem for such a long time. It's detailed and easy to follow!!!

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

thank you so much, I've been struggling for hours to wrap up a mobile web design because I couldn't figure out how to make a menu that's actually functional

@MrsAmerica2010 5 месяцев назад

Can you say the shortcuts you use bc it makes it more complicated to try and guess

@sul-dev 9 месяцев назад

Amazing tutorial. I've never designed before and this was so helpful I created a full mobile nav menu using the skills in this video: creating components, creating auto layouts, prototyping interactions. Thanks so much.

@stevef 7 месяцев назад

This was by far the best menu tutorial. Nice work. You should do a new one that accounts for some of the changes in Figma's design panel.

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

Yes because I’m having a lot of trouble following along

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

Wow, that was a whole masterclass, I had to watch it again over and over, Because It wasn't working lol. But then It is currently working for me. Thanks-

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

the only problem i had is that, the Burher Menu is showing while the menu is open, so its mixing both the X and the Burguer menu

@sevedewabob Месяц назад

Thanks a lot, that's the best video I found on that subject, the french videos are not so good!

@devanshivasa7294 Год назад

Hey can you tell me what command do you exactly use to copy the button from a component. Mine doesn't look exactly same like you. When I'm duplicating or copying it on the outer area it is creating anoth frame and yours doesn't look like that. You are dragging a button out of a component while dragging it what is the command that you are using?

@himanshushekhar2047 Год назад

hold alt or option and drag it will be copied.

@sarinasaheli5440 Год назад

That was great, straight forward and easy to understand for me . Thanks a lot🙏🙏

@raqueliatheimpatientgardne8196 Год назад

Thank You for the great instructions! Easy to follow and it works like a dream! New sub. Thanks again!

@jeffersonmarvel5189 11 месяцев назад

6:00 i didnt found the content, im just already following on your tutorial

@KatieGong-l3s Год назад

It is great tutorial. Just one thing, the close icon does not move with the menu? I am not sure how to fix it?

@raqueliatheimpatientgardne8196 Год назад

Just one question which I am sure I missed this somewhere. But when I view the prototype it shows the "X" close mark over the three lines when the three lines are clicked/tapped. How do I get the three lines to NOT show after tapping or clicking and just show the "X," close button? Thanks R

@pookiecookie1994 11 месяцев назад

why does the component not work when you copy and paste it into another project? i've done this before with other ones and have had no issue

@nothingdraw1 Год назад

When creating the menu hamburger button (closed), why didn't you just delete one of the lines, instead of set its opacity to 0%? Thanks for the tutorial btw!

@RAHUL-dt5xm 4 месяца назад

To use smart animate

@Michb3ck Год назад

Thanks this helped a lot! But how about you make an selected state for the entries in the pageselection? For example, showing that page 3 is active.

@boski.creations Год назад

Omg I have the same doubt! Did you figure it out?

@KohitiStridah 6 месяцев назад

could I get a tutorial for desktop please?? For some reason the option to use content option is showing up.

@Anna-rn1tc 7 месяцев назад

after creating the new component property menu button text, there is no option to change the text of the button. there is a switch on/of toggle. whilts creating the component property, your video shows that the value is assigned as Menu button. I however can only choose between True and False... can someone help me? 😅

@Milshua Месяц назад

Do I need the full version for this?

@chloekennedy7194 2 месяца назад

Hello, at 6:22 you create a component property but instead of having an editable value, my value only has the options "true" or "false". My component property is created, but I can only switch the true/false button. It will not allow me to edit. How do I fix this so that I can edit the text to say "page 1"?

@graceprz 20 дней назад

when i hit run the menu shows up out of the bounds of the screen until i hit where the logo would be then it repairs itself. Any solutions on how to fix this?

@abigneignem2953 Год назад

Thanks for the tutorial!

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

Spacing mode doesnt show up for me for the Header auto layout

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

okay I figured it out, spacing mode is now just setting the space between the elements to ''auto''

@vamboo8918 7 месяцев назад

thanks mavi

@fedorTer89 3 месяца назад

Thank you thank you thank you so much!!!!!

@muhammedrafivm809 Год назад

didn't show spacing mode in advanced Layout settings

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

how did you resolve this? having the same issue as well

@Purv. 8 месяцев назад

okay so someone help me in this.. as u can see on 1:22 when u duplicate it, it creates 2 another layers which u can then customize individually. but when i duplicate it, all comes under vector 1. and not another layers are made. so i cannot customize individual lines only can select them as a whole. am i doing something wrong?

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

Try to scroll down, let see if your navigation will stay on fix position or it will scroll down.

@moises_Ao 5 месяцев назад

broo i love u ! Thank u so munch

@simix139 Год назад

That might be the best and clearest tutorial I've ever seen. Good job and keep it up :)

@jaseone1516 Год назад

Nice job, thanks for this.

@mavidesign Год назад

Thanks! Glad you found it helpful

@dhananjai4959 Год назад

Dear Sir, clicking on Hamburger menu it open the menu item with respective link, I would like to know if there's any change can we show icon (example - Home icon etc) as a default which will have a link to the respective page. Above home icon there will be Hamburger menu, clicking on the Hamburger can we show Icon + Home text?

@seancarlopiodo2685 3 месяца назад

what key did you press to see the measure of padding ?

@mavidesign 3 месяца назад

alt / option

@KiranGokal Год назад

How did you select the vector and rectangle so it showed the distance from all sides? 1:16

@mavidesign Год назад

i selected the line and then pressed alt (option) + hovered over the rectangle's edges :)

@aramv898 Год назад

Yeh but how to convert that to code html and css

@simon9955 9 месяцев назад

Do You have the answer?

@EnricClemente-ky8yq Год назад

Thanks!

@ostrathaus Год назад

great tutorial - is there a way to do this for a mobile "one-pager" with anchors as menu targets?

@mavidesign Год назад

I think so! You can connect individual menu items in Prototype mode to items on the page which provides a functionality similar to html anchor

@ThePechk Год назад

@@mavidesign - Could you please meke this kind of tutorial for "one page - landing page" design with dropdown hamburger menu and anchors :) There is no good video tutorial how to do that in youtube.

@ghzlshch7238 7 месяцев назад

Thank you❤🎉

@dusanvulic7275 Год назад

AWESOME !!!!!!!

@martin_6264 7 месяцев назад

Dude I can’t figure this out for the life of me it’s been 2 days … around the 7:11 min marker when he changed fixed width to filled container it isn’t giving me the option ..

@mavidesign 7 месяцев назад

Check if you have auto layout enabled