Before you read
This was originally a video, but my computer could not upload it very well, so I will work on getting that to you as soon as I can.
Introduction
Hi there! I’m Officiall_Studios! I have recently been posting UI Design courses on my website, and realized that a lot of people don’t know a lot about the terms and things I have been using. So, I have decided to post a free course here to help people get started with Adobe XD! Let’s begin!
Installing Adobe XD
If you haven’t already, you are going to need XD. Download it here. Once the page has loaded, click try for free. This is a free version that doesn’t expire after two weeks. You will be asked to sign in or create an Adobe account. Do this, then you can download it. You will have a set of instructions, and will be asked to fill out a few questions. Answer these the best you can. After this, you can install, and get to making your first UI! But first, let’s learn what all of these tools do.
The Mouse Tool
This tool is used to select things, change their size, and move them around. You can either select it from the toolbar (on the left), or press V, although it should be the first tool selected when you open something up.
The Rectangle Tool
This tool is used to create any rectangle. Squares, rectangles, you name it! You can select it from the toolbar. Once it is selected, click, hold, and drag with the mouse to create your rectangle! When you are satisfied, let go of the mouse, and you’ll have a rectangle! After that, you will see circles surrounding the rectangle, and some on the inner corners. The ones on the outside are used to change it’s size. You can drag these around, although it may end up with a different length:width ratio then before. To prevent this, drag from the corner and hold shift. The inner circles are used to round the corners. Drag them around and see what happens! This tool also has fill, border, and shadow properties (More on that later)
The Ellipse Tool
This is used to create circles, ovals, any sort of ellipse. You can select this one from the toolbar, too. The controls are the same, just click, hold and drag to make your ellipse. This one does not have inner circles, but does have the circles on the outside to mess with size. The Ellipse Tool also has fill, border, and shadow properties. Anyways, on to the next tool!
The Triangle Tool
This can be used to create triangles of all shapes and sizes! You can again, select it from the toolbar, and click, hold, and drag. This tool also has inner circles, which allow you to edit the corners, with the roundest making it a circle. The fill and border properties are here, too!
The Line Tool
This tool allows you to create straight lines. It is selectable in the left toolbar, and you can make a line just like you would any other shape by holding and dragging. You can also change the border, but not much else. This tool is not super useful.
The Path Tool
This is basically the path tool reimagined. I use this one a lot. It’s in the toolbar, but you can also activate it using P. You can click to add a point in your line, and can also make curves by clicking, holding, and dragging. This tool has a fill, border, and shadow property for you to mess with.
The Artboard Tool
This tool is used to create artboards, which are basically like groups that you can edit. You can select it in the toolbar, and create it like all of the other shapes. These are also useful for exporting as you can select “All Artboards” in the export window.
The Zoom Tool
The last of the tools, allows you to zoom in on your work. You can select it in the toolbar, and click, hold, and drag to zoom in. This tool is not super useful because you can also expand two fingers on the touchpad to zoom in. Now, let’s move on to properties!
Fill
Not all tools have this, but it changes the inside color of the shape you are creating. You can also click the dropper next to it to select any color inside your document. You can toggle fill on and off by clicking the √ next to it.
Border
Again, not all tools have this, but it changes the outside color of your shape. You can use the dropper for the same effect it has on fill. Border also has its own property that changes its thickness. Change the number below border to change it.
Shadow
The last property here adds a shadow that you can change colors, position, and thickness. You can toggle it on and off with the √, and change its color either manually or through the dropper. You can change the x and y properties to change its position, and change the B property to change its intensity.
Exporting
The final thing covered in this tutorial, this exports your creation to a location on your computer. To export, go into the layers menu by clicking the icon that has three rectangles on top of each other, at the bottom of the toolbar. Select all of the things you want to export, right click them all in layers, and select group. Now press Command/Control and E to export. Select a name, a location on your computer, and press export.
Ending
Congratulations! You’ve made it to the end of this tutorial! Thanks for reading! Keep an eye out for my next tutorial! Have a great day! 