Adobe XD (also known as “Experience Design”) is fast becoming the web designer’s graphic tool of choice. It allows for designing, prototyping, and collaborating with others, all from within one application. In this course we’ll be covering all of the essential tools you’ll need to start designing and prototyping with Adobe XD.
Learn Adobe XD
We've built a comprehensive guide to help you learn Adobe XD, whether you're just getting started with UX design or you want to explore prototyping and collaboration.
1.Introduction1 lesson, 00:21
2.Starting Out1 lesson, 03:13
3.Working with Adobe XD9 lessons, 42:11
4.Prototyping with Adobe XD3 lessons, 12:47
5.Conclusion1 lesson, 00:10
Hello there, my name is Daniel White, and welcome to this Adobe XD. In this course you're going to learn all of the essential tools that you'll need to be able to create your own designs from scratch all within Adobe XD. We're also going to look at how you can turn those designs into working prototypes that you can then share with others. This is Adobe XD, let's get started.
2. Starting Out
2.1 Creating Artboards
[MUSIC]. Hello and welcome to This Is Adobe XD. My name is Daniel White and in this lesson we're going to be taking a look at artboards in Adobe XD. So from the welcome screen, we have a selection of preset sizes. You can access these by clicking the drop down arrow. So we have sizes for mobile, tablet, and desktop, or you can enter your own custom width and height and have your own custom artboard size. We also have a selection of UI kits at the bottom of this window for Apple iOS, Google Material, and Microsoft Windows. And you can also open your files from the bottom right, or view any recent files from this panel on the right hand side. So let's go ahead and click on the iPhone 6 and 7 preset. And it will create a new artboard for us. Now we can rename this artboard by clicking on the text at the top. And we can also adjust the size, either by dragging or by typing in a different width and height in the property inspector on the right. We can also change the orientation from portrait to landscape. Now, if we drag down from the bottom, you'll see that we have this dotted line appear. This marks the bottom of the screen for the iPhone 6 and 7. And you'll see we have vertical scrolling selected, and the view port height is 667. So if we change the height of this, it will move that view port dotted line. So what this means is that anything below the dotted line the user won't be able to see until they start scrolling. So this marks the bottom of the screen. So we can also select a background color by clicking on the color picker and selecting a different color. And we can also tick the grid box and it will bring up a pixel grid, so we can select a different color for the grid and make this more visible or a little bit more faint and you can also adjust the size. So let's type in 30. And so each of these boxes is now 30 pixels wide and 30 pixels high. And we can either set this as our new default or we can go back to the default eight pixels. Something else we can do is select the artboard tool from the toolbar on the left and we can left click and start dragging to create new artboards. Or we can select from one of the Apple, Google, Microsoft, or web presets on the right. So to start with we created an iPhone 6 or 7 and we can select an iPhone 6, 7 Plus. And then we could go and add another one, let's say iPad and then view these all on screen together. Or if you've already started designing, what you can do is select the artboard and go to edit duplicate. And it will duplicate both the artboard and the contents of the artboard as well. And that's the end of this lesson. I hope you enjoyed it and I'll see you in the next one.