The Right Way To Build A Navigation Bar In Figma!

Рет қаралды 54,525

Күн бұрын

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.

Пікірлер: 80

@samian_ginato 3 ай бұрын

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

@sarajimenez5579 9 ай бұрын

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 9 ай бұрын

Glad it helped :)

@rizkallahsalloum 6 ай бұрын

Thank you! simple and straight to the point

@belovedsoniathewriter 6 ай бұрын

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

@israelnanevie1 Жыл бұрын

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

@ProductSensei77 Жыл бұрын

More to come!

@suniljadhav1889 3 ай бұрын

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

@Suraj-su5up 4 ай бұрын

exactly what i was looking for! Very cool.

@wisdomezeogu6650 3 ай бұрын

Thank you so much. Really helpful video.

@leticiamgr 3 ай бұрын

Thank you!!! It helped me a lot.

@cmanzati 4 ай бұрын

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

@paigethompson2730 7 ай бұрын

Super helpful, thanks!

@sesenberhane3295 Ай бұрын

Soooo helpful! Thank you!!

@OLOGY009 8 ай бұрын

Brilliant stuff

@annevaleriee 5 ай бұрын

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!

@mariannaus Жыл бұрын

GREAT! Thank you!!!

@KayleighBerry-vb6lx 2 күн бұрын

This was great thank you! Quick question though, when I did it I when I toggled the value to active for the different screens, only the font changed colour and not the icon. Do you know what step I might have missed?

@pa3005 3 ай бұрын

Thank you!

@juanpiss 5 ай бұрын

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

@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

@Winterhe4rt 7 ай бұрын

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 2 ай бұрын

Yes, I have the same issue

@vishakhasureja7439 2 ай бұрын

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

@DoremarPlay 3 ай бұрын

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.

@vaishnavib.v4273 2 ай бұрын

thanks a lot means thanks a lot , life saver

@mintcat81 4 ай бұрын

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

@dharanidharank3030 4 ай бұрын

Thanks ❤❤❤

@MrGnorts 11 ай бұрын

gr8 vid bro

@ProductSensei77 10 ай бұрын

I'm glad you like it!

@subashc1843 5 ай бұрын

thank you

@sunnykothari09 8 ай бұрын

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?

@khailinglai6725 10 ай бұрын

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 10 ай бұрын

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

@Winterhe4rt 7 ай бұрын

@@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 2 ай бұрын

@ProductSensei77 I also have this issue

@AndresBp 8 ай бұрын

Gracias Gracias Gracias!!

@princesschisom Жыл бұрын

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

@MrGnorts 10 ай бұрын

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

@Winterhe4rt 7 ай бұрын

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

@rojanxaviergolez4462 2 ай бұрын

any way to bypass if the icon gets warped?

@ParallaxC137 Жыл бұрын

nice thx 👌

@ProductSensei77 Жыл бұрын

No problem!

@TheSmilione 11 ай бұрын

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 11 ай бұрын

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 11 ай бұрын

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

@panda_Katie 26 күн бұрын

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 20 күн бұрын

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

@donnasawkins7272 4 ай бұрын

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 4 ай бұрын

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 4 ай бұрын

Thx @@gabyaurellia1433

@donnasawkins7272 4 ай бұрын

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 4 ай бұрын

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

@maariaidk 4 ай бұрын

@@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! ^^

@marvinromerox 5 ай бұрын

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 5 ай бұрын

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.

@rkb5336 Жыл бұрын

Thanks

@ProductSensei77 Жыл бұрын

No problem

@indian_socretes Жыл бұрын

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.

@mattm7426 16 күн бұрын

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

@adied7725 11 ай бұрын

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 11 ай бұрын

I have the same problem

@dinovocadoo 11 ай бұрын

Me too

@victortorres2 10 ай бұрын

The same here. Could you help us Sensei?

@Winterhe4rt 7 ай бұрын

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

@maariaidk 4 ай бұрын

@@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) :)