Navigation bar design | Smart Animate Figma tutorial | Figma micro interactions
HTML-код
- Опубликовано: 12 июл 2024
- In this great figma tutorial you will learn how to create a beautiful animated mobile bottom navigation bar. We will use the smart animate interaction, components & variants, a bit of auto layout.
Learn how to create this really cool animation and later on of course use it in your designs and use it to your needs.
A link to file with the materials of this tutorial -
drive.google.com/file/d/1d0M4...
If you are not so familiar with Figma's components & Variants, i strongly suggest to catch up with these two tutorials (part 1 / part 2) -
• Figma tutorial: compon...
• Figma tutorial: compon...
Prototyping and interactions -
• Figma tutorial for beg...
Auto layout on a mobile navigation bar -
• Figma Variants & Auto ...
#yarivbe 
Хобби
What an incredible video, very well explained, perfect pace, I learned a lot, thank you!
Thank you so much Simon for this amazing feedback! ✌️ I highly appreciate it (!) and that what keeps this channel running 🔥
I admire you dear Yariv and am thankful for your kindness and for being helpful to us by sharing your knowledge
Thank you so much dear Maryam for this amazing feedback! I really appreciate it! Thank you for you kind words 🙂♥
hello sir,im from indonesia n im ui/ux beginner,glad to see your content its gave me some insight into ui design
Thanks you so much Rahma for this great feedback! I am really glad to know that 😊Happy to know people from all over the world!
Great work. I enjoyed every bit of it.
Yes! I subscribed even without you asking.
@@godwinonwumere3589
Thank you so much for the amazing feedback! I really appreciate it ✌Great to know you liked it and of course great to have you on board! 🙂
great Man! Thanks from India
You are most welcome Shiva and hi to India for Israel 🙂 Thanks a lot for the great feedback! I really appreciate it ⚡
greak work, thank you for helping me
Thanks a lot for the great feedback! I appreciate it a lot 🙂✌️ and happy to know it was helpful 🔥
Thank you Mr 🤙🏻🔥
Your are most welcome Ozan! Thanks a lot for your feedback 🙂 I appreciate it a lot 🔥
Thank you sir, it worked😌
You are most welcome my friend! Happy to know it worked and i really appreciate the great feedback 🙂🔥
You got a Subscriber!
Thanks a lot Sanjay! I appreciate it very much ⚡
Thank you so much
You are most welcome! Thanks a lot for the feedback - i really appreciate it 🙂🔥
Super Very Nice
Thank you so much for the great feedback! happy to know you liked it 🙂⚡
Video I didn't search for but I wanted
Ok, great! Happy you liked it 🙂
Very nice tutorial.. I have a question..
Is it possible to keep the navigation bar "Ease in and out" animation and give the inside content another animation like "Push In"??
Thanks a lot Shady for your feedback! I really appreciate it ⚡🙂
To your question -
You are talking about two different things - "Ease in and out" is easing, "Push" is the animation type.
You can have "Push" with any easing that you want.
The inside content, i guess you refer to the content on the screens? You can definitely do what you described - select as animation type "Push", and make sure you check the checkbox "Smart animate matching layers" - that should do the work 🙂
Thank you very much for this explanation
But I want to make the bar not extend to either side of the page, and therefore I must make the shape that moves sideways not appear from both sides, and I did not understand the second method that I mentioned, which is at minute 11:44.
Can you explain it again in detail?
I want to hide the animated bar and show the icon that will appear at the top. If I activate the clip content, the icon at the top will disappear
Hi Mousa and thanks for the great feedback! I really appreciate it 🔥
You can take the background shape (the one i am moving), put it in its own frame, that can be with its own clip content, and basically thats pretty much it - all the rest, you can do as i explained in the tutorial.
Hope that helps :)
Good video sir, but i have a question. Can you make just the tab bar be animated and the the other screen be just instant? Im having a hard time figuring that out
Hi there :) Thanks a lot for your great feedback! Happy to know it was helpful and i really appreciate it 🙂.
I am not sure i fully understand your question, to be honest -
If you mean to make the animation only on the navigation bar and the other parts of the screen to stay static, meaning that they will not animate, than thats no problem - you to make sure, when working with smart animate, that you dont move them form one screen to the other. More than that, check their names, see that you dont have elements on the screen that are different but they have the same name and they are positioned in different parts on different screens.
I hope that helps.
If i got this wrong, feel free to explain further and point me to the problem :)
@@YarivBE ooh okay thank you so much, sorry that my question is a bit confusing but your answer is exactly what I want to know😁 thanks again
@@regularhuman4208
No worries :) You are most welcome!
Happy to know the answer was helpful 🙂
Feel free to ask anytime.
Hi sir, enjoy watching your tutorial video. But when I tries to open the link of the materials of this tutorial, it can't be download. Don't you mind share the link one more time, or just send me the link of the material sketchbook? Appreciate it!
Hello Chang Su and thanks a lot for your feedback! I appreciate it ✨I checked the link, it seems working ok and even tried to change it now but its practically the same. Please try this one again -
drive.google.com/file/d/1d0M4xak6JVgdlemyfxuv0h5qBCnqJnnk/view?usp=sharing
If it doesnt work - let me know of course and i will send it to you through email - no problem! 🙂