Menu Animation in Figma

Key Takeaways

hey everyone today we're going to be creating this animated tab bar in figma and I find that a lot of tutorials don't really focus so much on doing this using components and best practices so that's what we're going to focus on today so that you can not only create a tab bar that looks really cool and professional but you can also use it throughout your project without having to do any extra work there's also a link in the description to clone the starter project so that you can design along with me if you want okay so this is what it will look like when you open up the starter file we have the icons that we'll need here they're in a component set that I've called icons and then I've individually named each variant home search bookmark and user if you're new to components a component in figma is basically a reusable design element so they are really important for things that you're going to use several times throughout your project so that if you need to make it a change to it you make that change on the component level versus on the instance level and this just saves a lot of time and keeps your project really organized so for this example specifically the reason that we might make these icons into components is so that we can use them throughout our project and to go even further we want to make this a component set because each of these is actually interchangeable with another so these are all variants of the same component the component is an icon and each variant of the component is a different type of Icon a home icon a search icon a bookmark icon and a user icon so this way if I'm using one of these icons in my project and I decide that this should actually be a different icon I can switch it over here in the properties panel at any time because it's part of the same comp component set and then we have these four frames here for our actual tab bar and we have four because we need one for each state of this component and each state is going to be the selected state of one of these icons so before we go any further let's make this into a component set as well and how we do that is just by selecting all of these frames we're going to go up to this diamond icon here and do create component set then we'll name it Tabb bar and then each of these variables we will name accordingly so we'll call the property State and then this first state will be called home then search saved and profile okay now let's actually create all these different states so if we look at what we want in the end product we want to make sure that these icons line up no matter what state we're in so that they're not bouncing all around and in order to do that I'm actually going to create five icon slots if you will on each of these and that's one more slot than we have icons and that might be a little confusing at first but you'll see what I mean so just pasting an instance of each of these icons on here and I'm going to duplicate one of them and then we'll want to make sure that they are distributed evenly so before we do that let's give 32 pixels of space on each side then we can select all of the icons come up here to distribute horizontal spacing so now we have these five slots and before we kind of lose our perfect spacing here I'm just going to copy and paste those five icons onto every single instance and then we'll go in and make room for our text labels so we can delete this one here we can change this one to search and delete this one and so on okay so you see now how we have only four icons on each of these states but we also have space for the text label so now we'll go ahead and add that in I'm just hitting t on my keyboard for text we'll do home I really been liking DM Sands lately and I think we want to make this little bigger and I'll make it medium because I think that goes best with the weight of these icons then I'm just going to position it kind of how I want it okay then I'll just paste this onto each one and that's looking good now we just need to add the Highlight kind of pill color so that we actually know which one is being selected so I'm just going to hit f for frame create a little frame over here round around the corners all the way let's see how we want to position it I think we want to do 12 pixels of space on the top and bottom as well as on the side I'm just hitting left bracket to bring it to the back and then of course we need to invert the colors here so that you can actually see it okay great now let's just name this highlight and copy it onto the rest of the screens and we want to make sure that this layer is named the same on all of our States because that will actually allow smart animate to do what it needs to do in The Next Step okay perfect now we have all of our states by the way if you're enjoying this tutorial we also have a whole comprehensive figma course for web designers so if you want to check that out feel free to look in the description box and you can learn more about that and now let's animate this so I'm just going to switch into prototype mode and the first step is just to link up each of these icons with the correct state so we're going to just click the plus here and drag this Arrow over to search and here's where we can customize how we want this animation to look so we don't want instant we want smart animate and I found for this that gentle works really well but at 300 milliseconds okay and then we're just going to do the same for the rest of these and it should remember the settings that we chose so that makes it really fast now let's see how it looks I'm just going to grab an iPhone frame here and we're going to drag over a copy of this component and go into preview mode and let's see that looks awesome perfect that is exactly what we were going for and it really isn't that hard once to get everything kind of set up within your component and the beauty of this is since we animated this on the component level then anytime you drag out one of these instances into your project you won't have to reanimate this tab bar it will always behave this way on every single instance and there you have it if you want to learn more about designing with figma using best practices with things like components Auto layout and other more Advanced Techniques then definitely check out my latest course with flux Academy the details will be linked below thanks so much for watching and we'll see you in the next one bye