Ready to level up your UI design skills? In this beginner-friendly class, you'll learn how to design and animate a mobile app bottom navigation bar in Figma — from scratch to an interactive prototype!

Whether you're just starting out in UI/UX design or want to explore Figma animation techniques, this class offers a clear, step-by-step walkthrough of creating smooth and creative bottom nav bar animations using Figma’s prototyping tools.

In this class, you’ll learn:

How to design a clean, user-friendly bottom navigation bar
Basics of UI layout and icon alignment for nav bars
How to create micro-interactions in Figma
Animating tab transitions and highlighting active states
Prototyping your final animated bottom nav bar for mobile

By the end of the class, you’ll have a polished interactive bottom navigation component — ready to showcase in your design portfolio or use in your next mobile UI project.

Perfect for:

UI/UX design beginners
Aspiring app designers
Figma users exploring motion design
Anyone curious about interactive prototyping

Tools You’ll Need:

A Figma account

Resources you might find helpful

Master UI Basics in Figma for beginners - Early Bird Basic Level Class to master and understand the basics, navigation tools and panels of Figma.

Want more classes on these - Figma bottom navigation tutorial, bottom nav bar animation in Figma, Figma prototyping for beginners, UI design Figma class, how to animate navigation bar in Figma, Figma micro-interactions, interactive UI design with Figma, motion design in Figma, Figma for mobile app UI.

Let me know in discussions, also if you enjoy the class or find it helpful ,share your reviews with us.

Sharath Menon

--

4