By Howard Pinsky
Today, you'll learn how to create basic transitions and how auto-animate can take your projects to new levels. Let's dive in.
Let's connect these screens to give us a better idea of how the look once developed. And to start that process, let's hop into Prototype mode, which looks very similar to our Design view, but we're now able to select individual elements or artboards that we want to wire up. For the first interaction, I want the splash screen to transition to the home screen after a certain amount of time. To make that happen I'll select the entire first artboard by clicking on its name. This will reveal a blue handle to the right, which can then be dragged to the second artboard that will transition to. Once a link has been established these properties will help us fine-tune the interaction. Let's go through our options. First up, what will trigger this transition? Tap is the most common, but since we want a set time to pass before moving on we're going to choose Time. And it's good to note that the time trigger is only available when an entire artboard is selected, and not individual elements.
For the delay, I'll try out 1 second to start. Next up, the action. Since we're starting off simple, a transition will do the trick. But later on we're going to take a look at some of the more advanced options like auto-animate and overlay. Since we manually drag the handle to the second artboard, we won't need to change the destination, but we do need to take a look at 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. But we want something with a touch more motion. For that, a "Slide" or a "Push" is in order. The difference being that "Slide" overlaps the first artboard while "Push", well, pushes it away. Let's try out a "Push left" and to nicely set it into place an easing option can be chosen. You'll see a few of these in action over the course of this series, but for this particular example, "Ease-Out" out should work well. Finally, how long do we want this transition to take place? Since we don't want users to be waiting around too long, we'll want something pretty quick. Somewhere around 0.4 seconds. Wonderful, our first wire has been created. Let's see it in action.
The Play button at the top-right of XD will launch the desktop preview starting with the currently selected artboard. Or, if nothing is active, the one marked as home. You can easily mark an artboard as your home screen by selecting it, and then clicking on the home icon to the left. Now when the preview is launched, there's a slight delay and then the targeted artboard pushes into the left-hand eases nicely into place. Let's link up one more from the home screen. Users should be able to click on their destination of choice and be taken to a screen with more details, like this one. Unlike the last example where I selected an entire artboard, I'll want to make sure to select an individual element that will trigger the transition. Even though I'm using a repeat grid for these cards, I can still select them individually.
And once I have the first card active, I'll drag the blue handle to the third artboard. Now, instead of a time trigger, we want to go with "Tap". And, to keep consistency, we'll keep the rest of the settings the same, which have been retained from the previous link. Hopping into the preview again, we can now look at both of our interactions — the time transition from the splash screen to the home screen, and then the tap trigger that's activated by clicking on the first card. 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. Take a keyboard for example. Onar these two artboards, I may want the search icon to activate a keyboard. Hopping quickly over to this iOS UI kit which you can grab under the "File > Get UI kits" menu I'm going to copy the keyboard to use on this project. Now, instead of needing separate artboards each time I use this element, I only need one. So, with my artboard tool active, I'll create another iPhone 6/7/8 screen to paste the keyboard from the UI kit, and then resize that artboard so that only the keyboard is visible.reat Great. Now it's time to wire it up. Unlike the last example where I selected the entire artboard, I want to make sure to select the individual element that will trigger this overlay — in this case the search icon. With that selected, the blue handle to the right can be dragged to the artboard containing the keyboard. Within our Properties, "Tap" will be the desired trigger, and instead of a transition for the action, we'll want to choose overlay. And when I do you'll notice that a bounding box appears on this artboard. This can be dragged to position the keyboard to its final position. And once in place, I'll set the animation to slide up from the bottom and, just like in the previous example, I'll stick with an "Ease Out" at 0.4 seconds.
Now that the first wire is set up, I can easily do the same for the search icon on the second artboard linking to the exact same keyboard. And now, no matter which artboard I'm previewing, I can access the keyboard by tapping or clicking on the search icon. Now, let's switch gears and take a quick look at one of my favorite features in XD, auto-animate. Because of how deep this feature is I'll be covering it more in-depth in a separate video, but this should give you an idea of how you can start adding animated interactions to your projects. Here's a design containing a web page up and working on. And in my mind, this is the end state of a parallax effect where the text rises up from behind the mountains. In other applications, animating this would be a lengthy process, and would sometimes require me to keyframe each element. XD takes a different route to this problem, focusing more on design. In this case, since my second state is complete, all I have to do is design the first. To start, I'll make sure I'm back in Design mode, and then I'm going to duplicate this artboard over to the left and rename it accordingly. Now, looking over at our layers, there's a few changes that I need to make. First, the size of the text needs to be decreased and move down the screen. I can very easily decrease the size of this text using the handle right below. Next, the mountains in the foreground should be enlarged quite a bit, and to ensure that I'm scaling from the center and then I don't skew the proportions, I'm holding down my Opt + Shift key or Alt + Shift on Windows. Next up, the background, which I'll want to make just a touch larger. Hiding the mountains layer will let me easily double-click on the image to access its mask, where I can now scale it up and move it into place. Finally, I have a small icon at the bottom that I want to rise up. For this, I'm simply going to move it down a touch and decrease the opacity to 0%. Great. Our two states are now complete. It's time to bring this to life.
Hopping into prototype mode, I'll select the entire first artboard and drag its handle to the second. And just like we did in the first example, I'll go with another time trigger with a delay of about 0.4 seconds. Now, instead of a transition, will want to select auto-animate for the action. This will essentially instruct XD to look at the differences between the wired up artboards. And as long as a layer names and layer types line up, the magic will happen. For the easing I'll select "In/Out" so that the beginning and end to ramp up and down and then set the duration to a slow 4 seconds. Now that this artboard is wired up, I can do the same thing for the second artboard linking back to the first if I want a looping animation. With all that set up, launching the desktop preview will kick off the animation, and just by designing two states auto-animate was able to do the rest. Here are a few more examples of what's possible.
And that's your introduction to prototyping in Adobe XD and a hint at what's possible using Auto-Animate.
In this Adobe XD prototyping tutorial, join Howard Pinsky as he shows you how to create prototypes with drag gestures, voice commands, overlays and more. Prototyping in Adobe XD is a powerful way to articulate and share your ideas, demonstrate user journeys, and mock up micro-interactions thanks to simple transitions, and more complex Auto-Animate features. After this tutorial, you'll know how to prototype in Adobe XD and start taking your designs to the next level, whether they were created in Adobe XD, or imported from other design files like Photoshop and Illustrator.
