From the course: Adobe XD Quick Tips

Navigation bar

- [Howard] Hey, everyone. I'm Howard Pinsky. And in this Adobe XD tip, we're going to take a look at creating a navigation bar that you can use on your mobile apps across multiple screens, and we're going to be using components and states to make that happen. So, starting off on this artboard here, I want to start by creating the container for this navigation bar. I'm going to grab my Rectangle tool, shortcut key R, and drag one out just like this. As a quick side note, if you are designing for a modern-day iPhone, there is a home indicator right around here at the bottom, and you won't want to put any elements behind it, so keep that in mind. In terms of the styling, we're going to keep this very simple. We're going to stick with white, and we're going to change the border to a much lighter gray and then push it on the outside using this button right here. Maybe I'll go ahead and just make this a little bit thicker to give a little bit more breathing room. Now, thinking things through a little bit, I might want five different icons on this navigation bar: a dashboard, achievements, a big plus button in the middle, calendar, and users. And I do already have guides set up on this artboard. But if you don't, over to the left, you can just drag one out just like that. So I have one at 24 pixels from either side that we're going to be using to align up our icons. Now, one thing I like doing because some icons are not the same width is utilizing rectangular hotspots. So if I grab my Rectangle tool one more time, shortcut key R, I can go ahead and drag one out just like this. And if I take a look at the Properties Inspector to the right, 42 pixels is a pretty good number to use. And I'm not too worried about the styling of these rectangles, but just for now so I can see it, I will change the color to a nice gray. Now, in terms of the icons themselves, there are few ways we can start populating our navigation bar. The first is we can create them ourselves. So for this first icon, I'm thinking to create a dashboard, which could be made up of a variety of rectangles. So with the Rectangle tool one more time, I'm going to go ahead and draw one out from the top of this box, right to about the middle, and then pull it back just a touch to give a little bit of room on the side. Maybe to add a touch of style, I'm going to round off the corners ever so slightly. And I'm thinking for this navigation bar, I might want it to be border-based. So I'm going to turn off the Fill, and let's set the border to a nice dark color. And one pixel might be a little bit too thin, so I might actually want to bump this up to about 1.5 just to thicken it up just a touch. Now, for this one, I might want to pull this down just a little bit, and then I'm going to duplicate this. Hold down Alter option, drag this down to the bottom, hold that down, and then basically I want to flip it on the other side. So I'm going to select both of these icons, holding down my Shift key, duplicate this over, and then over within the Properties Inspector, I can flip it vertically. And just like that, we have an icon for our dashboard. And when we have all of our icons in place, I will go ahead and hide this gray box in the background. But in the Layers panel, I want to make sure to select all of these elements that make up this icon, pop it into a group, and call it Dashboard. Wonderful, so with one icon complete, I can zoom out just to see how things are looking. And if I press the Play button at the top, it's looking a little bit large. So what I can do is I can zoom on in here, hop into the group, select these elements that make up the actual icon and just shrink them down a little bit. I'm holding down my Alter option and Shift key. And if I preview one more time, that's looking a little bit better. And to help me with the other icons, I can go ahead and select this background layer and just bring this in as well just like that. All right, so we have one icon complete. I'm going to go ahead and duplicate this layer over to the right. Again, I'm not worried about this gray background just yet, but I do want to use it to help me line up my layers. And for this one, I'm thinking we might want an achievement or badge of some sort. So inside of this group I'm going to go ahead and delete these elements. And the second way to add an icon to Adobe XD is through an icon library. And over in Nucleo, which is a third-party icon manager, I do have some icon sets loaded in, and there's this great-looking badge icon I can simply copy to my clipboard and paste it directly into XD just like that and make it a little bit larger. And now we have icon number two which I'm going to name Badge. Now, in the center of this navigation bar, there will be a plus button, but we will get to that in just a moment. I'm going to duplicate this over to the far right. And the third way to get an icon into XD is to use a plugin. So if I hop down at the bottom-left hand corner of my interface, we have our Plugins panel. And I do have the icons for Design plugin installed. If you don't have plugins yet, hit the plus button at the top. You can go ahead and search or browse through plugins, but this is a great one 'cause it gives you access to open-source icons, and I can type in, let's say, calendar, and there's some really nice calendar icons. The one from Feather is pretty nice. I'm going to drag this in. Definitely want to make it a little bit smaller. Now, you're noticing, as I'm scaling this, because it's a border-based icon, it's definitely making a little bit thicker. So we have to keep that in mind as you're creating these icons and adding them into Adobe XD. And, of course, just like the first icon, I'm going to drop the size to about 1.5. Perfect, so that's the calendar icon which I'm going to name in my Layers panel, and then one more icon over to the right which is going to be for our user profile. So back in my icons, delete that one, and let's go ahead and look up users, and another great icon from Feather. And I will point out sometimes for whatever reason, these icons float away as you're adding them in, but just go ahead and drag it back, or copy and paste it into place. 1.5 for the size, and that looks pretty decent. Back in my Layers panel, I'm going to name this Users. All right, so right in the middle, I mentioned that we wanted a plus button so we can add activity. And in one of the future tips, I'm going to show you how to wire that up to create a fab menu to display additional options. And for this, we're going to keep it fairly simple. I'm going to grab my Ellipse tool, draw one out just like that. We're going to make it a little bit larger than the rest of the icons. And over in my Libraries panel, in my Assets, I do have this great-looking pinkish-red color saved, so I will go ahead and click on that, turn off the border. And I'm thinking in the center of this, we want a plus button. Of course, you can use your Text tool or an icon from a library, or you can just use the Line tool. So I'm going to press the L key, draw one out just like that. I'm going to change the color to white and really thicken up the border quite a bit, and then I'm going to go ahead and also round out the caps right here. So we have our first line in place, I'm going to make sure to center it, and we need one more. So, Command or Control + D to duplicate, and then within the Properties Inspector, you can rotate it 90 degrees, and we now have a plus button. And if you want, you can select both of these options and adjust the size together if necessary. Perfect, and just like with the other icons, I am going to go ahead in my Layers panel, group these together, and call this Add. All right, so we do have all of our icons in place, but, of course, they're all over the place right now. So what we're going to do is we're going to be using our distribution and alignment options to help us out. So I already have my dashboard icon all the way over to the left. I want to move the users icon all the way over to the right. And then I want to select all of the icons that make up this navigation bar. So in my Layers panel, or directly on the canvas, I'm going to select all them with the Shift key. And then at the top right-hand corner, we can start by pressing the Distribute Horizontally button just like that. And then if you need to, you can also distribute and align to the middle. And now things are looking a little bit better. But, of course, we still have that ugly gray background that helped us line up these icons. So I'm going to dive in, I'm just holding down my Command key and clicking into this group, then I can either hide it directly from my Layers panel or press the zero key twice just to drop the opacity down to zero. I'm going to go through all of these, zero, zero and zero, zero. And if I press the Play button at the top, we now have our nice-looking navigation bar. But, of course, one thing you're definitely going to want to do is use this navigation bar across multiple screens and keep them all updated if your style changes. And for that, we're going to utilize components and states. Selecting the entire navigation bar with a simple marquee selection, I'm going to go ahead over in the Properties Inspector, or you can also do this in your Libraries panel, press the Plus button right here to create your main component and your default state. And the main components are indicated with a solid diamond icon at the top left. And once you have your component created, all you need to do is either copy and paste or drag one out directly from your libraries onto any of your other artboards just like that. So in this artboard here, I can paste, and I now have two instances of the main component. And if at any point in the future, you want to edit the styling across all of your navigation bars, you can simply right-click on any of the instances and press Edit Main Component. And the wonderful benefit of this is it pushes the changes to all of your instances. So let's say, for example, you wanted to rearrange some of these icons, first, let me go ahead and turn on Stacking within the Properties Inspector. It automatically defined a horizontal stack, so I can now dive into this navigation bar and shift these icons around if I needed to. And you're going to notice, as I've made those changes, it's updating on all of my other instances. I like how it was before, so I'm going to go ahead and shift this back. Another thing you can do is override specific elements. So if I hop over to this screen here, let's say, for example, that this is the calendar, and I want to make sure that users know what screen they're on. I can dive into this instance, open up this calendar icon, select it, and then change the border of just the calendar icon on this instance, and it will not affect any of the others. And because I only changed the icon of the border, all of the other properties remained linked. So going back to the example earlier, if I did rearrange, even though I overrode some elements on this one over here to the right, it still rearranges because that specific property was not overridden. And that should just about wrap it up for this navigation bar. Again, like I mentioned, in a future tip, I'm going to be covering how to wire up this add button down at the bottom to display additional options. But thanks for watching, everyone, and I'll see you all in another tip.

Contents