By Dani Beaumont
Let's start by creating a screen or an XD what's known as an artboard. To do so I want to come over here to the Tools panel and select the artboard tool. Now if I roll over this icon here towards the bottom, notice that I get a tooltip letting me know that it's the artboard tool, along with a keyboard shortcut. I'm going to go ahead and rely on that keyboard shortcut, so I'll come back here on the design canvas and just type the letter "A" on the keyboard, which changes my tool to the artboard tool. Notice that it also brings up a set of default artboard sizes that I could select from here on the right-hand side. If I come back onto the design canvas and click and release just inside this rectangle, it'll create an iPhone X artboard, which is the default size for the application.
The next thing you'll notice is that the name of the artboard is pretty generic. I want to give it more of a custom name, so to do that I want to switch over to the pointer too. I can go back to the tool panel to do that, or type another shortcut key on the keyboard in this case the letter "V". This switches me over to that selection too where I can now come in and double-click on that generic title and add a name of my own. I'll go ahead and call it "My Splash", and I'll hit Return on the keyboard which saves that name.
Next I want to add some design content to my artboard. The first thing I'll do is come and change the background color. I'll want to make sure I have the artboard selected. If I happen to have clicked off, I can select it again by clicking once on the name "My Splash". I can tell it selected because the name now shows up in blue, and there's a selection indicator for the entire artboard. From here I want to come in and select the eyedropper tool. I have a shortcut key for that as well. If I type "I" on the keyboard it'll bring up that eyedropper from there I want to click on the purple color behind the word "Plant Vibes" in that circle that then applies the color purple to the artboard.
Next I want to add some additional content to the screen. Now, when you're working on your own design, you'll be able to add content in a number of ways that we'll cover later in this tutorial. For now, just copy the artwork from this artboard here on the right- side. To do that I'm going to come with my selection tool and press and drag until I select all of the elements there on the right. Next I'm going to come to the Edit menu and in the drop down I'll select "Copy". When I paste it I want to paste it in the same x and y location on the new artboard, so if I come in and select the name "My Splash", when I come back to Edit and select "Paste" it's going to paste the content in place, or that same location. This trick is going to work with a single artboard, or many artboards if I select more than one at a time. As long as the selected artboards are visible to me on the design canvas, XD is going to paste the content into all of them.
With that set, lets move on to the next step, where we add content from outside the application.
Artboards in Adobe XD are the frame in which designs are placed. An artboard defines the screensize, or viewport when previewing a design. Adobe XD comes with several preset artboard sizes making it easy for you to create your first new artboard and get started designing. In this tutorial, learn how to create a new artboard, duplicate, move and style an artboard to kick off the design process.
Up next, QuickStart Design Step 02: Add artwork and text content with Repeat Grids.
