Want to learn UX or product design? Here’s your quick, straightforward intro to Adobe XD – the intuitive prototyping app.
If you have an Adobe Creative Cloud membership, you’ve noticed that Adobe has added several new apps, over the past few years – going beyond the “Big 3” of Photoshop, Illustrator, and InDesign. With names like “XD” and “Dimension,” we’re seeing less descriptive naming conventions that can be confusing.
Funny thing is, the app Character Animator is blatantly descriptive. So, we know it’s at least possible, Adobe.
Adobe describes XD as such:
“Adobe XD is the all-in-one UX/UI solution for designing websites, mobile apps, and more. Design, prototype, share. All in XD.”
Sounds great, and it’s actually true. XD is streamlined software that is pretty simple to grasp. As long as you can plan a general app layout, navigation and graphics are easy to create. Whether you premake graphics for your prototype screens, or create them in XD, the process is relatively painless.
Let’s jump in and see what we can do.
Start a Project
Open XD and you’ll see a Home screen. From there, you will choose the environment for your design layout. Although the categories are principally named after Apple products, when you click the dropdowns under each, you’ll see Android and other devices, or aspect ratios for web.
I selected the iPhone X/XS for this. That brings us to our project window. You can see that the name field above the artboard can be selected, in order to change the name of each screen. Just double-click it.
In the upper left corner, you’ll see Design, underlined and bolded. This means you are in Design View, or mode. This view will show tools and options used to create the designs on your screen. As in other Adobe apps, you’ll see familiar tools in the tool menu on the left, like shapes and the Pen Tool. They work just the same.
Make Some Screens
Now, you can create graphics here in XD – it’s really easy. However, you can copy and paste graphics straight from Illustrator. For the sake of clarity, that’s what we’ll do here. I have used some premade prototype graphics, and then made an extra screen to show how some other stuff works.
Now, I can select each screen, copy and paste right into XD.
First, I’ll use the Artboard tool to add 3 more screens to the project. In the tools menu, on the left side of the window, second from the bottom, is the Artboard tool. You can also hit A on the keyboard to activate it. Select it, then click to the right of the main screen to add.
When I hit Command + V (to paste the screen I copied from Illustrator) it will come in at 100%. These being vectors, I can freely resize as I wish, without concern for loss of quality. So, even though it’s tiny, I just hold Shift and drag the corners to resize it, proportionally, to fit the artboard. Don’t worry about going out of bounds – the artboard only shows what is on it, not what is beyond it.
Create Screen Transitions
Now, we’ll start creating the interactions in our prototype. Remember Design View in the top left of the screen? Now, we’ll switch to Prototype view. Notice how the tools and options change for this kind of work.
Here, we can assign actions to screens or individual elements. In the first example, I’ll select the entire Home screen by clicking on the artboard name above it, then assign where the app goes when the screen is tapped. I set the destination screen by dragging the Trigger, or the blue arrow that appears when on an element or screen, when it is selected, to another screen.
From the pop-up menu, you can cycle through different transitions and animation styles to find the one you like. I always side with minimalism to prevent unnecessary distraction, so a Tap is just fine. You can also choose a destination here, from the drop down menu, by clicking the Trigger without dragging it.
Tip: In order to re-do a Trigger, select the origin object it is assigned to. When it appears, grab it from the destination and drag it off. It will disappear, breaking the link and the action, so you can start over.
Create Object Transitions
Just like assigning gestures to whole screens, you can assign actions to individual elements on the screen, like: buttons, elements, and images. You just double-click the object and either drag the Trigger to the screen you wish, or click the Trigger after selecting, to select the destination from the drop down menu.
Here, we’ll make a Sign In button on the Find Location screen to take the user to the Sign In screen when tapped. Double-click the button and click the Trigger. Set the destination, and any other transition style you want.
Preview the Interactions
You can see how the prototype will work in two ways. The first way is on your computer. In the upper right corner is a Play button, or a dark triangle pointing right. This will open a window, so you can use your mouse to click around on it, seeing if your destinations is correct.
The second is to use your phone to test. You’ll have to install the Adobe XD app, and hook your phone up to the computer. Then, click the phone icon next to the Play button, and open the XD app. Select the project you wish to test from list, and start tapping and swiping.
Now, you should have a general grasp on how cool and easy XD makes prototyping app screens. Of course, there is far more to it than this. You’ll need to think about adding Triggers to return Home, or when to swipe vs. when to tap, but I found that learning these basic gestures eliminated much of the disconnect I felt about learning something that seems so complicated. Honestly, I assumed there was, like, coding or math involved.
Phew. Thanks, Adobe. XD is really cool.
