Lessons

Lesson Info

How to Organize Content

Now that we've got some text the next thing we're gonna start to do is we're going to start to work with just organizing things. Talk about layers, talk about grouping, all that type of thing. Alright, so organizing content, what I want to do now, is we've got some things going on here. I want to really focus in this first part about talking about layers. We're going to kind of work with things a little bit, we might a little more content, work that way, but let's see how we go here. On the left you're going to see we have two panels. We have the assets panel and the layers panel, lower left down here. Click on the layers panel icon and you'll see we've got all of the layers listed out there. Now what's weird, or what's interesting about XD is that, in most programs if you look at the layers panel, you'll actually see all the content for the entire document. They might be, like Photoshop will show you the artboard if you use artboards and then the stuff on the artboard. Illustrator wil...

l just kind of show you all of the layers and everything. In here, it's contextual, and actually, I find that to be really helpful. If you look in there with nothing selected, you're actually going to see that you see a listing of all of the artboards. This is great, because it allows us to do a bunch of things. We can rename our artboards, we can reorder the artboards so that kind of have a little bit better way of knowing how they're ordered or listed to make it easier for us later on. You can do all kinds of things. Now, if you look in there you're going to see that right now they're ordered kind of in reverse from the flow. We have a home artboard, we have a log in, and then it kind of goes from there. And that's called our flow. That's how we want people to go throughout the app, or through the app. Now in the artboards panel, it doesn't really matter how they're organized, but I want that to follow the flow just for my own edification. So what you can do is you can take these layers and you can actually drag them around to reorder them. Like I said, it's not doing anything to the layers out there, or the artboards rather, out in the document, it's just for you to kind of organize things the way you want. And this could be a great way that if you have different sections for an app you're working on or maybe you're trying to do a responsive web design and you've got all the desktop versions, the tablet versions, et cetera. You can kind of lump or organize them together to maybe make it easier. However you want to work. So what I'm going to do is just kind of drag these in order, categories, and we can go a little bit faster if we want to do that, but I'm just kind of putting them there. There we go. Now you will also pasteboard over there, okay. Now the pasteboard, if you take content and you put it off of an artboard this pin that we had, and we associate it with the pasteboard it's called, this gray area out here, you're actually going to see the pasteboard object. If you double-click on the pasteboard object in the layers panel, it'll show you all the stuff that's on the pasteboard. That's brilliant. It's awesome. Cause then you can kind of focus on what you're doing and if you see something that's hanging out, et cetera, you can find it and work with it. Now you also notice that we actually have an arrow at the top of the layers panel to go back, from the pasteboard. So you can go and see what's going on, you could see the listing of the artboards again. Now what I want you to do is this, come out to one of the artboards with stuff on it. Okay, I'm going to come to the home artboard, and, I don't know, click on something. Click on, with the select tool selected, the icon, or the logo, or something like that. Once you select something in an artboard go look at the layers panel. You'll see that it's now showing you the content for that layer, or the content for that artboard, I should say. So it's listing all of the different options out there, the different things that we have. What's interesting about XD is that we don't create our boards, we don't do it like Illustrator or other programs. We don't create sublayers, we don't create layers, we don't do things like that. What we do is we actually go in and we just add content, and what the layers panel is doing is it's showing us the layer content on that specific artboard. That way, we can see the order, or the stacking order, how things are arranged and if you look in there, you're going to see that, just like all programs that we work with, typically, you're going to see all the content works from the first object is at the bottom of the stack, and it works its way up like this. So you have this, what's called stacking order. Alright. Now If I want to do things like reorganize this content, hide things, do all that, we can do it pretty easily. If you want to have, like I know that I want to have this logo on top of that Eiffel Tower object, I can drag that logo to the top of the stack, and it's just, like I said, it's not looking any different out there. It might, depending on how things are ordered, but it's putting it to the top of the stack. Now, I want to go out there and do this too. You're going to see that it's actually called logo, which is good. Click on that, or if you have something out there like the Eiffel Tower I've got. If you click on that and look over there, you're going to see that it's actually a group of content called group one. And when you copy paste from Illustrator that content is typically going to become a group, even if it wasn't grouped in Illustrator. Now groups, if you look in the layers panel, actually, I love this, it's gonna show you what this object is. If you look in there, you're going to see there's a folder. The folder icon indicates group. If you click on that folder icon in the layer stack, you're going to see the objects in that group. Now, this is a pretty sad little group, there's only one object in it, but that's fine. Alright, you're also going to see like a T, which you can figure out means text. If you see a pen tool icon, kinda like pointing down like that, that's actually vector. And if you see a little image icon, which we don't see over there yet, but that means it's an image. So you can kind of tell what kind of content you're working with. Now one think I want to mention here is that if you are going to save out production-ready assets, or assets to hand off to a developer or someone else, or whatever you need to do, we can do that in XD. We can save this content out, like that Eiffel Tower or that logo, we could save as, for instance, SVG, a file, and then save it out so we can use it. Now, my point here, with all that rambling, is that you can actually name the content in your layers over there, and whatever the name is, is going to be the name of the asset you export later on. So in XD it pays, or it helps, to name content that you see over there. You're not going to name every single thing. If you've got a little teeny ellipsis or an arrow or icon, you can call it like icon one or something. But in this case, I know that if click on the logo, I want to make sure that that group or that object is called whatever I want the asset to be called later on, logo in this case, okay? So in order to name something, like if I click on the Eiffel Tower, if I double-click on the name in the layer stack, you can just name it. I'll just call this Eiffel icon or something like that, and I probably just butchered Eiffel, but that's fine. I'm just going to call it home icon, how's that for a cop-out? Alright, I'm just going to hit Enter or Return and there we go. Now, when we go to export that later on you're going to see, like I said, you're going to see that that Eiffel Tower, that thing, is going to be named home icon in this case, okay? Alright, now let's talk about grouping and how we can ungroup and work with groups and things like that, because this is actually kind of important in XD. When we create our own content and we want to get in and work with things individually, you kinda need to understand how this all works. It's similar to Illustrator, that type of program. I'm going to press the space bar and move down. And I'm going to select all this content for this pin. If you just have a few things you can select, go ahead and do that, and we're going to group it. So, it's like all programs, Command + G or Control + G, you can right-click and group. There's a lot of ways to get it done. There we go. Now, if you group an object, you're going to see in the layers panel that that grouped object now is a folder icon, and if you click on the folder icon you can see all the stuff in the group. In that group, you actually have a layer stacking order. So you could take this content in here and drag it up and down, and change the ordering in there as well. Now as far as groups are concerned this is probably one of my favorite features in XD. If you want to edit parts of a group, we can ungroup okay, of course, we can do like all programs, we can go in and ungroup. If we want to take this icon and I want to start to work with it a little bit. Let me zoom in a bit. You can either, like most programs, double-click on the group, and enter into the group editing mode. That way, you go in there and you start working with it and you can click on objects and you could start to edit them and do different things. Here's another way to do that. This is one of my favorite things. Click away from the group. Come up to a grouped object, and hold down Command on Mac or Control on Windows. This is going to save you a ton of time. If you press down that key, and you hover over parts of the group, you can see it's going to tell you what you're about to select. Click on one of the objects that has a blue highlight and you select it. Now, it's similar to double-clicking, yes I know. But, what if we had a situation when we had groups nested in groups? Let's try that. Click on the group. And the reason why I'm spending a lot of time on this, is because you're going to be dealing a lot with vector artwork and drawing objects, and icons, and all that. Alright, let's ungroup that object. Right-click, go up to Object on Mac, and choose Ungroup. There we go. Now what I want you to do is we're going to select part of it, a few pieces, and then group those. Then we're going to group the rest together. We're going to create what's called a nested group. It's a group, group within a group, or grouped in a group. Select these objects here. Just drag across, and group them. Right-click and group, or however you want to do it. There's a shortcut. And then select both that group, and the pin itself, the pin part. Right-click and group. There we go. Now this is where this whole Command or Control clicking thing is going to really shine. I have a group in a group. If I want to select that top object up there, if I just do the double-clicking thing I'm going to have to double-click once to get into the main group, to get to that secondary group. Now if you look in the layers panel you're going to see there's a group in a group. To get to that top object I have to double-click again. And there we go, I now dug in. Okay, I'm a couple deep here. Here's how using that Command, or Control, will really help. Click away. Press Command on Mac, Control on Windows, hover over an object within the grouped group, right (laughs), and click. You got it selected. It's much faster. Now here's another little tip for you. If you're in a group and you want to select the group that it's in, I know, I'm getting a little crazy here, but press escape. You press escape, you're actually going to select that subgroup. If you press escape again, you select the whole group. You're working your way out of the grouping stack here. That's actually going to help you save a lot of time as you go on. Alright, what we're going to do with this pin is we're gonna to make it a little bit smaller, we're going to scale it. So grab a corner and you're going to hold down the Shift key to scale it. You're going to notice that because these are not strokes, it should scale pretty well. Corners are scaling as well, there we go. And what I want to do is rotate it and kind of just put it at a 45 degree angle. You could go over to the Property Inspector right now and transform with the rotate over there, you can change it numerically. I'm just going to come off a corner and drag, and as you drag press the Shift key to create a 45. Now this is crazy, but this program actually does it by 15 degrees as you rotate, which is great. So go to about 45, and if you look in the Property Inspector as you size, scale, or do things like that, you'll see a change over there. Release the mouse and then the key, and then just drag it down here. Alright, I'm going to press Command + 0 on Mac, or Control + 0 on Windows, to fit everything in, and save. Now we can group, like I said, and there's a lot of ways we're going to work with that. We can also go in and start to work with other types of content, and other ways to work with your content, like smart guides in aligning content. So what I want to do now is talk a little bit about aligning content. So we've got a few things out here. What I want to do is I want to actually make another object, and then align it to the artboard and kind of work that way. We're going to make a rectangle up here and we're going to copy that icon or logo and put it over here. So go to the rectangle tool, in the toolbar, and just make a rectangle, you're going to see we're going to make it a little bit bigger than the artboard, and just go a little bit bigger. And do it, I dunno, something like that. What's cool about XD is that if you are drawing something, as you're dragging you're going to notice that you don't see the scaling out there on the object, but if you in the Property Inspector, you're actually going to see the scaling changes. You're going to see width, heighth, as well as the XY, but make it, about a height of about 200, something like that. And what I want to do is I want to actually grab that orange-red color that we made and put in that artboard. So come over to the right, you're going to find fill. We have the eyedroppers where we can just sample stuff from, sample coloring, or different things. Click on the eyedropper. Come over to that first artboard and make sure you're in the color you want. Don't go on the actual grid or other objects, and just click to sample it, there we go. And now, I'm going to take that object and just center it in the artboard. Now, we could if we want to go out and just drag it and use smart guides. We've been doing that so far. But what I want you to do is press the select tool or select the select tool, come up top, and you're going to see that in the Property Inspector on the right we have a series of alignment options. These are always there. These are stuck, actually, they're pinned there. And you're going to see that we can use those when they're available. So if something can be aligned, those will show up, you can use them in other words. So what I want to do is just do a center align. If you have objects selected, like a single object, and it's on an artboard. It's going to try to align to the artboard. So I'm going to click on line center horizontally and you'll see that if it's way off it'll just align it for me, that's great. I'm going to do the top align, it'll align to the artboard, and maybe I'll just make it a little bit shorter, that type of thing. Now if we have a series of objects selected we can do the same kind of thing. So what I want to do, is I want to take these buttons here and make sure. We've already aligned them to the artboard, they're in the layout grid, which is yet another way to align. So, you're going to find, you guys, that aligning content is pretty simple and when you can do it, you will see those align icons up there, don't worry about that. Now what I want to do is take that logo, and we're going to copy that over to that other artboard. So just go ahead and copy it, right-click if you want, Command + C on Mac, or Control + C in Windows. Come over to the log in artboard, right-click, Command + V or Control + V, paste it. You're going to see it puts it in the same relative position. Just drag it up, and you're going to see we have the smart guides helping us here to align. And let's make it a little smaller. So what I'm going to do, is I'm actually going to use the Option and Shift keys to scale that a bit. There we go. Release the mouse, and then the key. Now I say Option + Shift, I mean Alt + Shift on Windows. The Option or Alt key is actually allowing you to scale it from the center and the Shift key is keeping the proportions for you. So that's a nice, easy way to do that. Now, in a little bit here, we're going to go in and talk about how you can save that as a symbol. That way you don't have 50 copies of this that you have to keep track of and make it a little bit easier for you to work. Now let's do this, we're going to go out, and we're going to try and align some content using smart guides, okay? So I want to bring in some different content. We're going to bring in some icons. Now if you want to just make a bunch of boxes at the bottom, for icons, you can do that. Keep it simple if you don't have icons available. I'm going to go over, and maybe I'll go to Illustrator, and I'm going to copy them from Illustrator and paste them in here. If you want, you can also, I think I actually placed them in an asset folder, you can use that too. But I'll go over to Illustrator and I'm going to open up another file that has a series of icons. I'm going to grab the footer icons. I have footer icons .ai file I use. I'll zoom in. Not that far. And what I'll do is I'll just copy this content. Drag across, copy it. I'm going to go over to XD, and just go to this, let's say, this artboard right here, and I'm going to paste it in. And you're going to see that if we paste content from Illustrator, like I said before, it's actually going to go out and paste it as a group, okay? Now I'm going to scale these, and what I'm going to do is ungroup them so I can move them around down here. Like I said, if you want to just draw a bunch of boxes right now, just to see this effect, what we're going to do is we're going to use smart guides, and show you gapping and different things like that, which is just awesome. I'll zoom in down there, and I'm gonna to ungroup those. So I'm going to right-click and ungroup them. And they should still be individual groups. There we go. Now if you work in XD, we can, of course, use our layout grid we set out initially, if we had a layout grid on this artboard. Remember, you can select the artboard by the name and then go over and turn on the layout grid that you can align to then. Or we can do something like this. I'm actually going to position these numerically, and let's just do it that way. If I come over here and click, you're going to see that I've got this first icon off the left edge, or close to the left edge of the artboard. You'll notice that we do have an XY, in the Property Inspector on the right. You can change that, it's relative to the artboard, or the edge of the artboard. So if I want this to be 20, for instance, I can set that, the X value, for instance, at 20, that means the left edge of the object will be 20 from the left edge of the artboard itself. And did you notice there, what I just said? I just said 20, I didn't actually say 20 pixels, or 20 microns, or 20 units. I want to point out this, you're going to see in here that there really are no units in XD. That's because XD is technically unitless. And I say that's a great thing, because if you consider that to be 20 pixels, it's 20 pixels, that's great. Everything you put out here is relative to the sizing in the artboards, okay? And I'm going to talk about that a little bit later on. But as we work with these, you'll see that if we want to save out specs, or you want to have a developer create this thing, or you're gonna create this thing. You can give somebody this prototype and save out what are called design specs, and they can actually pick the unit they want to use. So if they're going to copy and paste, I dunno, different measurements, things like that, CSS content or whatever they're going to do, they can say, I want this to be in pixels, so that's what we're going to use in our final product. But like I said, it's unitless right now. Alright, so what I'm going to do is this, I'm actually going to drag this object, and just move it across and say, if you notice that if you drag a series of objects you're going to see that it's actually going to show the gapping information a lot of times. And if we get objects that are the same gap, notice this, it's actually going to show us, oh, that's the same exact distance from one to the next. So you could try visually, to get the gapping the same, something like that. You could also, now this one's not far enough to the right, it's not about 20 pixels from the edge. So what I'm going to do is drag that one over a bit. I would use a layout grid in this case, probably, to make it so we could snap it to the edge there. And then what we can do is just use distribute spacing to align all these. The smart guides are great, they allow us to see distances and different things like that, but if I just select all these objects and come up to the alignment you're going to see we can actually distribute as well. So I'll go to distribute horizontally, and that should do a pretty good job. Visually, we might need to do a few different things if they're different widths, that type of thing, but it should distribute and look pretty good. Alright, so those are some icons. I'm going to save this. We've got a lot of different ways to be able to work, the last thing I kind of want to do here with this, to kind of set it up, and save it as a group so we can use it in the next section is we're going to set up a little box out there. Just so we have kind of a footer area. So if you come to the rectangle tool, just draw a little rectangle down there. Starting off the left edge of the artboard and on the left edge of artboard you'll see a smart guide show up. Click and drag. And just go down to the lower right corner, and you'll see the smart guides kick in, it's aligning it, left edge, excuse me, bottom edge and right edge, there we go. And let's remove the border on that, and let's do like a different color. I'll do a little light gray fill or something like that, just a really light gray that way we can actually see it. There we go, not too bad. Alright. Come to the select tool and what we're going to do is we're going to put it behind the icons. So remember what I said, that in this program we can use dragging over there if we want to in the layers panel, to change the stacking order of objects. We also have the arrange commands, just like other programs. If you're on Mac, you can go to Object and you can actually arrange things using Arrange. If you're on Windows, or if you're on Mac, you can use the right-click on the object, which I actually tend to use a lot, and you can arrange that way. You'll also notice that a lot of the keyboard commands are pretty similar, which is great, between programs, Adobe applications. So I'm going to say send to back and that should do it for us. Now we're going to go ahead and group all that together, that way we keep it all as one and in a little while, in the next section, we're going to go in and create a symbol out of this. So select all that content, drag across, and let's group it. I can right-click and say group, there we go. Go ahead and save it. I'm going to zoom out, I'm going to press Command + 0 on Mac, or Control + 0 on Windows. Now, in the meantime here, we've got a lot of content going already. If you want to, you can go and we're going to add, I want to have, in the final version anyway, I've got some of that Chrome element up top here which is the battery indicator and all that kind of stuff. Go to Get UI Kits, Apple IOS like I just kind of briefly showed you. You can download that, and you could just copy that from the kit. You can open up the kit and open it from there. And that could be a great way to pull something in. And then what I did was I actually, in the final version, if I just go over and I'll open that one up real quick to show you. We open that up. There we go. You're going to see that I pulled in a white one cause on the orange-red it looks a little bit better. It's easier to read, so you can do something like that. Now, one of the last things I want to show you, as far as color is concerned, we've done a lot of different stuff, I know I'm kinda trying to group everything together here, but I want to put a gradient on the artboard, on the home artboard, okay. Just to make it look a little interesting. We use gradients for a lot of different things, a lot of different effects. Click on the name for the home artboard, to select the home artboard. Now, as far as selecting artboards is concerned, I'm selecting the artboard so that I can see the properties for it, in the Property Inspector. If you find yourself wanting to select an artboard, and you have nothing selected, you can also do it from over there in the artboards panel. You can actually just click on the name of an artboard and it selects it out in the document, so you can see which one it is and then you could set properties for it if you really wanted to. We're going to do a nice little gradient out here, just to make it look a little different. So come to the fill, and click on the fill box. And you're going to see that, in later versions of XD we actually have now the ability to do linear and radial gradients. So choose, I'm thinking a linear would probably be better here, but choose linear gradient, and all it's gonna to do is it's gonna put it out there. Now this is the artboard, so it's just sticking it behind everything for us, which is great. If you look at the top of the color picker that shows up, you'll see that we've got a color bar along the top, and you have the two colors in there. There's the start and the end. If you want to, you can add other colors by coming to that color bar and just clicking. So if you click in the middle, for instance, you can add another color. When you select a color in that color bar, these little circles, it actually is hollow, the selected color is hollow. So you can click on a color and try and change it if you really want to do that. Like I can come to the black color over here and maybe make it a little bit lighter, or darker, or however you want to do it. And you'll see that out there, it's going to change it for you, automatically, which is great, so it's doing it visually. Now we can also go out to the artwork if you want and you can grab, you're going to see this little "on art" gradient editor, this bar, you can go and grab these little circles, these are the start colors and the end color. And you can start to move them around, you can change the rotation if you want, you can do that. You can also make it shorter if you want to do that and make it look a little crazy. Okay, that's kind of cool. You can extend it beyond the artboard, which is what I tend to do, that way you get just a little bit of that dark showing up, which is kinda cool. And if you want, you can move these colors back and forth, and adjust them. You can also add colors on that "on art" indicator if you want to. So you can come up to it, and if you hover over it, you'll see there's a little plus, next to your pointer. You can click to add a color there. You'll then go to the color picker, on the right rather, and you'll change the color for that color stop it's called. We've got a lot of different ways to work in here, I'm going to take that middle color, and I want to actually get rid of that one. So if you look at the middle color over here, I'm just going to drag it off to remove it. That's over in the color picker on the right. If you want to remove a color, just drag it away and let go. Now you gotta have two colors in a gradient like this, so it's gonna have the start one, the start color and the end color, and you'll be good. Alright, that looks pretty good. Last thing I want to do is I want to look at my artboard, and then we'll save our file and we'll look at it without the grid on it, cause sometimes you wanna do that. You're going to see that the grid kinda covers up part of the artboard, right? So if you click on the artboard name to select the artboard, or click in the Layers panel, you could do it there too. If you go over to the right, you'll see we have the layout grid selected, it's turned on. If you want to turn it off you can just deselect. You can do that. Now a shortcut for you, if you want, you can actually press Command + Shift on Mac, or Control + Shift on Windows, and then quote or apostrophe, whichever you want to look at. And that allows you to toggle on and off a grid, for an artboard, it's kind of neat. Alright, go ahead and toggle it off, we don't really need it on right now, cause we have most of the content out there. We're not doing too bad, so, go ahead and save your file. And that's pretty much it for this section.