Create a Functional HAMBURGER MENU NAVIGATION in Figma (Tutorial)

Поділитися
Вставка
  • Опубліковано 28 січ 2025

КОМЕНТАРІ • 74

  • @dgitalnative
    @dgitalnative Рік тому +13

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

  • @stevef
    @stevef 11 місяців тому +3

    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
      @EarsandLps 7 місяців тому +1

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

  • @MrsAmerica2010
    @MrsAmerica2010 8 місяців тому +12

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

  • @MissAussieChick84
    @MissAussieChick84 4 місяці тому +2

    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!

    • @MissAussieChick84
      @MissAussieChick84 Місяць тому

      UPDATE… kept learning with your videos and got a high distinction on the next semester 87/100! You’re awesome and your content rocks!

  • @devanshivasa7294
    @devanshivasa7294 Рік тому +6

    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?

  • @sul-dev
    @sul-dev Рік тому

    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.

  • @JorgeTT.
    @JorgeTT. Рік тому

    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. Рік тому

      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

  • @michaelsmilas
    @michaelsmilas 7 місяців тому

    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

  • @ShardaeCotton
    @ShardaeCotton Місяць тому

    Thank you for this tutorial. I was wondering if there is a way to adjustment this hamburger menu to correspond with a website prototype with multiple links to different pages without messing up the functionality of the hamburger menu that already been created. If so, I do I adjusted it?

  • @luhvsophii
    @luhvsophii Рік тому +2

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

  • @jeffersonmarvel5189
    @jeffersonmarvel5189 Рік тому +2

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

  • @felicenguyen7121
    @felicenguyen7121 4 місяці тому

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

  • @pookiecookie1994
    @pookiecookie1994 Рік тому +1

    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

  • @Michb3ck
    @Michb3ck Рік тому +4

    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 Рік тому +1

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

  • @raqueliatheimpatientgardne8196
    @raqueliatheimpatientgardne8196 2 роки тому +2

    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

  • @raqueliatheimpatientgardne8196
    @raqueliatheimpatientgardne8196 2 роки тому +3

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

  • @Purv.
    @Purv. 11 місяців тому

    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?

  • @Anna-rn1tc
    @Anna-rn1tc 10 місяців тому +1

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

  • @chloekennedy7194
    @chloekennedy7194 5 місяців тому

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

  • @KohitiStridah
    @KohitiStridah 9 місяців тому

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

  • @sarinasaheli5440
    @sarinasaheli5440 Рік тому +1

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

  • @graceprz
    @graceprz 3 місяці тому

    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?

  • @marienoeI
    @marienoeI 8 місяців тому +1

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

    • @marienoeI
      @marienoeI 8 місяців тому +1

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

  • @muhammedrafivm809
    @muhammedrafivm809 Рік тому +3

    didn't show spacing mode in advanced Layout settings

    • @marienoeI
      @marienoeI 8 місяців тому

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

  • @Milshua
    @Milshua 4 місяці тому

    Do I need the full version for this?

  • @sevedewabob
    @sevedewabob 4 місяці тому

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

  • @nothingdraw1
    @nothingdraw1 2 роки тому +5

    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 7 місяців тому

      To use smart animate

  • @RachelMaherasHanna
    @RachelMaherasHanna 2 місяці тому

    I can't see the "content" panel at 5:59 even though I selected the same items. it just isnt' there at all. am I goofing something up?

    • @musaali2015
      @musaali2015 2 місяці тому

      ive got the same issue. have you figured it out yet?

    • @RachelMaherasHanna
      @RachelMaherasHanna 2 місяці тому

      @@musaali2015 ua-cam.com/video/t0vfhJALRHE/v-deo.html

    • @RachelMaherasHanna
      @RachelMaherasHanna 2 місяці тому +2

      @@musaali2015 I posted a vid it is annoying where they moved it aha

  • @seancarlopiodo2685
    @seancarlopiodo2685 6 місяців тому

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

  • @dhananjai4959
    @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?

  • @KiranGokal
    @KiranGokal Рік тому +1

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

    • @mavidesign
      @mavidesign  Рік тому +1

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

  • @arielcopo479
    @arielcopo479 7 місяців тому

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

  • @abigneignem2953
    @abigneignem2953 2 роки тому +1

    Thanks for the tutorial!

  • @aramv898
    @aramv898 Рік тому +6

    Yeh but how to convert that to code html and css

    • @simon9955
      @simon9955 Рік тому +2

      Do You have the answer?

  • @jaseone1516
    @jaseone1516 2 роки тому +1

    Nice job, thanks for this.

    • @mavidesign
      @mavidesign  2 роки тому

      Thanks! Glad you found it helpful

  • @simix139
    @simix139 Рік тому +1

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

  • @martin_6264
    @martin_6264 11 місяців тому

    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  11 місяців тому

      Check if you have auto layout enabled

  • @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 Рік тому +2

      @@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 10 місяців тому

      Thank you❤🎉

  • @moises_Ao
    @moises_Ao 8 місяців тому

    broo i love u ! Thank u so munch

  • @reyyanmd4159
    @reyyanmd4159 Рік тому

    2:43 how did you do that X ??

  • @fedorTer89
    @fedorTer89 6 місяців тому

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

  • @vamboo8918
    @vamboo8918 10 місяців тому

    thanks mavi

  • @Miss_mystrical
    @Miss_mystrical Рік тому

    Hello hamburger me mobile number kese update kare

  • @EnricClemente-ky8yq
    @EnricClemente-ky8yq 2 роки тому

    Thanks!

  • @dusanvulic7275
    @dusanvulic7275 Рік тому

    AWESOME !!!!!!!

  • @MrPartyGamer
    @MrPartyGamer 2 роки тому

    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  2 роки тому

      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 Рік тому +1

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

  • @entrinsek9230
    @entrinsek9230 Рік тому

    awsooooome

  • @李家瑀-i1y
    @李家瑀-i1y 7 місяців тому

    9:17

  • @kandziaq
    @kandziaq 9 місяців тому

  • @MeetTheMozingos
    @MeetTheMozingos Рік тому

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