7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 15Length: 2.5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.1 Creating and Managing Artboards

Welcome to the first lesson of this course, where you’ll learn about creating and managing artboards in Adobe XD. But first things first: let’s see how you can download Adobe XD in the first place, and then we'll take a quick tour of the interface.

Related Links

2.1 Creating and Managing Artboards

Welcome to the first lesson of this course where you learn how to create and manage artboards. But first, let's see how we can get Adobe XD and also do a quick tour of the interface. To get Adobe XD, you can go to this address right here. And then hit on Download and it's gonna take you to this page. Now you need to have an Adobe account to continue. So either create one, or if you already have an account, go ahead and sign in. I'm going to sign in with with my account. Here it's gonna ask you a few questions like what are your skill levels with XD let's just say beginners. I am a visual graphic designers and I'm downloading XD for myself, Continue. And next is going to tell you that XD is being installed by the Creative Cloud desktop app. This is true regardless of the operating system you're using. So XD works on both Mac and Windows. So if you already have the Creative Cloud desktop app installed like I do, it's gonna prompt you to open it. If not It's gonna download and install that app. So I'm just gonna hit Open Creative Cloud desktop app. And right here, you can see that XD is already installed on my system. Now before we open this, I just wanna quickly talk about the plans you can choose. So let's go back to Creative Cloud and I have an upgrade plan. You're gonna see a list of all the available plans you can purchase. The ones that we're interested in are this one which is Adobe XD $10 a month or all apps, which is $53 a month. Which includes everything basically, the whole Adobe Suite. So if you're just getting started with XD, you can use it for free, actually, so XD is a free product, but if you're paying $10 a month, you do get access to shared prototypes, design specs, and also cloud storage, and also access to Adobe portfolio fonts and spark. We're gonna use the free version that I have here installed. So let's go ahead and open it. And this is the the opening screen for XD. From here, you can start a new design you can open a previously or a design that you previously worked on. Let's choose this one, double click, and it's going to open up this, this window here. So now a quick quick tour of the interface. This right here In the middle is the canvas, this is an art board, let's actually delete it. On the left side, we have the tool panel, from here we can select the different tools that you wanna use. This is where you switch from layers to assets, to plugins. On the right side, we have the inspector panel so depending on which item you select in your canvas, you'll have different properties here in the inspector. On the top here, you have an option to go back to your home screen and also you can switch from design mode, to prototype mode, to share mode but we'll talk more about these as the course progresses. This is where you can name your document and you can select where to save it either in the cloud or on your computer. And here we have some proto typing features like mobile preview, desktop preview, and also zooming features. So as I was saying, we're gonna go through these as the course progresses. Right now, let's talk about art boards. How do you create and manage them. First of all, artboards are specific areas you can create in your infinite canvas. And these areas can contain objects or groups of objects. So for example, if you're designing a mobile app, you can grab the artboard tool which is this or you can press A on your keyboard. And you can drag a specific size artboard or you can choose from a preset that can be found on this right hand side. So we find presets for Apple devices. Here's the preset name and also, the size and pixels are Google presets for Android, Microsoft for Surface devices and also web. So if you're creating websites, you have a couple of presets you can use. To get started. Let's choose web 12 80, and that's gonna create an artboard that's 1280 by 800. You can find the width and height right here in the inspector. If at some point, you decide, okay, this is too small for me, no problem. You can simply select the artboard and resize it using any of these controls. You might have noticed this dotted line here, that's actually highlights the viewport height which is set right here. So for example, if you are designing for a specific screen size like 1280 by 800, By using this feature, you're gonna see where is the viewport limits. So what elements will you be seeing on your screen at one point? Anything below this line is basically below the fold and can only be accessed when you scroll down the page. Now you can also change the orientation of an artboard by using these two buttons so you can switch between portrait and landscape. Now for an artboard you always have the option to change its fill color. So you can remove it altogether or you can change it to whatever color you want and you can choose between a solid color, a linear gradient, or a radial gradient. If at any point you want to delete an artboard you simply selected either From the canvas or from the layer list, and again, hit delete, or you can right click here and say delete. renaming an artboard is really simple. simply double click on the artboard name here or here or you can right click And select Rename. Now, you can have as many artboards as you want in your project. Simply by clicking on these presets, you can create a vast number of artboards. Now, you can use the Keyboard Shortcuts.Ctrl zero on Windows or Command zero on a Mac to see all of your artboards or you can hit Ctrl or Command one to zoom to 100% or you can select one artboard or one object And hit Command or Control 3. And that's gonna zoom in so you can see that object fully. Now, you might have noticed that when I was hovering On some of these artboards we get a little change of cursor here. We get a handle. These are called artboard guides and you can drag them from the top or from the left side. And those pink numbers and lines will tell you the dimensions or. The distance between this guide and the edges of the artboard. Right now I have 100 pixels distance between the guide and the left hand side of the page. And it can do the same from the top and it can add as many guides as you want. If at some point you wanna delete a guide, simply drag it And drag it back to the, to the edge it came from. These are very useful for example, when you want to align certain objects to, to the guides, they simply snap in place. Very easily. Now, something else you might've seen when I had an artboard selected, is this grid option. Well, you can create grids in XD very simple Very easily. Let's select this artboard for example, check grid. Here we have an option to select a layout grid or a square grid. The square grid looks something like this. It's a square and you can specify the grid size here is eight. And if you wanna change it to 16, you can do that as well. This is very useful for creating icons. But for web designers in particular the layout grid. Is very useful because you can create this vertical columns, and you can choose the number of columns, the color, the gutter width, and the column width. You can also choose to center the grid. And that's gonna create equal margins on the left and right or you can choose different margins for left and right. And of course, having this grid allows you to snap items. And quickly align them to the grid columns. Very, very useful feature. Now before we wrap up this lesson, I just want to quickly mention that XD allows you to open Photoshop and sketch files directly. So you don't Need to have any of those apps installed on your system, which is fantastic in case you wanna switch from Photoshop or Sketch to XD, you can do that no problem and be confident that you'll be able to open the files that you worked on in those apps. In XD to quickly demonstrate, I downloaded two files. One is a sketch file one is a Photoshop file. So to open these, we're going to go back to XD to the, to the home screen here. I'm going to choose my computer And I'm gonna navigate to those files, select the Photoshop first it open and depending on the the complexity of the Photoshop file, this might take longer. So this is the Photoshop file. And right here we have access to basically all of the layers in that in that file and. If we wanna open the sketch file, again, my computer, let's go to this new morphic UI kit. And there it is, of course, we're missing some fonts here, but that's beyond the point. The idea is you can very easily Open sketch and Photoshop files in XD which is fantastic. Alright and that's how you can create and manage artboards in XD Now, let's move on and learn about working with lines and shapes and that's coming up in the next lesson.

Back to the top