Hey everyone, welcome back to another tutorial on Adobe XD. In our last video, we created our first basic prototype. I will talk while I continue to build the prototype connections and then make the first transitions. If you like, You can speed up or look at the chapters to see when we begin our first transitions.
Real or Fake?
As you can see, I want to make my prototype as authentic as possible. Whenever I create a website, a mobile and an interactive desktop prototype will show the client the user experiences. Ensure the drop-down menu opens if I ‘tap’ on it. If I had a search bar or a search field, I would love to have the keyboard’ slide up as an overlay as soon as I tap on the search icon.
Taking it Slow. Fundamental Transitions
Eventually, we will start with some fundamental transitions and how they can take your projects to the next level. Again, as I build my connections in the prototype stage, it will look very similar to the design stage, but we can select individual elements or artboards to connect some actions.
In our first interaction, we tap the logo to go to the about page. Instead, we can change this as a delayed time and automatically transition to the about page. Let’s make sure our first artboard is the starting page. You can easily mark an artboard as your home screen by selecting it and then clicking on the home icon to the left.
To work properly, we can’t select individual elements. We need to choose the entire artboard. Once we have chosen the whole artboard, you can now see the time trigger. We want a certain amount of time to make that happen. I can select the entire artboard by clicking on its name. This will reveal a blue handle to the right, which can then drag to the second artboard to transition to once a link has been established. The properties to the right will help us fine-tune the interaction.
Options to Triggers, Transitions, and Actions
Let’s go through our options. First up, what will trigger this transition is tap, the most common, but since we want a set time to pass before moving on, we’re going to choose the time. The following action is a simple transition that will do the trick, but later on, we’re going to look at some of the more advanced options. Since we manually drag the handle to the second artboard, we won’t need to change the destination, but we need to look at what animation we want to use.
On the basic side, none will give you a quick cut to the next artboard, while dissolve will fade from one to another. If you want a touch of motion, a slide or a push will work. Slide overlaps the first artboard while push well pushes it away. Let’s try out a push left, nicely set it into place, and choose the easing option.
Since we don’t want users to be waiting around too long, we want something pretty quick, somewhere around a second.
Testing Time!
Let’s test this out and see it in action. In the top-right-hand corner is the play button. It will launch the preview starting with the currently selected artboard or, if nothing is active, the one marked as home. When the preview is launched, there’s a slight delay, and then the targeted artboard pushes into the left and eases nicely into place.
Hamburger Menu (aka Drop-Down Menu)
Let’s link up one more from the about screen should the user want to click on the drop-down menu. I want to make sure to select an individual element that will trigger the transition. Once I have the first element active and if by chance you have trouble choosing it, look in the layers and select it —remember how important it is to name your layers now. If the layers weren’t name, prototyping becomes much more challenging now!)
I will drag the blue handle to the next artboard. Instead of a time trigger, we want to go with tap. We will keep the rest of the settings the same which have been retained in the previous link. To test the prototype, let’s jump into the preview again. Let’s look at both of our interactions, the time transition from the landing screen to the about page and the tap trigger activated by clicking on the drop-down menu.
Using Overlays in Adobe XD (Keyboard set-up)
Next up, let’s take a look at overlays. There may be elements in your project that you wish to reuse amongst several screens, but you may not want to create an entire artboard for each instance—for example, a keyboard when the search icon is triggered.
Instead of duplicating another artboard each time I want to use this element, I only need one. Let’s create another artboard. With my artboard tool active, I will make another iPhone 12 Pro Max screen and paste the UI kit’s keyboard. Resize the artboard so that only the keyboard is visible.
Set the Animation Slide-Up
Let’s make another connection. I will want to make sure to select the individual elements that will trigger this overlay. In this case, the search icon or the word search is chosen. You can drag the blue handle to the right of the artboard containing the keyboard. Within our properties, a tap will be the desired trigger, and instead of a transition for the action, we will want to choose overlay. If you notice, a bounding box appears on this artboard. You can drag it to the bottom position of the artboard. I will set the animation to slide up from the bottom, and just like in the previous example, I’ll stick with ease out at a second. Now that the first connection is set up, I can easily do the same for the search icon on the second artboard linking to the same keyboard, and now no matter which artboard I’m previewing, I can access the keyboard by tapping or clicking on the search icon.
I will be covering more advanced techniques in future videos, but this gives you an idea of how far Adobe XD has come being an excellent tool for wireframes, mockups and prototypes.