Adding Artboards7:31 with Nick Pettit
One of the best ways to communicate with others in a mockup like this is to use multiple artboards to showcase different screens in the app. Then you can connect them together and create an interactive prototype.
- Copy: Ctrl + C (Windows) / CMD + C (Mac)
- Paste: Ctrl + V (Windows) / CMD + V (Mac)
- Artboard Tool: A
- Pen Tool: P
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.
[MUSIC] 0:00 One of the best ways to communicate with others in a mockup like this is to use 0:04 multiple artboards to showcase different screens in the app. 0:09 Then you can connect them together and create an interactive prototype. 0:14 Imagine that a user of this app taps the Book button for the first trip. 0:20 What should happen next, and what screen should they see? 0:27 For each new screen in the app we should create 0:31 a separate artboard that we can link to using the prototyping tools. 0:34 That will come later, but first, we need another artboard. 0:39 From the left side toolbar, select the Artboard tool, 0:43 or alternatively, hit the A button on your keyboard. 0:49 Then in the Property Inspector, select the item that says iPhone 6/7/8, 0:53 and this will create another artboard of the same size. 1:01 Now we have two artboards, and we should name them so we don't get confused. 1:07 This might seem trivial with just two artboards. 1:13 But in a more complex design, it's helpful to know which is which. 1:15 So I'm going to switch back to the selection tool. 1:21 And in the artboards list on the left side, 1:25 double-click the first artboard with the number 1. 1:28 And rename it to something like, Index View, 1:33 since it's a list or an index of all the trips. 1:39 Then double-click the text of the new one and rename it to Trip View. 1:43 Now, we need to copy the header from the previous artboard over to the new one. 1:51 With the selection tool selected, drag a box around the toolbar, 1:57 being careful not to select the first image and copy it to your clipboard. 2:03 On Windows, you can hit Ctrl+C, and on Mac, hit Cmd+C. 2:09 Then click the title of the new artboard, and 2:15 on Windows, hit Ctrl+V, and on Mac, hit Cmd+ V, 2:19 to paste it in the same place as the previous artboard. 2:24 And of course, as Adobe XD points out, there are other ways to reuse objects, 2:29 but for this simple example, we're just going to copy and 2:36 paste just because we have two artboards. 2:40 And instead of the title of the app, we should turn this into a back button so 2:45 that users can go back to the previous page. 2:50 Hit the T key on your keyboard to select the text tool, and 2:53 then click on the title in the second artboard and 2:58 change it to the word, Back, and hit Escape to accept the changes. 3:02 And then in the Property Inspector, change it from Bold and 3:08 Italic, to just plain Bold. 3:12 Finally, tap the V key again to go back to the selection tool. 3:16 And then hold down Shift and hit the right arrow key 3 times, 1, 2, 3:22 3, to move it to the right by 30 pixels. 3:27 And in the space that we've created here, 3:33 we're going to draw a triangle that looks like a Back button. 3:36 But there's no shape tool that can create a triangle. 3:41 So in cases like this where we need to draw a custom shape, 3:44 we can use the pen tool. 3:49 Select the pen tool from the left side tool bar, or 3:51 hit the P key on your keyboard. 3:56 Then align your cursor so it's right around the top 3:59 of the Back button, and then click. 4:04 Then using the smart guides, draw a line straight downward, and click again. 4:09 And then hold down the Shift key and make a diagonal line toward the upper left. 4:18 And use the smart guides to make sure it's aligned with the top of the arrow. 4:27 Then finally, close the shape by clicking on the first point again. 4:34 Holding down Shift when drawing a diagonal like that will make sure that we're 4:39 at a perfect 45 degree angle. 4:44 Now, I'm going to zoom in just a bit so we can see this a bit better. 4:46 And in the Property Inspector, 4:53 we're going to remove the border and then add a Fill. 4:56 Using the eye dropper tool, change it to the same yellow color that we've been 5:01 using, which is probably most easily done by going for one of these buttons. 5:06 Next, select the selection tool again and click away from the arrow and 5:11 any of the blank area on the canvas to deselect the pen points. 5:17 As you may have noticed, this is a perfect right triangle, but 5:23 it's not pointing the direction that we want. 5:27 To fix this, select the triangle again, and this time, you should see 5:30 a bounding box with controls that will allow you resize and rotate the shape. 5:36 So I'm going to move this over so that it's in the blank space that we created. 5:42 And if you hover your mouse cursor over one of the corners, 5:49 you should see a curved looking arrow. 5:54 Then hold down Shift and click and 5:58 drag to rotate the shape in sharp increments. 6:02 And when it's pointing to the left, release. 6:09 And I'm just going to reposition this a little bit more, and 6:15 make sure it's middle aligned with the Back text there. 6:19 And I think that looks pretty good. 6:24 You can also resize this if it's too large or too small. 6:28 In fact, I'm going to make it just a little bit smaller here. 6:32 I'm holding down Option+Shift on Mac, 6:35 you can hold down Alt+Shift on Windows to maintain the proportions. 6:38 And I think that looks good. 6:45 Now I'm going to zoom back out here, and as a last step, 6:48 hold down Shift and select the Back button and the Back text. 6:54 Then group them together. 7:02 To do this on Windows, hit Ctrl+G, and on Mac, hit Cmd+G. 7:03 Rename the group in the layer panel to Back Button. 7:09 When you're done, save your work. 7:17 Now that we have another artboard, we're ready to finish creating this new screen. 7:21 Then we can link the art boards together to create an interactive prototype. 7:26
You need to sign up for Treehouse in order to download course files.Sign up