Breathe life into your designs

Wire up your first prototypes in Adobe XD

 

What you’ll learn in this video

If you caught the first video in this series, you’ve likely crafted your first design and well on your way to mastering Adobe XD. Today, we’re going to breathe life into those designs through the power of prototyping. You’ll learn how to create basic transitions and how auto-animate can add take your projects to new levels, for both your mobile and web designs.


 
AA_Header.jpg

Auto-Animate like a pro

Grab the Auto-Animate kit and explore what’s possible
using Adobe XD.

 

Drag to the left. Drag to the right

When Auto-Animate was released at Adobe Max in 2018, it shipped right along side the drag trigger, which can help you prototype carousels, side scrolls, and much more. Let's take a look at how this works in Adobe XD.

 

Create an animated number counter

A while back I posted a simple number counter on Dribbble, and a bunch of you wanted to know how it was done, especially the speed variation of the number columns. So let me show you how you can achieve this in just a few minutes.

 

+ VIEW TRANSCRIPT

Hey, everyone, I’m Howard Pinsky. If you caught the first video in this series, you’ve likely crafted your first design and well on your way to mastering Adobe XD. Today, we’re going to breathe life into those designs through the power of prototyping. You’ll learn how to create basic transitions and how auto-animate can add take your projects to new levels, for both your mobile and web designs. Let’s dive in.

Transitions

Starting off where we left off in the last video, let’s connect these screens to give us a better idea of how they’ll work 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 the 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 set 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 be dragged to the artboard it will transition to.

Once a link is 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 option, 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 artboard is selected. 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’ll take a look at some of the more advanced options, like Auto-Animate and Overlay. Since we manually dragged the handle to the second artboard, we won’t need to change the destination, but we do 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 – 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 set it nicely 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” 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 – 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 then clicking the ‘home’ icon to the right. Now, when the preview is launched, there’s a slight delay, then the targeted artboard pushes in to the left and 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 the entire artboard, I’ll want to make sure to select the individual element that will trigger the transition. Even though I used 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’ll 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 timed transition from the splash screen to the home screen, then the tap trigger that’s activated by clicking on the first card.

Overlays

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. On 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 want to use this element, I only need one – so with my artboard tool active, I’ll create another iPhone 6/7/8 screen, paste the keyboard from the UI kit, then resize the artboard so that only the keyboard is visible. Great – now it’s time to wire it up.

Unlike the last example where I selected the entire artboard, I’ll want to make sure to select the individual element that will trigger the 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 the artboard. This can be dragged to position the keyboard in its final position. 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.

Auto-Animate

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 in animated interactions to your projects.

Here’s a design containing a web page I’ve been 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 then duplicate this artboard over to the left and rename it accordingly. Now, looking over at our layers, there are a few changes that I’ll need to make. First, the size of the text needs to be decreased and moved down the screen. Next, the mountains in the foreground should be enlarged quite a bit and to ensure that I’m scaling from the center and that I don’t skew the proportions, I’m holding down my Option and Shift keys (Alt/Shift on Windows). Next up, the background, which I’ll want to make just a touch larger. Hiding the hills 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 it’s 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, we’ll 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 the 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 ramp up and down, then set the duration to a slow 4 seconds.

With all that set, launching the desktop preview will kick off the animation, and just by designing two states, auto-animate was able to do the rest. I’ll be covering more advanced techniques in future videos, but here are a few more examples on what’s possible.