Adobe XD CC Tutorial

User Interface

In our previous article, we learned about How to download and install Adobe XD in our Mac or Windows machine. Now it's time to learn about Adobe XD user interface. You can start Adobe XD from Adobe Creative Cloud. Or you can select it from the Start Menu in case of windows. For Mac users need to use Launchpad.

On the welcome screen, We have following option
Begin Tutorial: If you are going to click on this Adobe XD is going to open a tutorial document. It helps you to walk through the Adobe XD.
Start new design: From here you can select various predefined documents based on various devices or web pages. If you are not happy with the options available in the collections you can create a custom size document. At the time of writing this article, our screen size collections are divided into following categories.

  • iPhone - Different resolution option for iPhone and a single option for Android
  • iPad - Different resolution option for iPad
  • Web - Different resolution option for web
  • Custom - You can create the document for custom resolution

UI Kits: UI Kits are a good starting point if you are new to Adobe XD. It contains different UI elements based on the targeted device. If you are going to click on any link it is going to redirect on the UI kit download page. At the time of writing this article, we have the following options

  • Apple iOS - UI Kit for Apple iOS
  • Google Material - UI elements of Google Material
  • Microsoft Windows
  • Wire Frames
  • More UI Kits: It will redirect you to here you can find new UI Kits available for download.

Resources: Are some quick links to useful online document and resource materials

  • What's New: What is new in the current installed Adobe XD version.
  • Learn & Support: Online portal for getting started, tutorials and user guide.
  • Provide Feedback: Everyone needs feedback. Even us. This is the link to raise your voice.
  • Release Notes: Release note for the current release.

Recent Documents: We are launching Adobe XD first time, so we don’t have the option of selecting any previously opened documents. Let’s create a document and save it and close it. As you noticed our start screen is now changed and on the right, we recently opened documents.

This is all about Welcome Screen. Let's create a blank document. For this, we select drop down iPhone 6/7/8 and select Android. You can select iPhone option also.

Now, Let's create our first document and explore Adobe XD User interface. For this, you can select any screen resolution. 

Above the user interface for Adobe XD.
The adobe XD User Interface is very simple and with the limited set of tools. If you are going to compare it with either Photoshop or Illustrator, then you may ask Why to use Adobe XD?  The primary goal for Adobe XD to assemble different UI elements. It is not for creating complex UI elements. So, if you need to create a complex shape or drawing still you need to use Adobe Photoshop or Adobe Illustrator. Adobe XD is only for assembling and prototyping. Now it’s time to explore all the available tools in Adobe XD.
At left, we have all the available tools. If you hover your mouse over any tool icon, it will display tool name and the shortcut to access it. At the time of writing this article, we have following available tools

  • Select (V): Selection Tools.
  • Rectangle (R): Rectangle Tool for creating the rectangle and square.
  • Ellipse (E): Ellipse tool for creating circular or elliptical shapes.
  • Line (L): Line tool for creating the lines.
  • Pen (P): Pend tool for complex shapes.
  • Text (T): Text tool for adding text items.
  • Artboards (A): You can add new Artboards using.
  • Zoom (Z): Change the zoom level of the document.

On the leftmost bottom corner, we have following options
Assets (Shift + Command + Y): We are going to discuss more in our future articles.
Layers (Command + Y): It will show all the available layers in the currently opened document.

In the center, we have our work area or canvas. It contains artboards. Artboards are different screens which we need to create for our application or website. It is not mandatory that, all the available Artboards are your application screens. We are going to learn more about Artboards in our upcoming articles.
On the topmost left corner, we have two tabs

  • Design: Here we can design different UI elements and screens for our application. 
  • Prototype: It helps us to define how we are going to move between different Artboards or Application Screens.

In the middle, we have our document name. It is currently Untitled-1
At right, we have options for 

  • Zoom: Change the zoom level of the document.
  • Preview on Device: If we have any connected iOS or Android devices and Adobe XD app must installed on the connected device, we can use it for displaying the prototype.
  • Play: We can use it to watch our application preview on our Mac or Desktop.
  • Share: Last, we have the option to share our document. We are going to learn more about this in our future articles

On the right we have Properties. With this, options are going to change based on the selection. Currently, it is disabled because we didn't select anything.
So this is about the User Interface. We can check more options available inside menus but during the tutorial articles.
Now we are ready to start creating. In our next article, we are going to explore Adobe XD available tools and object properties.

Leave A Comment

Please login to post your valuable comments.