Navigation bar design | Smart Animate Figma tutorial | Figma micro interactions

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 –
https://drive.google.com/file/d/1d0M4xak6JVgdlemyfxuv0h5qBCnqJnnk/view?usp=sharing

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) –
https://www.youtube.com/watch?v=f_sqdkfHShQ
https://www.youtube.com/watch?v=3W6B9FsG0pE

Prototyping and interactions –
https://www.youtube.com/watch?v=KD-EsBfWJmY

Auto layout on a mobile navigation bar –
https://www.youtube.com/watch?v=i7mLNpkX6qE

#yarivbe

Duration: 00:25:52

source

Adobe XD Tutorials Adobe XD Video Tutorials