The Adobe XD Interface6:33 with Nick Pettit
The Adobe XD interface is simple, but powerful. The large empty area in the middle of the screen is the canvas, and the area surrounding it contains tools for creating designs.
- Save: CTRL+S (Windows) / CMD+S (Mac)
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.
Adobe XD is a product from, as the name implies, Adobe, and 0:00 it's included in most of the Adobe Creative Cloud plans. 0:04 We're not going to walk through the process of installing Creative Cloud or 0:09 Adobe XD, but if you need some help, check out the notes associated with this video. 0:13 When you first open Adobe XD, you'll be greeted with the new project screen. 0:18 You can create a new project by choosing from these common screen resolutions, 0:23 or you can create a project with a custom size. 0:30 You can also start by using user interface kits from Apple, 0:34 Google, Microsoft, and more. 0:39 For this project, we're going to create a prototype that targets the iPhone 6, 0:41 7, and 8 screen sizes, so choose that option from the left. 0:48 This will create a new project, and before we go any further, let's save our work. 0:52 To do this on Windows, you'll need to use 0:59 a menu icon in the upper left, but on Mac, 1:03 you can go up to the File menu and choose Save As. 1:08 And then, you can choose a place on your computer if you'd like. 1:16 And then, I'm going to name the file trippin since 1:21 that's going to be the name of our trip planning app for 1:25 frequent travelers, and then I'll hit Save. 1:30 We're going to be saving our work frequently, so 1:35 you may want to take note of the shortcut keys. 1:39 On Windows, it's Ctrl+S, and on Mac, it's Cmd+S. 1:42 Now, let's take a tour of the rest of the interface. 1:49 From the menu in the upper left on Windows, or from the File menu on Mac, 1:53 you can create new files, or open existing ones. 1:58 You can save your files, and 2:02 you can even get some UI kits that I mentioned previously. 2:05 And you can also export your work and share it with others. 2:09 We'll explore some of the sharing options later in this course. 2:14 For now, let's close this menu. 2:19 The large empty area in the middle of the screen is our canvas, 2:22 and the labelled white box is an artboard. 2:28 You can think of artboards as single screens in your app. 2:33 The app we'll create will have two screens that the user can navigate between. 2:37 So by the end, we'll have two of these artboards side by side. 2:43 Along the top of the screen, there's the menu that we've already explored, 2:49 and then there's tabs for Design, and for Prototype. 2:56 Design, as the name implies, is where we'll do our design work. 3:01 The Prototype tab, we'll use later, 3:06 to hook up our designs into an interactive experience. 3:09 In the middle is the name of our project, and 3:12 on the right side, there's the zoom level. 3:16 A mobile preview which you can use in combination with the XD mobile 3:20 app on your phone, if you so choose. 3:25 And then there's the desktop preview button which looks like a play button, 3:28 which we'll use to preview designs after hooking them up in the prototype screen. 3:33 And finally, there's the Share button which lets you create 3:38 links to your prototype that you can use to share with others. 3:43 On the left side of the screen is the toolbar. 3:48 There's the selection tool, which looks like an arrow. 3:52 We can use that to move things around inside of an art board. 3:56 That's followed by the rectangle and ellipse tool, 4:01 which we can use to draw rectangles and elliptical shapes. 4:05 Same with the line tool right after it. 4:09 Then there's the pen tool which we can use to draw custom shapes. 4:13 The type tool is for typing out text. 4:20 The artboard tool is for creating new artboards. 4:24 And then there is the zoom tool, 4:28 which we can us for changing the zoom level of the canvas. 4:31 Don't worry about memorizing all of these right now. 4:36 We'll use them throughout the project, so 4:39 you'll get a chance to check out each one in more detail. 4:42 Down at the bottom of the toolbar, we can view assets in our project, 4:46 like colors and character styles. 4:50 We wont worry about that for this simple project. 4:52 We can also view the layer palate. 4:56 We'll switch to this view right now because we're going to use layers 4:59 later on. 5:04 If you're familiar with a tool like Photoshop, 5:05 you probably already know how layers work. 5:08 If not, don't worry, we'll take a closer look soon. 5:11 Layers just allow us to change the order of how things are stacked on the canvas. 5:14 If you want some text to appear in front of a picture, for example, 5:20 you would put that layer above the picture layer. 5:25 Finally, on the right side of the screen, there's the property inspector. 5:29 This allows you to change the properties or 5:34 the characteristics of any selected object. 5:37 For example, if you select some text or a photo, 5:41 this area would change so that you can adjust things like the font size, 5:44 add a border, a shadow, change colors, and so forth. 5:50 For example, if you select some text or a photo, 5:54 this area would change so that you can adjust things like the font size, 5:58 add a border, a shadow, change colors, and so forth. 6:03 If we select this artboard by clicking on its name, 6:08 the property inspector will allow us to adjust things like the dimensions, 6:12 the view port height, the background fill, and so forth. 6:18 We'll explore these things more later on. 6:23 Now that we've had a brief tour of the interface, 6:26 let's start creating a design using shapes and text. 6:30
You need to sign up for Treehouse in order to download course files.Sign up