Create an Interactive App Navigation Menu in Figma

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

КОМЕНТАРІ • 57

  • @faresmuroha1838
    @faresmuroha1838 Рік тому +15

    Sir, your tutorial is amazing, but it is an expert level and does not accommodate beginners

  • @xishedits
    @xishedits 20 днів тому

    Thank you for this! I use this for our first project in app design. Very good tutorial for a beginner like me.

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

    your tutorial was really outstanding and it worked PERFECTLY !

  • @conzone
    @conzone Рік тому +17

    Great video but way to hard to follow for a beginner. There are video cuts where things in the interface are getting changed but are never mentioned it just cuts back and something is changed. There are a lot of quick clicks or shortcut keys being used that are hard to follow.
    What would make this great would be going slower and more descriptive of everything that's being done to reinforce to the person learning how to do stuff either via mouse or shortcuts keys but at least so all that detail is in the video because even slowing the video playback down it's still to quick to follow a lot of parts.
    Then for anyone that may already be more experienced they can speed it up.

  • @KrinaThesia
    @KrinaThesia 7 днів тому

    For anyone wondering how to incorporate this into an actual app when you don't want to use smart animate for the entire frame and just the dashboard,
    Prototype the circle to the page it's supposed to open, like the eclipse around home to home page with
    Trigger: After Delay
    Delay: 1ms
    Action: Navigate to
    Destination: The page the button will be opening
    Animation: Instant
    For smoother transition you can change the smart animate of the icon to Ease out at 200-300ms

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

    it was a wonderful video as I made the clickable nav bar but didn't knew how to put that into different screens. thank you so much😄

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

    Wow 😅 I’ve been able to do it perfectly
    Thanks so much
    The tutorial was of great help to me but fast
    Thanks
    I appreciate

  • @Little_krishna06
    @Little_krishna06 23 дні тому +1

    Animation is working but screens are not changing, please help

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

    Thanks for the tutorial, appreciate it!

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

    I love ur work but I have one question, does it take more memory space to run on phone. Thanks

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

    Thanks for the tutorial. I am still trying to find a way to smart animate within the component, but also navigate betwen pages. I saw the pages were animating before you incresed the speed. Hopefully, I can find a solution to this, right now, I'm just using navigation and skipping the animation

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

    It's amazing! I followed your video and came out with my own version, It's clickable and beautiful! Thanks for sharing, and looking forward to seeing more examples on your channel❤ SUBSCRIBED

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

      btw the way, I do need to slow down the speed to 0.75 at some steps if it's complicated. And also the shortcut, I noticed you put it on the left corner of the screen, it's brilliant and worked!!! But still, need to google when it's complicated.

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

    Thank you so much! Great work, clear and to the point. I'll be checking out more of your videos!!

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

    Great explanation thankyou 😊

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

    Hello, I have doubt how you select and dublicate the menu at time 08:22 i this video ?
    Plz reply

  • @j.trulyrandom
    @j.trulyrandom 2 роки тому +2

    Thanks for awesome videos!
    More icon design please :)

  • @ppeel
    @ppeel Рік тому +9

    I am sure this is a grreat tutorial but it is soooo hard to follow because of your speed.

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

    Excellent video! Keep up the good work

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

    Great tutorial, thank you so much!

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

    This is amazingly dope! Much appreciated.

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

    Perfect tutorial! Thank you!

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

    Can we make so that only the tab bar have animation and the rest of the screen change instantly?

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

    I just tried but mine is not showing on the screen when prototyped
    Is it a feature?

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

    I followed it step by step
    I’m using free figma
    Could that be the reason?

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

    Thank you so much this was a great tutorial video! :)

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

    8:20 cans omeone explain how did he copy the item? If you duplicate, it creates another variant, and if you copy, it will turne into a new component! Someone plz explain 😢

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

    Its amazing. Though, can we not use so many screens and do it in a simpler way?

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

      You'd have to create a "master" menu that does all the connections to the prototype, and then paste it onto the screens so the connections are already there but in this case, since there are different types of menu styles, i'm not entirely sure how to do that :( I was hoping he would go over it ;;-;; My guess is that you can't since they're all different menus, but i could be wrong

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

    Great tutorial!

  • @Sara-jg2gr
    @Sara-jg2gr 6 місяців тому

    Hello everyone, i have a problem i don’t know how to solve. I have a desktop frame (i think it is called prototype frame) in which i am putting all the components to create the home page of my website. For every section of the page i have created a frame. However, when i link the elements of my navigation bar to the sections of the page (i drag the arrow to the component and i put “on click” → Navigate to (the section of the page) and after that i put the linked section inside the main frame, nothing works both in the presentation and preview mode. Do you have any suggestion? Is it a Figma’s problem or did i do something wrong?😓😓
    Thanks for those who will answer!

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

    Crazy work.. Good one..

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

    videoyu kesip kesip durduğun için teşekkür ederim bişey anlamadım

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

    Thamizhanda ...... ❤

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

    bro nice tut but it could be slower :D

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

      Thanks for the feedback, yeah I need to work on that!

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

    Thank you

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

    HOW TO CREATE IT WITH DRAG

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

    Mavi, at around 7'20", when you hide the layers for the button name like "items, messages, and profile", the menu size adjusts accordingly automatically, When I try it, the menu stays the same width, causing 2, 3, 4 to stay very apart, how to make the menu change width automatically

    • @Zaydan-Mohammed
      @Zaydan-Mohammed Рік тому

      have you used auto layout?

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

      @@Zaydan-Mohammed it is taken care of. Thank you for following up.

    • @ManaAda-gy2cu
      @ManaAda-gy2cu 11 місяців тому

      ​@@gujingccan you tell me how?

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

    Bro is so fast

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

    Cheers!

  • @4rokasafar
    @4rokasafar Рік тому

    Its very hard find easy way

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

      Sometimes that’s the only way 🤷‍♂️

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

    Very fast i didnt understand any thing

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

    Extremely fast. I got nothing. why..why so fast.. Nice thou! but i couldn't grasp nothing.

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

    2:40 F

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

    Very nice tutorial. Thanks!

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

    Its too fast tf. I wouldn't call it a tutorial

  • @dhrubakumaroli-em4ep
    @dhrubakumaroli-em4ep Рік тому

    Wtf you doing ???

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

    Man you are too fast, you tryna teach us or just show us?

  • @bluedeath4888
    @bluedeath4888 9 місяців тому +5

    You go too quick...can't follow your tutorials!