Adobe XD Overview
Adobe XD Overview

This course explores the fundamentals of how to design an iOS app. You'll learn what you need to consider in the design process and the various tools available.

Learning Objectives

  • Learn the fundamentals of iOS app design
  • Learn how to use Adobe XD
  • Understand the various design components you can use for your apps

Intended Audience

This course is intended for anyone who wants to learn how to develop apps on iOS.


To get the most out of this course, some basic knowledge of iOS development would be beneficial. We recommend that you take this course as part of the Developing Mobile Apps for iOS learning path.


Hi, within this lecture, we're going to create our first project on Adobe XD and we're going to see the overview of this XD tool as well. So, as you can see we are not presented with some predefined sketches, like predefined layouts for our project. For example, we can see the iPhone X, we can see the iPad and so much more. And it doesn't even matter what we choose over here because we can change it afterwards. It's called something like artboard, and we're going to see what an artboard is and how to change it as well. Don't worry. So, if you see something else over here, like an iPhone XS max rather than iPhone XS, it's really super cool to just go along with something because later on when you choose one of them you will see how you can change it easily afterwards. And you can even create your custom size. You can just specify some dimensions like 300-300 because you will get to change it afterwards as well. So, I'm going to double click on this iPhone X, and as you can see it creates me the project and now we are inside of our Adobe XD. So, here where we do the design. Okay, so we do design in this little blank box over here and it's called an artboard. So, if we click on something we will see the inspector right hand side, on the right hand side. So, it's called the property inspector, like in XCode actually. So, it's almost the same when we click over an object, we see its properties on the right hand side for example, we can see the width, we can see the height and other attributes over here. And if we had any other view, if you click on them, we would see the related attributes, related properties on the right hand side as well. As you can see, I can change the width and height as I want. So, it doesn't make sense to choose anything in here when we create the project. In fact, it makes sense to choose something but it doesn't matter because we get to change it like this easily. So, we can make this bigger, we can make the smaller, we can create another template for another phone. We can do whatever we want. We're completely free over here, okay? And on the left hand side, we see some views that we can bring in like a rectangle, like an ellipse, or like an artboard. So, we're going to see every one of them, one by one in this section. Okay, we're going to test them all. And over here, we have an extra menu as you can see, and it's called plugins, for me. If you come over here to view, if you don't see the plugins like this, you can open this menu up, and you can change it to assets or layers. We're going to use layers most of the time because we can see different views, different objects inside of our artboard or inside of our pasteboards, okay? So, this gray area is actually called pasteboard. So, we can create views inside of pasteboard, we can create views inside of an artboard. So, pasteboard is actually infinite. You can have as many as artboards or as many as views inside of this pasteboard. So, why do we even need an artboard, right? So, it's actually to see better when we deal with a frame like this. So, if we're trying to design something for iPhone X, now it's very good idea to use iPhone X as a frame. If you come over here to this prototype section, you can see we can create some prototypes like this. So, if we have more than one artboards, we can connect them together, like as if we have been creating segues, okay? And we can actually play this in a simulator like View so that we can see how it looks like on a real iPhone. And we can, if we were designers or if we were aiming to be a UI/UX people, then we can just create these prototypes and we can just pass this along to the developers to say, yeah, I have created this design for you, can you just implement this on your code, on your app. And we're not going to be using prototypes very much in this section in this course because this is not a UI/UX course, it's just to get you along to create basic visual, basic images in your own apps. So, if you hit this 'Play' button over here, then you get the simulator like View where you can actually play the prototype by yourself. So, we have our menu as you can see, and we're going to see the different menus, different options that we have over here. And I believe that's it for our View. So, let's stop here. Within the next lecture, we're going to start inspecting these views one by one.


About the Author
Learning Paths

Atil is an instructor at Bogazici University, where he graduated back in 2010. He is also co-founder of Academy Club, which provides training, and Pera Games, which operates in the mobile gaming industry.

Covered Topics