In XD, you can enable grids on any artboard to help you design with alignment in mind. Mobile designers can activate a square grid at any size, from 1px to the number they want. Website designers can enable a layout grid with columns to follow development frameworks, such as Bootstrap with 12 columns.
- [Instructor] Grids are very powerful when you design websites or apps. So let's create two artboards here to see how that works in XD. So I'll use the artboard tool as we saw before, and I will create an iPhone 10 template, and I'll move it here, and I will also create, a web template here. Cool. Now that I have these two artboards there, let's see how we can play with grids.
So for mobile design, one thing that really helps, is activating a square grid. So with the artboard selected, you can go to the property inspector and under grid, you can activate a square grid. In this case, the default number is eight. iOS does a lot of that, so this can really help you with iOS projects, and then any time you design here, your designs will snap to the grid. If you really want to get to precision, like let's say one pixel grids, you just change that to one.
And then you can see that it has one pixel here, as you zoom in. The number that I like a lot is 64, I use that for a lot of my projects. And I start from there. If you're doing website design, a lot of templates and frameworks, they use columns for development. So instead of using a square grid in this case, you can activate a layer grid. And by default the one that starts is 12 columns, so this give you 12 columns.
And one framework that uses that is the bootstrap framework and here you can add more columns, let's say 14. Or, 20, you can enter the number of columns you want there. I'll stay with 12, and again, any time you design here, you get your designs snapped into that grid. So you can move things around, and design on top of it, and that will help you a lot. A couple of tricks here, so you can select the artboard, and you can change the color if you want, you can change the transparency, and an interesting fact if you remove the color here, it will give you almost like guides.
So you only see the stroke of that grid right here. You can also change the gutter, the spacing in between columns, you can change the column width, to make it wider, or narrower, and here you can also change the margins around your grid in this case I'd say I want to increase this to 150, or in this case I can have different margins, let's say this is going to be a slide for my presentation I can then start adding, margins to the top, and margins to the bottom, and as you can see here the property inspector shows you where you're changing in the grid.
So this is very very useful, and then if you want to save this as your default grid, you can make that default, so next time, if you use default you will bring your latest default selection. And again, this is very very powerful, when you design and play with grids here in XD, so for the final file that we have, you can see that if I activate, let's say, a layout grid here, or square grid, I can design on top of that, and this is really really useful when we have for example, website design, layout grids on top of that, so all of my cards are aligned with that grid, and you can see that I can create hierarchy, I can do a lot of things to not only, simplify and have this more well balanced design, for the eye, but also when I share this, and the developer goes to check the design spec, they'll be able to see the grid as well, and know where each object or group or set of elements are there in your grid.
So this is how you play with layout grids, and square grids in XD.
- Understanding all tools in Design mode
- Bringing files for Photoshop, Illustrator, and Sketch
- Working with text, vectors, image fills, and masks
- Repeating elements with the powerful Repeat Grid tool
- Resizing multiple elements with responsive resize
- Using the new Assets panel to manage symbols, colors, and character styles
- Sharing symbols across files, with text and image overrides
- Creating and consuming bitmaps and vectors from CC Libraries
- Extending the power of XD using great plugins