Responsive Navigation bar in Figma - How to Design auto layout navbar

Поділитися
Вставка
  • Опубліковано 28 лип 2024
  • Responsive Navigation bar in Figma - How to Design auto layout navbar
    In this video, you will learn how to design a responsive navigation bar in Figma using Auto Layout. Some also call it a menu bar so let's see how we can design and create a responsive navbar in Figma.
    #uxdesign #learnuxid #ui/ux
    -------------------------------------------------------------------------------
    I teach UI UX Design to more than 100K+ students from 186 countries. Learn and improve
    your career as UX/UI Designer and upgrade it.
    Watch FREE - 5h Video Course - Visual Design for UI Designers & Developers
    ► learnuxid.com
    17+ Pro UI UX Design Course bundle for $99 (Biannual)
    ► learnuxid.com
    Kit Camera, Microphone used in the making of this Video
    ►kit.co/ahsanpervaiz/youtube-d...
    Book me as your Mentor (only 2 slots)
    ► mentorcruise.com/mentor/muham...
    Follow me here, Thanks
    --------------------------------------
    learnuxid.com (website)
    / learnuxuidesign
    ----------------------------------------------------
    / mahsanidrisi
    / mahsanidrisi
    / muhammad-ahsan-pervaiz...
    dribbble.com/ahsanidrisi
    www.behance.net/ahsanidrisi

КОМЕНТАРІ • 46

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

    You made this so easy to understand, many thanks!!!

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

    You LEGEND! This is exactly what I needed to know 🤩

  • @038_prasunkrmondal3
    @038_prasunkrmondal3 Рік тому +1

    To the point and covering all need! hats off sir

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

    Thanks a lot for the insight. Very helpful
    💯

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

      Make sure you watch this whole playlist

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

    Great tutorial, thanks!

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

    Loved It. Super easy to understand

  • @jean-lais
    @jean-lais Рік тому

    Easy to understand. Thank you

  • @sajinofficial-bi7jv
    @sajinofficial-bi7jv Рік тому

    simple and clear cut 💝

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

    Thank you a lot bro. I cannot realize this, after your simple understandable way, i get it. Thanks a lot

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

      I love to simplify things, do watch other videos on my channel

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

    thanks you i succesfuly done it

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

      Great, do watch my latest Figma new updated Auto Layout Videos too

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

    Thank you so much❤❤❤

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

    Thank you so much

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

    Thankyou so much for sharing :)

  • @oluwatobiojo-of8uh
    @oluwatobiojo-of8uh Місяць тому

    Thank you! This was so easy to follow

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

    Hey :) So to sum up ux/ui position.. you need material design and human interface guidelines along with screens from websites for UI patterns and competition to create wireframe and then final product. I have watched UX/UI courses on all major platforms, have experience with graphic design, read UX books, viewed thousands of instagram posts and read articles on medium. Bottom line you need design systems and UI patterns and as you said in one video : copying others to learn. Do you agree?
    I am talking from junior perspective. A/B testing, surveys, interviews and all other things make sense if you know what is accordion, ghost button, FAB, top bar, bottom bar etc. Unfortunately courses UX/UI courses are all copy and paste from each other and they didn't emphasize the most important things!

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

      Tools, Process and skills. These are 3 major areas to work on. UX fall under process, similarly design systems fall under process too. Figma, Adobe Xd are tools, typography, colour scheme and design direction are skills

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

    hi how are you I am trying to build a food app for ordering sandwiches I'm trying to get the navbar to stay on screen during changes how do I go about doing that thank you

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

      Try to watch my other tutorials that are on my channel about auto layout and card design to understand more about autolayouts

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

    Please make a video on using constraints. Thanks for this one bro...

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

    Im not getting that option in auto layout and resizing options in my figma don't know why. I use the web version

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

      Please watch my latest Figma Figma about new Figma Auto layout features. Also Tonight one new video is coming. Subscribe to stay updated with latest in Figma and UI UX Design, Thanks

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

    Could you please help me. A have tried to add small red dot like you (at the top of Message category), but with press space bar on Mac it doesn't work. Thanks in advance.

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

      Now it has changed. There is an absolute position button in top position panel properties

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

      @@learnuxid hmmm .... I just can't fix that. :/

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

      Ok. It works. :)

  • @ReshikaBhaskar-rf8gq
    @ReshikaBhaskar-rf8gq Місяць тому +1

    when text in the left are dragged , message text with dot should also responsive right, but only text gets dragged, dot remain at the same place? please clear this doubt

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

      Dot is absolutely positioned that's why it stays in the same place and everything moves. I will make a new video on this same topic

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

    budddon buddon buddddon

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

    You didn’t clear up constraints

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

    You made this so easy to understand, many thanks!!!