Thanks to the infinite pasteboard, managing artboards, reordering artboards, and mixing them up for mobile and web is a snap as you will see in this video.
- [Instructor] In this chapter, what we're going to do is we're going to take a project, a couple of artboards from start to finish, and that means from wireframe to basically interactive prototype. So let's get started. And the first step in the process, of course, is to create your artboards, and we're going to work with the iPhone 6/7 artboards, so we'll just click that. And when XD opens up, you've got an artboard. Now we're going to need two artboards here. One artboard will be a login/sign-in screen, and the other one will be talking about various tours available throughout Beijing.
So to add an artboard, you can do this. You can come over here to the Artboard tool right there, click it, and you get to choose a new artboard. Do you see it, all right there? And we got the wrong one, so we're going to delete that, which is the great thing about working with artboards, and we're going to add the iPhone 6/7. And you'll notice that you've got all the various sizes here. So if you make a mistake, it's real simple. Just delete. So there's the new artboard. Now a couple things that you can do with artboards. The first one is is you can name them, and that's a real good idea.
So we're going to name this first one Signin, and this one, notice you just double-click the name, we're going to name Tours. And then you just deselect, and we've got the artboards selected. Now the other thing about working with artboards is you don't need to stick with the size that you want. If you wish actually have, say, tablet and desktop versions of this project, well, it's no big deal 'cause you can come to the Artboard tool, you can choose a device, let's go with an Android mobile, and you see it adds in it.
And the great thing about this is is if you zoom out, okay, so I'm just going to come up here and I'm just going to zoom in to 50% view. And I can just move it into place. And you can take these artboards and you can move them around. So we've got two Androids here, and you'll notice that you can set the spacing too. The smart guides tell me that these are 85 pixels apart and there's 90 pixels. So if I want to add a tablet version, all I have to do is come here to the Artboard tool, and I can choose, oh, we'll say an iPad.
And if I want to add a desktop version, you deselect your artboard, choose the Artboard tool, and you can come down here and you get a number of choices for Web. Now you can also set these things to be custom sizes. So that's why you've got the handles here, so you can drag an artboard, and you can make it larger or smaller. This is a very handy feature. Now that dotted line you see is actually the bottom of the viewport.
So if you're going to have scrolling content, it's going to have to come below this dotted line, sometimes called the fold. Okay, let's just get rid of what we've got here by selecting the artboards and let's get started working on our project. And I'm just going to zoom in. We'll go to 100%, and we're ready to start.
- Navigating the XD interface
- Using artboards and grids
- Adding content to layers
- Using the Repeat Grid feature
- Adding interactivity to a project
- Exporting content
- Sharing your work
Skill Level Beginner
Q: This course was updated on 11/29/2017. What changed?
A: New videos were added that cover the XD Assets panel, Experience Design symbols, Creative Cloud Libraries, and pinning comments.
Q: This course was updated on 08/15/2018. What changed?
A: New videos were added that cover the Search Assets feature, using a grid in XD, the Paste Interactions feature, creating element overlays, fixing element positions, the Design Specs feature, and exporting a project to Zeplin.