The Right Way To Build A Navigation Bar In Figma!
Вставка
- Опубліковано 10 лип 2024
- 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.
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
Thank you! simple and straight to the point
Thank you for sharing this video! It was really helpful.
exactly what i was looking for!
Very cool.
Just what I needed, keep them coming!! : )
More to come!
Super helpful, thanks!
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!
Glad it helped :)
Thank you!!! It helped me a lot.
Thank you so much. Really helpful video.
GREAT! Thank you!!!
Soooo helpful! Thank you!!
Brilliant stuff
What a nicely step by step u explained........Great thanx
Thank you!
Really helpful video!, as a friendly advice, y reccomend making the interface bigger for filming your tutorials.
Thank you😍😍
Thanks ❤❤❤
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?
thanks a lot means thanks a lot , life saver
thank you
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.
Yes, I have the same issue
Gracias Gracias Gracias!!
Great video, after creating the navigation bar, Now I want to change icons for profile menu then how can I replace it with other
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!
it's not Helpful
It's Greatest video ever. i found all the internet, but you give me the answer.❣❣
Happy to help
Hi! What iPhone mockup are you using for this tutorial?
nice thx 👌
No problem!
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.
what if I want to smart animate only the tabbar not the screens?? Im having some trouble figuring it out
any way to bypass if the icon gets warped?
gr8 vid bro
I'm glad you like it!
I cannot seen active and inactive bar in Figma? which version of Figma did u used? as right now is totally change.
Thanks
No problem
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?
Thanks for this! What if I want to use bold icons for my active states and not just change the color?
play around with it, try adding outlines of the same colour
@@MrGnorts What exactly to play around? The icons have a fill in the component, but when used the color doesnt change.
Cmd D duplicates the menu item in home, not in nav bar, and I cant drag it into the column
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?
Hey! Check that all the icons have fill or stroke colors. Combining fill with stroke colors can cause that problem.
@@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?
@ProductSensei77 I also have this issue
Te amo ♥
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.
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.
Thx @@gabyaurellia1433
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.
Thank you, i found a video that explains what you meant and its working, thank you so much @@gabyaurellia1433
@@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! ^^
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?
Hi I have the same issue. have you got the solution yet?
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?
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.
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?
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.
Yes, you can apply it from the parent component as well, but I find that to be even more confusing.
could you share the file? please, im leanring figma
Hey I was trying to follow this tutorial but the preferred value section is not appearing for me in Figma can you help?
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.
What happens if you move nav bar component to other page? Do you lose links?
No.That's the beauty of components
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 :(
Make sure to add the prototype animations to the parent component.
I tired following every step but when iam trying to swap the icon its not changing the colours
I have the same problem
Me too
The same here. Could you help us Sensei?
Same problem, Icons dont change color, only the texts.
@@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) :)
A little difficult to follow as a beginner :(
your resoultion is way too high and it is very hard to see for beginners all of the ui stuff from figma itself
Not kind