Learning the basics of Adobe XD in one hour
Understanding eXperience Design to carry out your own design projects
Adobe XD is one of the most used free tools for UI/UX design and prototyping in the mobile design world. As a part of the Adobe Creative Cloud, eXperience Design offers many options and an intuitive interface. You can create and test your experiences while previewing the complete interface of your app.
If you are new to mobile apps design, you should read my previous article too:
This article will help you to understand the potential of Adobe XD and how to get started with your own design project for Android or iOS. It will not take you more than one hour! Adobe XD is available for both Windows and Mac OS.
We will be following the official tutorial of Adobe XD, adding some comments, tips and additional steps to clarify the usage of this tool. In the end, we will be able to use almost every aspect of the software. You can just read this article to understand the steps, but it will be even better if you follow the tutorial by using the software at the same time.
STARTING WITH ADOBE XD
You can download the free version of XD from the Adobe website. Once you open the software, you will find different design templates for your new projects.
In the next article, I will create a new project from scratch. In this case, I will use the tutorial of XD to show its characteristics.
Push the Begin Tutorial button. The main window will open, loading the Tutorial project. The basic navigation in your workspace is as follows:
- To pan: use your trackpad, or press spacebar+mouse, or press the mouse wheel.
- To zoom: two-finger pinch trackpad, or Ctrl(Cmd)+mouse wheel, or Ctrl(Cmd)+(+/-). You can also zoom to a selected item by pressing Ctrl(Cmd)+3.
- To select: use the left click of the mouse. To select groups inside a rectangular area, click and drag.
Use these simple navigation options to zoom into the project screens, and you will see something like this:
The tutorial is created so that you can finish the Campvives App, from Talin Wadsworth. From now, we can follow the steps of the tutorial. I will explain them and add some other new exercises to cover the essentials.
1. PREVIEW CURRENT DESIGN
As the tutorial says, press the play button to open the app preview. A new interactive window will prompt, displaying the first screen of the app.
This preview will be our main prototype screen with Adobe XD. We can test the app by pushing the buttons and checking the different screens and transitions.
Tip: The preview screen will automatically update when you change anything in your workspace. You can open it on a second screen to preview your changes in real time!
Of course, the preview is not a functional app. It will only display the UI that we define in our workspace, moving between the different screens according to the Prototype linkages. However, it is a good example of how will the final design look, and how good is the interaction of the user with our app.
Tip: you can take screenshots or record the screen (Cmd+Shift+5 for Mac, or Windows+G for W10) to share your preview and receive feedback. However, we will learn a better way to share the preview in the last chapter.
2. CREATE A SPLASH SCREEN
Note that the workspace has two tabs in the upper left corner: Design and Prototype. By default, the project opens in the Design tab, which is used to create and modify the visuals of the UI.
Select the Artboard tool from the tools panel (left side or shortcut “A”), and you will see that the options panel will change to show you different artboard templates corresponding to the most used devices.
In this case, the project is created for iPhone 6/7/8 artboards. Just click inside the box to add the new white screen. For different projects, you can choose any other template to create a screen with the exact dimensions of your target device.
You can change the name at the left-top of the screen by double-clicking on it. Rename it with “Splash”.
Now, choose the Selection tool from the tools panel (left side or shortcut “V”) and drag the logo into the splash screen. Now, click on the “Splash” name or double-click the splash screen. We can change the background in the Appearance options from the right-side menu. A common color-selection window will prompt. We can take note of some things here:
- Saving colors. When we select any color, we can save it for later use by pressing the “+” button. If we want to delete any color from our project palette, just drag it out of the window.
- Using gradients. Clicking on the “Solid Color” tab, you will open the gradients menu. You can use them to create a gradient background.
- Eyedropper. Of course, you can use the eyedropper tool to select any color available in your screen.
If you select the Campvives logo, you will see additional options for Appearance. You can choose not only the fill but also the borders of any image. In the case of shapes created in Adobe XD, you can select the details for the strokes. It will help you to change the style of your app’s branding, testing different rounded or sharped forms.
RESIZING AND POSITIONING
You may have noticed also the Responsive Resize option, directly above the Appearance options. This functions came with the September 2018 update, and it allows groups of objects to keep their placement and scalability when resizing.
For a more detailed explanation about how to use the Responsive Resize, I recommend you to spend 4 minutes watching the official video from Adobe CC in Youtube.
In the upper part of the right menu, you will find some buttons to easily resize or relocate the objects. They often save your time when looking for exact dimensions or positions into your layout. Another helping tools are the Grid options that you will find at the bottom of the right menu, when selecting the Artboard’s name. You can choose to display the layout of the screen or a square-cell grid to help you with positioning and proportions.
3. PICK A PROFILE IMAGE
In this section, we will show how to adjust images to shapes, and how to create custom shapes.
You can directly drag into the shape an image from your computer, or from your workspace in Adobe XD. It fill adjust to fit the shape, but you can just double-click on the image to resize it, and only the part of the image located into the shape will be displayed.
We can replace the bottom rectangle with a new one. Select the rectangle and press Del, or right click+Delete. To create a new rectangle, choose the Rectangle tool from the tools panel (left side or shortcut “R”).
Select the starting point for the shape, and drag the mouse to the opposite corner. You can select any Fill, Border or Shadow option for your new rectangle. For example, we can drag another picture as we did with the profile circle.
Tip: if you select the rectangle, you will notice little circled points close to its corners. You can drag them into the image to round the corners, making a smoothed form. This way, it is really easy to create buttons!
More than the Rectangle tool, you can also try the Ellipse (shortcut “E”), Line (shortcut “L”) and Pen (shortcut “P”) tools to create free forms.
4. EXTEND BLOG POST LIST
In this section, you will learn to repeat grouped grids. This is commonly used to create repetitions of the same structure, for example when creating menus, blog entries, lists…
Just select the whole grid, and push the Repeat Grid button from the right menu. The grid will be highlighted with green dotted lines. You can select and drag any of the border buttons to extend the grid, that will repeat its contents.
Using the Pro Tip from the tutorial, you can quickly update all the images. If you want to modify the grid of the items separately, you can push the Ungroup Grid button.
5. LET IT SCROLL
What if we want to create scroll screens? We can do it, but only for vertical directions for now. The horizontal scrolling is still in development.
Just select the artboard and change the Scrolling option to Vertical. Next, expand the bottom of the artboard to the point you desire. Done! You can check the scrolling in the Preview window.
FIXING OBJECTS
You may want to fix objects during the scroll, for example top or bottom bars. Just select the items and tick the option “Fix position when scrolling”.
Tip: Be sure that the fixed items are in the top layers of your design, so that they are not covered by scrolling objects. To check this, go to the Layers menu in the bottom-left corner of your workspace (Ctrl[Cmd]+Y).
6. MAKE IT INTERACTIVE
It is time to learn about the prototyping mode. Start by clicking on the Prototype tab at the top-left corner of your workspace.
You can connect your screens, so that later you can preview how the users will interact with your app. You will use the Preview window to test the user experience from the prototype connections.
Every object can be linked to another screen. When you click on it, you can define the connection by dragging the blue arrow to its destination.
Once you create a connection, you can define various parameters:
- Trigger. It describes when does the action start. By default, it happens when tapping on the object. You can define also a timeout, so that the screen automatically changes to the destination after some time.
- Action. The default state is Transition. It makes the app to change the destination screen. Other action is Overlay, that can be used for accessing menus or non-complete screens over the current screen. We will see the overlay action in more detail later. The last action is Previous Artboard, which makes the screen to go back to the previous one when the trigger condition happens.
- Destination. It is the next screen, the end of your blue arrow.
- Animation. Describes the transient effect from one screen to another. You can select the easing and the duration of the effect.
CREATING MENU OVERLAYS
To create a menu overlay, you must design a new artboard with transparent background. you can adjust the opacity of the background color from the Appearance options in the right menu.
On this artboard, you can create you menu. If you want to download free design resources like menu templates or icons, I recommend you to check my previous article where you will find useful information and links.
Since the menu we designed does not cover the whole screen, we can use it as an overlay. For that, we just have to define the connection at the Prototype workspace and select the Overlay action.
7. SHARE YOUR PROTOTYPE FOR FEEDBACK
This is the final chapter of the tutorial. Until now, we have been checking our progress on the Preview window in our computer. However, the sharing functionality allows you to create a public or private link to open the Preview of your app in your browser.
The official documentation of Adobe is actually great in this case, and you can read more about the publishing options here.
Tip: when you publish your app preview, you can send yourself the link by email to open the preview directly from your smartphone. You will be testing your app from the mobile device!
8. EXTRA CHAPTER: EXPORTING YOUR IMAGES
This is one of the most easy and important parts of your work. If you want someone to use your UI design on their development, you must export the images into the correct formats.
Adobe XD supports image and whole-screen exporting for different device specifications. You can select the output assets, and XD will generate the image files in separated folders according to the target screen densities.
You can select and export specific objects from the workspace, or do a general export of all the screens in the project.
CONCLUSIONS
Following these steps, you should have learned the basics of Adobe XD. The software is in constant development and every update brings new capabilities, so that we have to stay tuned to the future releases.
Adobe XD is a very simple, intuitive and yet powerful tool to create the interfaces of your app, as well as designing and prototyping the user experience.
If you have further questions, do not hesitate to ask them!
Innovation is always spinning forward. Just like a Drill.
