Animated Navigation Bar in Figma - Prototyping Tutorial

foreign [Music] 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 gray 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 foreign to ensure that their 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 foreign tastic moving on we'll create two circles we'll place the first circle on top of our rectangle setting Dimensions at 80 by 80 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 lips so its middle aligns perfectly with the top of the rectangle and before we proceed we push our light circles 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 foreign to 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 asymmetrical 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 foreign ly 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 apps 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 foreign 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're 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 foreign 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 hold 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 variants 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 in 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 tape 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 foreign 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 foreign 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 [Music]

Channel: uxpeak

Views: 44,464

Keywords:

Id: rI4A7whqvgo

Length: 11min 45sec (705 seconds)

Published: Tue May 30 2023