Animated Navigation Bar in Figma - Prototyping Tutorial

Transcribed by TurboScribe.ai. Go Unlimited to remove this message.

Hello, and welcome to this prototyping tutorial where we'll show you how to create this
beautiful animated bottom navigation in Figma. Trust me, it's a lot simpler than you might
think. We've also prepared source files for you, which you can download from the link in the
description below this video and use in your own projects.

Ready? Great! Let's dive right in. First, we'll want to take a quick look at our phone frame screen
to get a sense of its width. Perfect! It's coming in at 375 pixels, which is what we want.

Now let's navigate over to our shape tools, specifically the rectangle, to carve out the
foundation of our navigation bar. We'll go ahead and create a rectangle with a width of 375
pixels to match our screen. For the height, let's give it 76 pixels.

This should provide a great balance of space for our icons without overwhelming the design.
Next, we'll opt for a dark grey color for our rectangle. This subtle hue will ensure consistency
and integration with the overall dark aesthetic of the app.

Now let's transition into the next phase of our design, creating a clickable area for our icons or
tabs. To ensure that they're touch friendly, we'll set dimensions at 78 pixels in width and 40
pixels in height. We should be aiming for at least 44 pixels for optimal usability.

But for the purposes of this tutorial, we'll stick with 40. After removing the fill, let's paste our
home icon into our first tab. We'll align it right in the middle and create a duplicate.

We then copy our clock icon and replace the home icon with it, repeating this process for the
rest of our icon. Once done, we can discard the original icons and give appropriate names to
our four new tabs. Alright, let's bring these icons to the front and position them nicely on our
rectangle, ensuring they're centered for symmetry.

Fantastic! Moving on, we'll create two circles. We'll place the first circle on top of our rectangle,
setting dimensions at 80x80 pixels initially, before stretching the width to 110 pixels to create a
more ellipse-like shape. Remember to align it precisely with our first home icon.

That's key here. Let's then adjust the fill to match the app's background color. Next, we'll create
a second circle and align it with the ellipse and the home icon.

We'll slightly lower our ellipse, so its middle aligns perfectly with the top of the rectangle. And
before we proceed, we push our light circle slightly down. Once done, we'll double click on the
ellipse to grab the anchor points.

We're going to grab the left handle and pull it towards the center of our circle. And we're doing
the same thing on the right side too. Now onto the bottom handle.
This next step is important. In the right panel, we'll switch the option from no mirroring to
mirror angle and length. This smart trick ensures that if we adjust one side, the other side will
mirror the change perfectly, maintaining a symmetrical look.

Once we're satisfied with the shape of our hole, we'll drag it a bit lower and do the same with
the circle. We'll fine tune the bottom part just a bit more. The following step involves cutting out
the unnecessary part of our hole.

We'll create a rectangle to cover the top part. Select everything and then we'll use subtract
selection to remove the excess. We'll then realign our white circle and change the fill of our hole
to match the background color.

Finally, let's give our bottom navigation a nice radius for that smooth, rounded look. Amazing!
This looks lovely. Now it's time to add those final touches to our animated bottom navigation.

Here's what we'll do. First, let's change the color of our circle to the lovely green shade from our
app's color selection. We'll bring our icons above the rectangle and align them perfectly in the
middle.

For our first icon home, let's give it a dark color from the app's color palette. Position the icon
precisely within the green circle, ensuring it's right in the middle. Perfect! We've tackled the
most crucial part and it only gets easier from here.

Now, let's select everything and create a frame. This is an important step to ensure that our
design works properly. After that, let's create a new copy and rename our frames accordingly.

Now, we'll position the clock icon in the exact horizontal position as the home icon. Once that's
done, we'll move the icon back to its original position, perfectly aligned with the rest of the
icons. Great! Now, select both the circle and the hole and move them below the clock icon,
making sure they are aligned perfectly with the icon itself.

Next, change the color of the clock icon to dark and the color of the home icon to gray. To make
things easier and faster, it's best to create color styles for the dark and gray colors. This will
come in handy throughout the design process.

Fantastic progress! Now, let's move on to creating the third part. It's a similar process as before.
Place the next icon in the position of the selected icon and then move the clock icon back to its
original state.

Drag the circle and hole below the icon and align them with it. Change the colors using our
freshly created color style. And there's one more step left.

Let's bring the profile icon to the same level as the graph icon and then bring the graph icon
back to its original position. Now, let's apply the color styles we created to all our icons. Perfect!
Now, here's where the magic happens.
We'll turn each tab into a separate component. Select all four navigation tabs and then select
Combine as Variance. This brings everything into one component.

Now, let's define the interactions between these components. Switch to the prototype panel. In
the first tab, click on the clock icon and connect it with the tab below it.

Now, define the interaction in the right sidebar by choosing a trigger and action. In the
animation section, select Smart Animate from the transition field. Apply gentle easing to the
transition and change the duration to 1000 milliseconds.

Connect the third icon with the third tab and the fourth icon with the fourth tab using the same
animation parameters. We'll repeat a similar process for the second tab. Connecting the first
icon with the first tab.

The third icon with the third tab and the fourth icon with the fourth tab. Great! Now, let's
connect the last tab to other tabs. Perfect! We now have everything connected.

Let's go back to the Design panel and change the white fill to match the background color of
our app. Also, make sure to match the color of our hole with the background. Excellent! Now,
let's select this component either from our panel or the assets panel and position it nicely at the
bottom of our app screen.

Alright, let's preview what we've created. If everything works as expected, we should see a
smooth transition in the bottom navigation. Look at that! Our beautiful animated bottom
navigation is now complete.

Feel free to preview it through a mobile frame as well to see how it looks. If you like this video,
subscribe to our channel to get notified when a new video comes out. See you in the next video!

Transcribed by TurboScribe.ai. Go Unlimited to remove this message.