Layers and Repeat Grids8:19 with Nick Pettit
Adobe XD has several powerful features for managing the layout of a design. Using layers, you can rearrange the order of objects and place them in logical groups. Repeat grids are another powerful feature that reduces the need to copy and paste repeated design elements.
- Create Group: Ctrl + G (Windows) / CMD + G (Mac)
Get Adobe XD
Adobe XD Plans - Adobe XD is available as part of Adobe Creative Cloud in both free and paid memberships. Any edition of Adobe XD (including the free plan) will work with this course. Follow this link to review plans, create an Adobe Creative Cloud account, and download Adobe XD.
Image Files - These are the image files we'll use throughout this course. Download this file, unzip it, and look for the photos folder.
This design looks nice, but underneath it all each one of these elements 0:00 is a separate layer and it's all a bit messy. 0:04 On the left side double-click the art board to dig into the layers inside. 0:08 Here's all the layers we've created so far. 0:14 This is a fairly simple design and already it's pretty confusing to try and 0:18 understand where all of these elements belong. 0:23 If we don't take control of this now, 0:26 it could be even worse later on in the project. 0:29 What we need to do is gather this layers together into logical groups. 0:31 Let's start with the book button that we created at the end of the previous video. 0:36 The text, book is at the top and 0:42 the button shape is rectangle two in this case just below it. 0:45 Hold down the shift key and select both layers. 0:51 I have already selected book and I am holding down shift and 0:57 I am going to select the rectangle 2 layer. 1:00 And then if you are on Windows hit Ctrl+G 1:03 to create group, on Mac, hit Cmd+G. 1:08 Now that the two layers are grouped, it's a bit easier to manipulate them together. 1:13 We can also rename this group with a label. 1:20 Double-click the name, Group 1 and 1:23 let's call it Book Button and hit Enter when you're done. 1:27 You can also select layers and 1:34 group them directly in the canvas. 1:38 Drag a box around the first photo, 1:42 being careful not to select anything in the toolbar at the top. 1:46 Then hit Ctrl+G on Windows, or Cmd+G on Mac. 1:55 Then in the layer panel, rename this layer to, 1:58 Trip, since this box represents a single trip a customer could book. 2:03 Now, I want a total of four of these rectangles here but 2:11 we don't have enough space. 2:15 To fix that, select the art board by clicking it's label, 2:18 And then, I'm going to hold down the spacebar and 2:25 then click and drag to pan down a little bit here. 2:30 And then click the bottom handle of the art board and 2:34 drag downward to extend it. 2:40 Then you can zoom back to center by hitting CTRL+0 on Windows, or 2:43 Command+0 on Mac. 2:48 When you do this, 2:49 you'll notice a blue dotted line has appeared across the art board. 2:50 This indicates where the view port will end, 2:55 which is different than the dimensions of the art board, which we just changed. 2:59 The view port is what this device will actually see and 3:05 in this case, an iPhone 6, 7, or 8. 3:09 But when we preview the design we will be able to scroll up and 3:11 down, which is everything below this blue line. 3:16 If you are familiar with web design technology, 3:21 this is sometimes called, the fold, like a fold in a newspaper. 3:24 Because it's the first thing that you see on the device before you 3:28 start scrolling downwards. 3:33 Now that we have more space, we can create the rest of these boxes. 3:35 One way we could do this is by copying and pasting each one and 3:40 then aligning them and making sure they're evenly spaced. 3:44 But in Adobe XD, you can repeat similar elements like this in a gridded pattern. 3:48 Select the group that we just created by clicking on it in the artboard. 3:54 And then in the property inspector, click the button that says, repeat grid. 4:01 You should see two handles appear on the group in 4:06 the canvas on the bottom and on the right. 4:11 You can drag these handles to repeat the arrangement in a gridded pattern. 4:14 Click and drag the bottom handle down until the photo repeats four times. 4:21 With the repeat grid still selected, 4:31 we can adjust the spacing between each element. 4:34 By hovering over the space between them and 4:37 then clicking and dragging until it's how we want. 4:41 Now if we double-click to select an element in the grouping and 4:49 then drag it around. 4:53 Let's say this Book button, the change will be made 4:54 across all the elements in the repeated grid. 4:59 This is a huge time-saver because we don't need to make 5:03 individual adjustments to each component. 5:08 Now that we've dragged out our grid, we can clean up the size of this art 5:12 board a bit so we don't have all this empty space at the bottom. 5:16 So click the name of the art board, and 5:20 then just drag its handle until it has a nice, 5:24 even amount of space toward the bottom, and then just zoom to fit. 5:28 This is nice, but we don't want all four boxes to be the same. 5:34 The great thing about repeated grids is that we can still make 5:39 individual adjustments to content like text and images, and 5:43 the pattern will intelligently repeat. 5:48 Let me show you what I mean. 5:51 Double-click the second image and then open your file browser again and 5:53 bring up the photos that we were working with previously. 5:59 Then drag the the image of Paris to the second box, and 6:04 you will see it appear here in the second box but it will also appear in the fourth. 6:08 That's because the repeat grid is simply repeating the pattern that we gave it. 6:15 But let's change the remaining two photos as well. 6:21 Double-click the third image and then go back to the file browser, 6:25 let's change that to San Francisco. 6:31 And then double-click the fourth image and we'll change that to Orlando. 6:35 Next, let's adjust the prices, since I'm 6:41 assuming this is a travel app based in North America, 6:45 we'll double-click on the price for Paris here. 6:51 And we will make this a little more expensive 6:57 at 30.99 for San Francisco here. 7:02 Let's change this to 12.29, and 7:07 then for Orlando here, let's change this 7:11 to 17.49, and hit Escape to accept. 7:16 And then, let's change the text for 7:21 each one of these trips, so this is Paris, 7:26 This is San Francisco. 7:33 And this one is Orlando, 7:39 looks like autocorrect got me there, 7:43 escape to accept, here we go. 7:48 When you're done, save your work. 7:53 Repeat grids are a powerful tool for 7:55 building layouts that involve lists or cards of information. 7:58 Without copying and pasting individual layers, 8:02 we were able to finish the first artboard in our prototype. 8:05 Next, we're going to learn how to add additional artboards, link them together 8:09 in an interactive prototype, and then share the prototype with others. 8:15
You need to sign up for Treehouse in order to download course files.Sign up