How to Design Responsive Header Navigation in Figma - Autolayout

Поділитися
Вставка
  • Опубліковано 18 жов 2024

КОМЕНТАРІ • 51

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

    I'm Brazilian 🇧🇷 and I learned a lot from your explanation. thank you very much.👍

  • @ElMountaserBAbbas
    @ElMountaserBAbbas 6 місяців тому +5

    To group auto layout click shift-A , this is my first video in figma and I used to use ctrl G usual to Group but its not the same I noticed , so I found this SHIFT A

    • @designleague
      @designleague  5 місяців тому +1

      Thanks for watching and sharing your experience with the shortcut keys!

  • @emflit
    @emflit 4 місяці тому +1

    Thank you soooo much for this amazing video! Finally, I got it! Good job :)

    • @designleague
      @designleague  4 місяці тому +1

      Thanks for your comment, glad it helped you let me know if you have any questions!

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

    bro, thank you really. I subscribe, you fcking made it work for me. Godbless. I hope you continue making videos, especially for a whole landing page design process.

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

      Thank you for your comment, im happy it was helpful for you. I will definitely create the landing page process thanks for suggesting it’s important for me to create the content that you guys want! 👍

  • @christina9898979
    @christina9898979 6 місяців тому +1

    Thankyou for the tutorial :)

    • @designleague
      @designleague  6 місяців тому +1

      Thanks for commenting, i hope it was helpful to you

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

      It is helpful :)

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

    Great tutorial thank you ❤

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

      thank you for your comment @sikandar appreciate that :)

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

    nice video!

  • @PacoEm-p8e
    @PacoEm-p8e 6 місяців тому +1

    thanks for your tuto

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

      Thanks for your comment 😉

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

    Good

  • @chakaravarthy1977
    @chakaravarthy1977 10 місяців тому +1

    Bro ur voice sounds like Saul Goodman in quite manner

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

      Never thought about that i actually searched Saul Goodman to listen it 🤣🤣🤣 thanks for your comment, appreciate it 👍

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

    Thank you so much for the video!

  • @cahit7270
    @cahit7270 7 місяців тому +1

    Hi, good aproach, but how can we check, whether it is responsive?

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

      Thanks for your comment, ideally it you select the header nav component (left or right) and move it you should be able to adjust it to specific screen size, when you add a mockup e.g. 1440px, try to specify header constraints (left/right/top) this should adjust it accordingly. I will create a step by step tutorial for you on this topic in a next few tutorials and will break it down into more details, would be happy to hear your feedback if it worked. Also subscribe not to miss it. 👋

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

    ❤❤❤

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

    Can you do one with how you'd add a hamburger menu for the tablet and mobile?

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

      Thanks for your comment, I have created a video on how to add hamburger menu for mobile devices ua-cam.com/video/GLbbHmxqj10/v-deo.html

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

    Hi, i have an issue on creating an instance of the head navigator (@ 13:20 ). It produces only 1 of the 3 head navigators each time i copy and paste them over the frames (desktop, tablet and mobile). I cannot change the properties of the navigator header (S, M , L). I have followed the steps multiple times , but without luck. Is there any solution for that ?

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

      I will create a video, on this topic how to do it step by step. Please subscribe the video will be published on monday.

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

      Hi here is the new video that I have explained step by step ua-cam.com/video/zyraRIgHU_w/v-deo.html please let me know if I answered your question. thanks

    • @Paris_objects
      @Paris_objects 4 місяці тому +1

      @@designleague why I cant find this video anymore?! :(

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

      @@Paris_objects Hi Paris, thanks for your comment, I am not sure here is the URL: ua-cam.com/video/TSs1Bx4go90/v-deo.html let me know if you have any questions, happy to help :)

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

    where are the urls to breakout rooms? How do I get into them?

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

      Thanks for your comment, please see the video description you will find the figma link, you can copy/duplicate the file if needed.😊

  • @Jwarddesign-ca
    @Jwarddesign-ca Рік тому +1

    Am I a complete boomer or just a dummy? I can never see the details on the person's screen as they're showing us. I don't have bad vision either. How does everyone see everything they're showing? Can you zoom in on videos or something?

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

      Thanks for your comment! Sorry that you weren’t able to see the details, maybe try to increase the video quality to 1080p that might help!

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

      If you are familiar with the navigation on Figma, just listening already guide you where you need to go

    • @Jwarddesign-ca
      @Jwarddesign-ca 10 місяців тому

      @@marckobuendicho3883 I know the interface well. I can't see the numbers. That's the problem.

  • @govalaputra4503
    @govalaputra4503 4 місяці тому +1

    Nice tutorial!, and don't forget to drink more water bro!

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

      Thanks for your comment, happy to help! Yes, you are right i do need to drink more water. 💦 probably have to set reminders 😀

  • @SomeOne-ri1ng
    @SomeOne-ri1ng 7 місяців тому

    good tutorial ,but accent and pronocment could be beter

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

      Thanks for your comment, valid point, I’m working to improve it hopefully it will get better over time. 👍

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

    this dude talks like my dentist

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

      🤣🤣🤣 I hope you like your dentist 🦷 thanks for your comment. 👍

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

    This guy sounds like he's falling asleep

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

      Nice comment, i hope the tutorial was helpful for you! 😁

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

    your voice not clear at all 😩😫

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

      Try the other video i've done, the concept and the techniques are pretty similar ua-cam.com/video/_gBeB3BM-dc/v-deo.html and let me know if you have any questions.

  • @63nni39
    @63nni39 2 місяці тому

    This video confused me

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

      Thanks for your comment. Please let me know if i can help you with anything that isn't clear for you.