The Right Way To Build A Navigation Bar In Figma!

In this video I will be using variants and properties to create a fully responsive navigation bar for a mobile app. The recent update to the Figma components makes this much easier.

[@sarajimenez5579]

Thanks very much. After seeing few videos and try to design with no success, I finally have my interactive navigation bar, you are a star!

[@ProductSensei77]

Glad it helped :)

[@samian_ginato]

great video !! You saved my day. I have a test due this Friday and thanks to this video, I feel that the project is going to be the best of my year. danke

[@rizkallahsalloum]

Thank you! simple and straight to the point

[@israelnanevie1]

Just what I needed, keep them coming!! : )

[@ProductSensei77]

More to come!

[@belovedsoniathewriter]

Thank you for sharing this video! It was really helpful.

[@Suraj-su5up]

exactly what i was looking for!
Very cool.

[@suniljadhav1889]

What a nicely step by step u explained........Great thanx

[@wisdomezeogu6650]

Thank you so much. Really helpful video.

[@leticiamgr]

Thank you!!! It helped me a lot.

[@sesenberhane3295]

Soooo helpful! Thank you!!

[@cmanzati]

Really helpful video!, as a friendly advice, y reccomend making the interface bigger for filming your tutorials.

[@paigethompson2730]

Super helpful, thanks!

[@mariannaus]

GREAT! Thank you!!!

[@OLOGY009]

Brilliant stuff

[@pa3005]

Thank you!

[@juanpiss]

Hi! What iPhone mockup are you using for this tutorial?

[@Winterhe4rt]

What kind of icons were u using here? Cause it seems that many people have the problem that the colors for the icons are not switching correctly. Using the active toggle only switches the text color. The icons stay in its original color state.

[@happyfeva9423]

Yes, I have the same issue

[@annevaleriee]

Thank you so much, this was a really helpful video but would be nice if you slowed down a little more for beginners! Other than that, amazing video!

[@mintcat6102]

what if I want to smart animate only the tabbar not the screens?? Im having some trouble figuring it out

[@jaysr4353]

it's not Helpful
It's Greatest video ever. i found all the internet, but you give me the answer.❣❣

[@ProductSensei77]

Happy to help

[@dharanidharank3030]

Thanks ❤❤❤

[@vishakhasureja7439]

I cannot seen active and inactive bar in Figma? which version of Figma did u used? as right now is totally change.

[@sunnykothari09]

Unable to keep the bar fixed on scroll. After selecting fixed in proto it disappears but it can be seen in the draft. any hack?

[@DoremarPlay]

This method changes the proportion of the icons, and i dont know how to correct it since it dont let me do it because is a component. I cant just modify the size of the icons.

[@subashc1843]

thank you

[@AndresBp]

Gracias Gracias Gracias!!

[@vaishnavib.v4273]

thanks a lot means thanks a lot , life saver

[@rojanxaviergolez4462]

any way to bypass if the icon gets warped?

[@mattm7426]

Cmd D duplicates the menu item in home, not in nav bar, and I cant drag it into the column

[@khailinglai6725]

Hello there, thanks for this great video! I have a problem. When I navigated to different pages only the text colour changed/ updated but not the icons. Could you think of anything might go wrong?

[@ProductSensei77]

Hey! Check that all the icons have fill or stroke colors. Combining fill with stroke colors can cause that problem.

[@Winterhe4rt]

@@ProductSensei77 I have the same issue. The icons of the original component definetly have a fill color, I did as in the video, But the same error occurs. Any ideas?

[@happyfeva9423]

@ProductSensei77 I also have this issue

[@princesschisom]

Thanks for this! What if I want to use bold icons for my active states and not just change the color?

[@MrGnorts]

play around with it, try adding outlines of the same colour

[@Winterhe4rt]

@@MrGnorts What exactly to play around? The icons have a fill in the component, but when used the color doesnt change.

[@rkb5336]

Thanks

[@ProductSensei77]

No problem

[@ParallaxC137]

nice thx 👌

[@ProductSensei77]

No problem!

[@MrGnorts]

gr8 vid bro

[@ProductSensei77]

I'm glad you like it!

[@TheSmilione]

Hello, thank you for this video. I have a problem, however :( I don't see the "Icon" property for the nav_item instance, i only see the Text property. Is this because i have a free version of Figma?

[@TheSmilione]

I think i found the solution to the problem: navigate to each member of the nav_item component and set 'Apply instance swap property', respectively 'Apply text property'. I find this really twisted and i don't understand why this extra-step is needed, maybe someone can share the reasoning behind this.

[@ProductSensei77]

Yes, you can apply it from the parent component as well, but I find that to be even more confusing.

[@marvinromerox]

I followed this tutorial and had no problems until I got to the creation of the navigation bar. When I duplicate my icon and attempt to change the icon, it changes it with the original color of the component instead of the inactive color. It says that it is not active, but it doesn't have the inactive color, it has the original color. So when I turn the active switch on/off, the icon doesn't change color, only the text does. Any ideas?

[@marvinromerox]

Nevermind, I found the issue. I was using icons from another library that I published to my project. I never detached the instances and therefore was not using pure icons. Also, to be safe, I outlined the stroke for all icons to avoid any stroke/fill inconsistencies and made them all identical. I used the same icons, ,just detached the instances before doing anything.

[@panda_Katie]

Hello, I have one question. If I change the color of the main active item, only the text color changes in my instance, while the icon color remains the same. What did I do wrong?

[@avinashprasad72]

Hi I have the same issue. have you got the solution yet?

[@ronitbanerjee2727]

Hey I was trying to follow this tutorial but the preferred value section is not appearing for me in Figma can you help?

[@ProductSensei77]

Good point. That feature is still in beta. To enable it, you need to toggle the option "Try new authoring features" in your component configuration.

[@donnasawkins7272]

This is very helpful, i have a question though, when i change my nav bar items to the active state only the text changes colour and not the icon. The icons only have a fill.

[@gabyaurellia1433]

I found it! All the icon names (not the icon components) have to be the same, so the system can recognize it when you change the icon instances.
1:57 here, he names all the icon 'vector' before naming the icon components.

[@sietto]

Thx @@gabyaurellia1433

[@donnasawkins7272]

Thank you, @gabyaurellia1433, although i checked now my icons are named in the same format as the video instructs, and im still experiencing this issue.

[@donnasawkins7272]

Thank you, i found a video that explains what you meant and its working, thank you so much @@gabyaurellia1433

[@maariaidk]

@@donnasawkins7272 Hey, I had the same problem. I managed to fix it changing the icons plugin. I used Material Design Icons plugin, filled icons. Hope it helps you too! ^^

[@adied7725]

could you share the file? please, im leanring figma

[@maurofernandezmusica]

Te amo ♥

[@lamiralio]

What happens if you move nav bar component to other page? Do you lose links?

[@ProductSensei77]

No.That's the beauty of components

[@kicks-3]

I tired following every step but when iam trying to swap the icon its not changing the colours

[@roxanasuici]

I have the same problem

[@dinovocadoo]

Me too

[@victortorres2]

The same here. Could you help us Sensei?

[@Winterhe4rt]

Same problem, Icons dont change color, only the texts.

[@maariaidk]

@@Winterhe4rt Hey, I had the same problem. I managed to fix it changing the icons plugin. I used Material Design Icons plugin, filled icons. It worked for me. Give it a try! (if you didn't fix it already) :)

[@atikahhilmi4437]

Hi , i followed all steps and it turns out great. But why is my prototype not responsive. When i tap to other icons it doesnt work. Please help :(

[@ProductSensei77]

Make sure to add the prototype animations to the parent component.

[@lorenoliveira2210]

A little difficult to follow as a beginner :(

[@andrewstrasser]

your resoultion is way too high and it is very hard to see for beginners all of the ui stuff from figma itself

[@american_jinseng]

Not kind