1 00:00:00,000 --> 00:00:04,956 This design looks nice, but underneath it all each one of these elements 2 00:00:04,956 --> 00:00:08,054 is a separate layer and it's all a bit messy. 3 00:00:08,054 --> 00:00:14,166 On the left side double-click the art board to dig into the layers inside. 4 00:00:14,166 --> 00:00:18,560 Here's all the layers we've created so far. 5 00:00:18,560 --> 00:00:23,454 This is a fairly simple design and already it's pretty confusing to try and 6 00:00:23,454 --> 00:00:26,653 understand where all of these elements belong. 7 00:00:26,653 --> 00:00:29,042 If we don't take control of this now, 8 00:00:29,042 --> 00:00:31,965 it could be even worse later on in the project. 9 00:00:31,965 --> 00:00:36,520 What we need to do is gather this layers together into logical groups. 10 00:00:36,520 --> 00:00:42,000 Let's start with the book button that we created at the end of the previous video. 11 00:00:42,000 --> 00:00:45,094 The text, book is at the top and 12 00:00:45,094 --> 00:00:51,168 the button shape is rectangle two in this case just below it. 13 00:00:51,168 --> 00:00:57,042 Hold down the shift key and select both layers. 14 00:00:57,042 --> 00:01:00,823 I have already selected book and I am holding down shift and 15 00:01:00,823 --> 00:01:03,687 I am going to select the rectangle 2 layer. 16 00:01:03,687 --> 00:01:08,667 And then if you are on Windows hit Ctrl+G 17 00:01:08,667 --> 00:01:13,510 to create group, on Mac, hit Cmd+G. 18 00:01:13,510 --> 00:01:20,130 Now that the two layers are grouped, it's a bit easier to manipulate them together. 19 00:01:20,130 --> 00:01:23,521 We can also rename this group with a label. 20 00:01:23,521 --> 00:01:27,922 Double-click the name, Group 1 and 21 00:01:27,922 --> 00:01:34,809 let's call it Book Button and hit Enter when you're done. 22 00:01:34,809 --> 00:01:38,317 You can also select layers and 23 00:01:38,317 --> 00:01:42,528 group them directly in the canvas. 24 00:01:42,528 --> 00:01:46,945 Drag a box around the first photo, 25 00:01:46,945 --> 00:01:55,032 being careful not to select anything in the toolbar at the top. 26 00:01:55,032 --> 00:01:58,675 Then hit Ctrl+G on Windows, or Cmd+G on Mac. 27 00:01:58,675 --> 00:02:03,686 Then in the layer panel, rename this layer to, 28 00:02:03,686 --> 00:02:11,097 Trip, since this box represents a single trip a customer could book. 29 00:02:11,097 --> 00:02:15,894 Now, I want a total of four of these rectangles here but 30 00:02:15,894 --> 00:02:18,510 we don't have enough space. 31 00:02:18,510 --> 00:02:23,089 To fix that, select the art board by clicking it's label, 32 00:02:25,763 --> 00:02:30,306 And then, I'm going to hold down the spacebar and 33 00:02:30,306 --> 00:02:34,750 then click and drag to pan down a little bit here. 34 00:02:34,750 --> 00:02:40,474 And then click the bottom handle of the art board and 35 00:02:40,474 --> 00:02:43,680 drag downward to extend it. 36 00:02:43,680 --> 00:02:48,244 Then you can zoom back to center by hitting CTRL+0 on Windows, or 37 00:02:48,244 --> 00:02:49,718 Command+0 on Mac. 38 00:02:49,718 --> 00:02:50,988 When you do this, 39 00:02:50,988 --> 00:02:55,911 you'll notice a blue dotted line has appeared across the art board. 40 00:02:55,911 --> 00:02:59,262 This indicates where the view port will end, 41 00:02:59,262 --> 00:03:05,270 which is different than the dimensions of the art board, which we just changed. 42 00:03:05,270 --> 00:03:09,050 The view port is what this device will actually see and 43 00:03:09,050 --> 00:03:11,910 in this case, an iPhone 6, 7, or 8. 44 00:03:11,910 --> 00:03:16,872 But when we preview the design we will be able to scroll up and 45 00:03:16,872 --> 00:03:21,056 down, which is everything below this blue line. 46 00:03:21,056 --> 00:03:24,368 If you are familiar with web design technology, 47 00:03:24,368 --> 00:03:28,830 this is sometimes called, the fold, like a fold in a newspaper. 48 00:03:28,830 --> 00:03:33,436 Because it's the first thing that you see on the device before you 49 00:03:33,436 --> 00:03:35,538 start scrolling downwards. 50 00:03:35,538 --> 00:03:40,651 Now that we have more space, we can create the rest of these boxes. 51 00:03:40,651 --> 00:03:44,551 One way we could do this is by copying and pasting each one and 52 00:03:44,551 --> 00:03:48,530 then aligning them and making sure they're evenly spaced. 53 00:03:48,530 --> 00:03:54,915 But in Adobe XD, you can repeat similar elements like this in a gridded pattern. 54 00:03:54,915 --> 00:04:01,622 Select the group that we just created by clicking on it in the artboard. 55 00:04:01,622 --> 00:04:06,820 And then in the property inspector, click the button that says, repeat grid. 56 00:04:06,820 --> 00:04:11,100 You should see two handles appear on the group in 57 00:04:11,100 --> 00:04:14,853 the canvas on the bottom and on the right. 58 00:04:14,853 --> 00:04:21,145 You can drag these handles to repeat the arrangement in a gridded pattern. 59 00:04:21,145 --> 00:04:27,685 Click and drag the bottom handle down until the photo repeats four times. 60 00:04:31,770 --> 00:04:34,160 With the repeat grid still selected, 61 00:04:34,160 --> 00:04:37,240 we can adjust the spacing between each element. 62 00:04:37,240 --> 00:04:41,248 By hovering over the space between them and 63 00:04:41,248 --> 00:04:46,158 then clicking and dragging until it's how we want. 64 00:04:49,633 --> 00:04:53,409 Now if we double-click to select an element in the grouping and 65 00:04:53,409 --> 00:04:54,700 then drag it around. 66 00:04:54,700 --> 00:04:59,543 Let's say this Book button, the change will be made 67 00:04:59,543 --> 00:05:03,848 across all the elements in the repeated grid. 68 00:05:03,848 --> 00:05:08,415 This is a huge time-saver because we don't need to make 69 00:05:08,415 --> 00:05:12,116 individual adjustments to each component. 70 00:05:12,116 --> 00:05:16,736 Now that we've dragged out our grid, we can clean up the size of this art 71 00:05:16,736 --> 00:05:20,825 board a bit so we don't have all this empty space at the bottom. 72 00:05:20,825 --> 00:05:24,335 So click the name of the art board, and 73 00:05:24,335 --> 00:05:28,503 then just drag its handle until it has a nice, 74 00:05:28,503 --> 00:05:34,663 even amount of space toward the bottom, and then just zoom to fit. 75 00:05:34,663 --> 00:05:39,112 This is nice, but we don't want all four boxes to be the same. 76 00:05:39,112 --> 00:05:43,588 The great thing about repeated grids is that we can still make 77 00:05:43,588 --> 00:05:48,154 individual adjustments to content like text and images, and 78 00:05:48,154 --> 00:05:51,255 the pattern will intelligently repeat. 79 00:05:51,255 --> 00:05:53,703 Let me show you what I mean. 80 00:05:53,703 --> 00:05:59,498 Double-click the second image and then open your file browser again and 81 00:05:59,498 --> 00:06:04,155 bring up the photos that we were working with previously. 82 00:06:04,155 --> 00:06:08,584 Then drag the the image of Paris to the second box, and 83 00:06:08,584 --> 00:06:15,295 you will see it appear here in the second box but it will also appear in the fourth. 84 00:06:15,295 --> 00:06:21,417 That's because the repeat grid is simply repeating the pattern that we gave it. 85 00:06:21,417 --> 00:06:25,697 But let's change the remaining two photos as well. 86 00:06:25,697 --> 00:06:31,823 Double-click the third image and then go back to the file browser, 87 00:06:31,823 --> 00:06:35,271 let's change that to San Francisco. 88 00:06:35,271 --> 00:06:41,017 And then double-click the fourth image and we'll change that to Orlando. 89 00:06:41,017 --> 00:06:45,922 Next, let's adjust the prices, since I'm 90 00:06:45,922 --> 00:06:51,730 assuming this is a travel app based in North America, 91 00:06:51,730 --> 00:06:57,295 we'll double-click on the price for Paris here. 92 00:06:57,295 --> 00:07:02,593 And we will make this a little more expensive 93 00:07:02,593 --> 00:07:07,326 at 30.99 for San Francisco here. 94 00:07:07,326 --> 00:07:11,922 Let's change this to 12.29, and 95 00:07:11,922 --> 00:07:16,936 then for Orlando here, let's change this 96 00:07:16,936 --> 00:07:21,961 to 17.49, and hit Escape to accept. 97 00:07:21,961 --> 00:07:26,181 And then, let's change the text for 98 00:07:26,181 --> 00:07:31,091 each one of these trips, so this is Paris, 99 00:07:33,383 --> 00:07:36,433 This is San Francisco. 100 00:07:39,513 --> 00:07:43,200 And this one is Orlando, 101 00:07:43,200 --> 00:07:48,819 looks like autocorrect got me there, 102 00:07:48,819 --> 00:07:53,405 escape to accept, here we go. 103 00:07:53,405 --> 00:07:55,660 When you're done, save your work. 104 00:07:55,660 --> 00:07:58,103 Repeat grids are a powerful tool for 105 00:07:58,103 --> 00:08:02,425 building layouts that involve lists or cards of information. 106 00:08:02,425 --> 00:08:05,879 Without copying and pasting individual layers, 107 00:08:05,879 --> 00:08:09,999 we were able to finish the first artboard in our prototype. 108 00:08:09,999 --> 00:08:15,174 Next, we're going to learn how to add additional artboards, link them together 109 00:08:15,174 --> 00:08:19,831 in an interactive prototype, and then share the prototype with others.