Create a Functional HAMBURGER MENU NAVIGATION in Figma (Tutorial)

Тәжірибелік нұсқаулар және стиль

Get the SOURCE FILES for this project ($1.99): payhip.com/b/O4bjF
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 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

Пікірлер: 57

  • @sul-dev
    @sul-dev5 ай бұрын

    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.

  • @sarinasaheli5440
    @sarinasaheli54409 ай бұрын

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

  • @raqueliatheimpatientgardne8196
    @raqueliatheimpatientgardne8196 Жыл бұрын

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

  • @abigneignem2953
    @abigneignem2953 Жыл бұрын

    Thanks for the tutorial!

  • @michaelsmilas2220
    @michaelsmilas222013 күн бұрын

    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

  • @stevef
    @stevef3 ай бұрын

    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.

  • @dgitalnative
    @dgitalnative4 ай бұрын

    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 :-)

  • @moisesbidal2554
    @moisesbidal2554Ай бұрын

    broo i love u ! Thank u so munch

  • @JorgeTT.
    @JorgeTT.6 ай бұрын

    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.

    @JorgeTT.

    6 ай бұрын

    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

  • @EnricClemente-ky8yq
    @EnricClemente-ky8yq Жыл бұрын

    Thanks!

  • @vamboo8918
    @vamboo89183 ай бұрын

    thanks mavi

  • @dusanvulic7275
    @dusanvulic7275 Жыл бұрын

    AWESOME !!!!!!!

  • @jaseone1516
    @jaseone1516 Жыл бұрын

    Nice job, thanks for this.

  • @mavidesign

    @mavidesign

    Жыл бұрын

    Thanks! Glad you found it helpful

  • @raqueliatheimpatientgardne8196
    @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

  • @user-yh7ko6mg1i
    @user-yh7ko6mg1i8 ай бұрын

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

  • @Michb3ck
    @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

    @boski.creations

    11 ай бұрын

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

  • @arielcopo479
    @arielcopo47910 күн бұрын

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

  • @dhananjai4959
    @dhananjai49598 ай бұрын

    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?

  • @jeffersonmarvel5189
    @jeffersonmarvel51897 ай бұрын

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

  • @MrsAmerica2010
    @MrsAmerica2010Ай бұрын

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

  • @devanshivasa7294
    @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

    @himanshushekhar2047

    Жыл бұрын

    hold alt or option and drag it will be copied.

  • @pookiecookie1994
    @pookiecookie19947 ай бұрын

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

    @RAHUL-dt5xm

    18 күн бұрын

    To use smart animate

  • @KohitiStridah
    @KohitiStridahАй бұрын

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

  • @entrinsek9230
    @entrinsek9230 Жыл бұрын

    awsooooome

  • @simix139
    @simix1399 ай бұрын

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

  • @ostrathaus
    @ostrathaus Жыл бұрын

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

  • @mavidesign

    @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

    @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

    @ghzlshch7238

    2 ай бұрын

    Thank you❤🎉

  • @Purv.
    @Purv.3 ай бұрын

    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?

  • @KiranGokal
    @KiranGokal Жыл бұрын

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

  • @mavidesign

    @mavidesign

    Жыл бұрын

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

  • @marienoeI
    @marienoeI23 күн бұрын

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

  • @marienoeI

    @marienoeI

    23 күн бұрын

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

  • @Anna-rn1tc
    @Anna-rn1tc2 ай бұрын

    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? 😅

  • @muhammedrafivm809
    @muhammedrafivm80910 ай бұрын

    didn't show spacing mode in advanced Layout settings

  • @marienoeI

    @marienoeI

    23 күн бұрын

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

  • @Miss_mystrical
    @Miss_mystrical11 ай бұрын

    Hello hamburger me mobile number kese update kare

  • @reyyanmd4159
    @reyyanmd415910 ай бұрын

    2:43 how did you do that X ??

  • @ruchitabhalekar

    @ruchitabhalekar

    8 ай бұрын

    alt+v

  • @martin_6264
    @martin_62643 ай бұрын

    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

    @mavidesign

    3 ай бұрын

    Check if you have auto layout enabled

  • @user-zj5bx1ze7q
    @user-zj5bx1ze7q11 күн бұрын

    9:17

  • @aramv898
    @aramv898 Жыл бұрын

    Yeh but how to convert that to code html and css

  • @simon9955

    @simon9955

    5 ай бұрын

    Do You have the answer?

  • @Anonym12351
    @Anonym12351 Жыл бұрын

    How did you even select the text???? like how?? You dont show how to so i dont really know how to select and follow your video..

  • @mavidesign

    @mavidesign

    Жыл бұрын

    Can you provide a timestamp please?

  • @godislove1500

    @godislove1500

    Жыл бұрын

    @@mavidesign Hi, I guess is in the minute 5:54 as I had the same problem. When I copied it comes as component. Thank you for the tutorial.

  • @godislove1500

    @godislove1500

    Жыл бұрын

    You explain it in the minute 8:33 - Opt / click and drag

  • @kandziaq
    @kandziaqАй бұрын

  • @MeetTheMozingos
    @MeetTheMozingos11 ай бұрын

    omg this music is awful!! I want to watch it but it's causing me so much anxiety!!!

Келесі