Creating Simple Tab Bar Animation with Figma (Figma file available)
Learn how to quickly create simple tab bar animation with Figma Smart Animate for your prototype 😀
Getting Started
Figma already released its smart animate feature, its similar concept like auto animate on Adobe XD or Principle. The concept is when you have element that have same name (or group) between 2 frame but have different properties, the app will auto animate its element.
What will we created
Let’s begin
I already created some UI assets for this tutorial, so we can focus to Figma Smart Animation. You can copy Figma file in this Drive
1. Duplicate the artboard
Duplicate your artboard can make auto animate easier, to duplicate artboard you can drag the frame while pressing alt, or simply press cmd + D on Mac
2. Move the slider tab
Thanks to duplicated frame, the slider tab in two frames already have same name, now we just move the slider tab from “Recommend” to “Nearby”
Tips: To make “Nearby” tab like active tab i increased to opacity to 100% by pressing 0, and decrease opacity to 30% by pressing 3 on “Recommend” tab.
3. Start Prototyping
Click on Prototype, to change your view to prototype mode. In Screen 1, Click on “Nearby” tab, drag the prototype arrow to designated frame (Screen 2), Figma will automatically set the interaction to On Click, and set the animation to smart animate, i think Figma can detect if our elements are enable to smart animated. Very smart move Figma! 👏 👏 👏. In Screen 2, click on “Nearby” tab, drag the prototype arrow to Screen 1. It’ll make when we press “Recommend” it’ll back to screen 1.
Let’s preview our prototype by press play icon on upper right.
4. Detail
We’ll make some detail on screen 2. I’ve already prepared some image, and background color for card elements.
Tips, you can copy the image on outside artboard with Copy as PNG or pressing Command + Option + C on Mac. Then, click on image layer on Screen 2, Paste or Command + V.
To change the card background color, select on layer (rectangle 7), press I to change to color picker mode, pick color from outside board.
Let’s preview again by press play icon on upper right.
With the same step you can try create tab animation from “Recommend” Tab to “Popular” Tab, and vice versa.
