How to Design and Prototype a Bottom Navigation Bar in Figma | Material Design Components

New to Figma? Sign up here:

0:00 - Intro
0:10 - About Bottom Navigation Bars
0:53 - Designing the Nav Bar Items
1:55 - Creating the Nav Bar Item Component Set
2:35 - Designing the Bottom Navigation Bar
3:30 - Creating the Nav Bar Component Set
3:56 - Prototyping a Bottom Nav Bar
5:12 - Final Prototype
5:37 - Wrapping Up

⁙ social media:

#navigationbar #uidesigntutorial #productdesigner

[simeonshaffar]

You cut a bunch right as you were generating your labels, when I create the properties it just groups everything into one variant instead of 4 different variants of 2 properties. I can only change the variants of that one group of all 4 icons, and can't separate them out. What did you do after you created the property? Your cuts removed that invormation

[Titigigico]

I can't add a property to an item within the component. It shows me onlye Parent component, as I select one item. Please help

[FerhatKendi]

ı couldnt understand after 4:45 about page connections, smth hide but how to create relations? why all pages has the other page names?

[sharmaarj]

great video! very helpful. How were you changing the icons simply by typing in text into your text box? Is that a plugin?

[arzhanshaimerdenova]

Hello! Such a great video, thank you! I only had one question. Why is it that when I take a component like you did (2:31) I do not have this option like click on and off the label and active thing

[ashlynnbingham]

I got completely lost after 3:43. My version would change the whole nav bar when I switched pages. Someone help, please!

U could make it faster so nobody can understand. There is some people down below that understands the video. What a shame 🙃