Create an Interactive App Navigation Menu in Figma

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

Get the SOURCE FILES for this project ($1.99): payhip.com/b/RZK5n
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
Mobile App UI Design Playlist: • FREE Figma Mobile UI D...
In this Figma prototyping tutorial, we will be taking a look at creating an interactive, icon based mobile app navigation menu. I will show you how to create an interactive prototype in Figma that will enable you to create a functional navigation (bottom bar menu) through your mobile app prototype.
Topics: Mobile app design, UX design, mobile ux, mobile app navigation, menu bar bottom of the screen, interactive prototype, bottom bar menu
----------
© 2022 Mavi Design

Пікірлер: 49

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

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

  • @conzone
    @conzone11 ай бұрын

    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.

  • @prla5400
    @prla54002 күн бұрын

    Thanks for the tutorial, appreciate it!

  • @vartikaverma6188
    @vartikaverma61889 ай бұрын

    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😄

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

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

  • @rawan9018
    @rawan90183 ай бұрын

    your tutorial was really outstanding and it worked PERFECTLY !

  • @j.trulyrandom
    @j.trulyrandom Жыл бұрын

    Thanks for awesome videos! More icon design please :)

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

    This is amazingly dope! Much appreciated.

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

    Great tutorial, thank you so much!

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

    Perfect tutorial! Thank you!

  • @TamannaTalan
    @TamannaTalan10 күн бұрын

    Great explanation thankyou 😊

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

    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

    Жыл бұрын

    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.

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

    Excellent video! Keep up the good work

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

    Great tutorial!

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

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

  • @mavidesign

    @mavidesign

    Жыл бұрын

    Glad you enjoyed it!

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

    Crazy work.. Good one..

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

    Thank you

  • @teacherwaseemheight9586
    @teacherwaseemheight95866 ай бұрын

    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

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

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

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

    Cheers!

  • @regularhuman4208
    @regularhuman42089 ай бұрын

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

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

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

  • @ajay4813
    @ajay481320 сағат бұрын

    HOW TO CREATE IT WITH DRAG

  • @Mr_Dimension
    @Mr_Dimension10 ай бұрын

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

  • @Noor-Noor23

    @Noor-Noor23

    4 ай бұрын

    me too

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

    bro nice tut but it could be slower :D

  • @mavidesign

    @mavidesign

    Жыл бұрын

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

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

    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

  • @skcreationtamil1
    @skcreationtamil18 ай бұрын

    Thamizhanda ...... ❤

  • @sadiyegin6323
    @sadiyegin63237 ай бұрын

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

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

    Very nice tutorial. Thanks!

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

  • @Muhammad-Zaydan

    @Muhammad-Zaydan

    7 ай бұрын

    have you used auto layout?

  • @gujingc

    @gujingc

    7 ай бұрын

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

  • @ManaAda-gy2cu

    @ManaAda-gy2cu

    6 ай бұрын

    ​@@gujingccan you tell me how?

  • @Sara-jg2gr
    @Sara-jg2gr2 ай бұрын

    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!

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

    Bro is so fast

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

    2:40 F

  • @4rokasafar
    @4rokasafar11 ай бұрын

    Its very hard find easy way

  • @mavidesign

    @mavidesign

    11 ай бұрын

    Sometimes that’s the only way 🤷‍♂️

  • @user-ze9jg6xg9w
    @user-ze9jg6xg9w Жыл бұрын

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

  • @SaLeMI997
    @SaLeMI99724 күн бұрын

    Very fast i didnt understand any thing

  • @dhrubakumaroli-em4ep
    @dhrubakumaroli-em4ep11 ай бұрын

    Wtf you doing ???

  • @kaneki3194
    @kaneki31944 ай бұрын

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

  • @chukkychris8004
    @chukkychris80042 ай бұрын

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

  • @bluedeath4888
    @bluedeath48885 ай бұрын

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

Келесі