7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 15Length: 2.5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.2 Aligning Objects

Moving on, in this lesson you’ll learn about aligning objects. Adobe XD has some very smart guides that will always assist you with alignment when you’re moving elements around, but there are also some on-demand tools that will get the job done with more refinement. Let’s check these out.

3.2 Aligning Objects

Welcome back to the course. In this lesson, you'll learn about aligning objects. Now, XD has some very smart guides that are always there to help you align things when you're moving objects around the canvas. But there are also some on demand tools that can get the job done. So, let's check these out. To demonstrate this, let's grab a rectangle and a circle. Now, let's say that I want to move this rectangle so that it's aligning with the circle. Well, you'll notice that as I start to move it, see right now, We have that cyan line on the top of the rectangle and on the top of the circle telling me that these two elements are now perfectly aligned at the top. If I move it further down, you'll notice the same line that passes through their midpoints now tells me that they're perfectly aligned in the center. And if I move it down, it's gonna be the same story with the bottom part. So these are some smart guides that you can always use to align various objects in XD. Now, this works horizontally like this, but it also works vertically, right? So now these two circles are perfectly aligned vertically like this. And it also works with the left side and the right side. Now if I wanna do this manually, I can select the objects that I want to align and I can use the alignment tools that I have here. For example, if I want to align all of these at the top, I would select this, or in the middle, or at the bottom. Or, if I wanna do it the other way around, I can use these controls, align left, align center, align right. I can also distribute elements evenly, regardless of their alignment. So if I want the exact same distance between these three elements, I can select them and I can choose this option which is called distribute vertically. So now, this layer, or this object sits at 126 pixels from the object above it, and 126 from the object below it. The same thing goes when I want to align them like this horizontally, I can choose this option distribute horizontally. And now it's gonna create equal distance between this and this, And from this to this. Well, almost equal, in some cases, to create an equal distance would mean creating subpixels. And, in this case, XD chooses to create in this example 87 here, and 88 here, it's not a big deal. Now it can also distribute elements evenly when you move them around. For example, I can put this here at 100 pixels. And then when I move this, See, XD automatically displays these pink guides telling me that hey, you have 100 pixels between green and blue as well. Just like you have between blue and a red. That's a quick way of distributing elements and it works vertically too. See, 66 and 66. How easy is that? Now previously, you saw me use a feature that I absolutely love in XD. And that's the ability to display these guides along with measurements. So if you select an object and you hold down the alt key, it's gonna show you the distance between the edges of the object, and the edges of whatever object you're hovering on. So in my case, it's the art board, but I can move my cursor to this circle, okay? And it's gonna tell me that, okay, I have 90 pixel distance between this edge, and this edge. And I have 15 pixel distance that you can see here between the top edge of this and the bottom edge of my selected object. Here is another example here. And let me move these around, So you can see the difference. Pretty cool, right? Now notice that these guys will appear by themselves when these objects are aligned in some way. So if I have my object here, no guides. As soon as I align one of the edges, look, I can see the the guides. Same goes for center, same goes for the right side. This also works brilliantly well when you're moving an object with your keyboard. So remember the keyboard shortcuts I told you about in a previous lesson, the ones about nudging an element. Up and down while holding down shift, Allows me to move an object up and down. And because of these guides, I can see exactly, Where it is and the amount I need to move it to position it where I want. Fantastic feature. And that's how you can align objects. Now, one of the biggest features in XD is assets. In assets, you can save colors, you can save character style, and you can save components. Which you can then reuse later on across your entire project. So, let's learn more about how to work with assets in the next lesson.

Back to the top