Create an Interactive App Navigation Menu in Figma

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

[vartikaverma]

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😄

[conzone]

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.

[eushi_art]

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

[rawan]

your tutorial was really outstanding and it worked PERFECTLY !

[boteagao]

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

[j.trulyrandom]

Thanks for awesome videos!

More icon design please :)

[theurikarichu]

This is amazingly dope! Much appreciated.

[teacherwaseemheight]

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

[bettercallyass]

Excellent video! Keep up the good work

[prla]

Thanks for the tutorial, appreciate it!

[faresmuroha]

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

[elyastadesse]

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

[josephjeong]

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

[regularhuman]

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

[riddhiwala]

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

[Mr_Dimension]

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

[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

[ppeel]

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

[Sara-jggr]

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!

[tomashruska]

bro nice tut but it could be slower :D