One of the best features of XD is the Repeat Grid tool. Repeat elements easily, vertically or horizontally, preserving properties in the grid. Content can be unique, and properties are global to the grid. Also, text files and images can be dragged to the grid to populate it.
- [Instructor] Normally repeating elements, when you do UX and UI work, is a very tedious and painful process. For example, if I want to repeat this star to create more stars I have to copy and paste over to the side or hold the option key to get more stars there. And then if I need to move this, let's say change the padding, I need to remember how many times I hit shift, it's a very painful process. Thinking of that remove friction everywhere principle that we mentioned in the very beginning of this course, we came up with this tool called the repeat grid tool.
So all you've gotta do is select an element or a set of elements that you want to repeat and you go to the repeat grid tool up here and you just repeat them, visually. If I need to adjust the padding, I just hover this pink area and I can adjust it right there. I can also repeat elements vertically, and if I need to adjust the padding I can do it that way. But this is everything we need for the stars. I can then select the stars, let's say I wanna center them on that card, that's already centered, awesome.
So that can do that that way. Here, I need a book button, I can do the same thing. I can select this entire element, call the repeat grid tool, the shortcut is command R on the Mac, control R on Windows, then I can adjust here where it ends. And one very useful thing in our repeat grid is that grids are very intelligent, so I can have unique content. In this case, this will be book, our second option there.
Just to make sure things are aligned, I will call our layout grid here on the artboard. It's a little bit off, so let's do it like that. So now they have almost the same padding there, they're touching here, a lot more aligned. I can also repeat entire cards or a group of elements, more complex elements. So let's say I need four cards here, I can select that entire element, or group of elements, then call the repeat grid tool.
And in this case, I want more cards. So I'm gonna zoom out a little bit, and I'll create three cards. And if I wanna play with the padding, I can do it that way, if I wanna play with the horizontal repetition here, I can also do that. So very easily I can have repeated elements that can have unique content... Very, very easily. Now let's learn how we can bring text and images to populate this grid.
- 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