How to Design and Prototype a Bottom Navigation Bar in Figma | Material Design Components
ฝัง
- เผยแพร่เมื่อ 1 ส.ค. 2024
- 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 - วิทยาศาสตร์และเทคโนโลยี
Very helpful. Thanks ❤️🤘
thank you this helped me alot!
Nicely explained thx
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
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
Thanks
ı couldnt understand after 4:45 about page connections, smth hide but how to create relations? why all pages has the other page names?
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 :)
great video! very helpful. How were you changing the icons simply by typing in text into your text box? Is that a plugin?
It’s a tool is called Font Awesome. I should make a video on it.
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
Hi, I saw your comment, I also stuck on my own figured out that you just click "Shift and Option " for Mac, that in the future how stuck like as
I got completely lost after 3:43. My version would change the whole nav bar when I switched pages. Someone help, please!
I had to play the video very slowly to figure out he'd grouped each row before making them a component set. So annoying.
i didnt understand after 4.50
U could make it faster so nobody can understand. There is some people down below that understands the video. What a shame 🙃
waste of time