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

In this video, I walk through how to design and prototype a bottom navigation bar component in Figma. This is a component used in Google's Material Design system, which you can learn more about here: m2.material.io/components/bot...
Figma file: www.figma.com/community/file/...
New to Figma? Sign up here:
psxid.figma.com/xogqvqq7ah54
Music for this video is "Half Pace" by Cordio. You can learn more about their music here: / @cortesarts
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:
Twitter : / soren_iverson
Dribbble: dribbble.com/soreniverson
Gumroad: soreniverson.gumroad.com/
Website : soreniverson.com/
#navigationbar #uidesigntutorial #productdesigner

[@user-mc8su8oz8e]

Very helpful. Thanks ❤️🤘

[@n4homgirma]

thank you this helped me alot!

[@ibrahimadlani6959]

Nicely explained thx

[@simeonshaffar982]

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

[@arzhanshaimerdenova1461]

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

[@FerhatKendi]

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

[@manashishah]

he did that to show the text transition when we click on each page, pay attention to the text on each page when he plays the prototype. Hope this helps :)

[@MichaZawadzki-vi7fu]

Thanks

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

[@sharmaarj]

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

[@soren_iverson]

It’s a tool is called Font Awesome. I should make a video on it.

[@ashlynnbingham8058]

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

[@ashlynnbingham8058]

I had to play the video very slowly to figure out he'd grouped each row before making them a component set. So annoying.

[@learningux2934]

i didnt understand after 4.50

[@kinfinityxx]

waste of time