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.
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
Resources: Are some quick links to useful online document and resource materials
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
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
In the middle, we have our document name. It is currently Untitled-1
At right, we have options for
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.
Please login to post your valuable comments.