By Howard Pinsky
Hey everyone, I'm Howard Pinsky. And in this video we're going to be designing and prototyping a video chat experience using audio triggers in Adobe XD. Let's get to it.
All right, here we are, back in Adobe XD with various screens that we've been working on throughout the series. And today, we're going to be tackling video calling. So, over to the right-hand side, I'm going to grab my Artboard tool, shortcut key A, and create a new artboard, which we're going to use for our first screen. And this one is going to show all the people that are part of this video call, a call button, and an end button. And I'm going to start off with a nice large image of the person initiating the call. So with the Rectangle tool, shortcut key R, I'm going to drag one out across this artboard. And with that in place, I'm going to hop over to the Finder or Explorer to find an image. This one looks pretty fancy. I'll drag that in. And now for this image, we want the opacity to be much lower at the beginning. So, within the Properties Inspector, I'm going to go ahead and drop this to around 30 or 20% and then to make it a little bit darker. I'm going to make sure that the artboard is selected and simply change the color to black.
Now, I'm thinking right in this area here, we're going to display the additional users that are on this call. So, with the Rectangle tool, one more time, I'm going to drag one out and then round out the corners just a touch. And since we're eventually going to be rearranging these photos that appear in this area, I want to avoid keeping them inside a Repeat Grid. But what you can do is, use a Repeat Grid initially to add additional photos very quickly, and then ungroup them. So hopping over to Finder, I'm going to select one, two, three, and four. I'm going to drag these images directly in. And then again, because we're going to be eventually rearranging and resizing these images, I'm going to just make sure to ungroup the grid.
Now on top of this group of photos, we might want some more information about what this call is or who's making the call. I'm going to grab my Text tool, shortcut key T, and type out: Howard Pinsky. I am the initiator making this call. Let's make this a little bit smaller. I'm going to make sure to center it and experiment with different typefaces. And then, one more layer, right underneath. This might be some secondary information. In this case, it might be a video call. I'm going to drop the size as well. And I'm also going to drop the weight to around regular. All right.
Now, down below in this area, we're going to want two buttons: one to call and one to end the call. So this time, I'm going to grab my Ellipse tool, shortcut key E, and drag one out on the left-hand side. And this one is going to be to start the call. So I'm going to switch this over to a nice green color. And then the button on the right is going to be red to end the call. Perfect. Now, of course, inside of these buttons, we need icons. So what I'm going to do is, I'm going to hop over to my Plugins panel right down here at the bottom.
I do have Icons 4 Design plugin installed. I'm going to type out phone. Let's go ahead and zoom on in here and, starting with the place call icon, I'm going to choose this phone icon right here, pop it on top and, in the middle of the green button, and change the color to white. And then, to end the call, we're going to choose this icon again, place it in the center, and change the color to white. And this one does feel a little bit too large. So I'm going to shrink it ever so slightly. Now, inside of my Layers panel, I'm going to go ahead and just make sure that some of these icons are nicely organized. So I'm going to select both of these, group them, call this End. Select these two, group, Call. And then for the users down here, just to make sure that Auto-Animate doesn't get confused, I'm going to very quickly go through and just give them very simple names. And I'm simply pressing the Tab key on my keyboard to move down the line. And then, with all of them selected, I'm going to pop them into a group and call this Users. Alright, so that is complete.
Now, what we want to do is, we want to transition to an additional screen, so that when this Call button is pressed, it's going to display some of the users in a different format. So selecting this entire artboard, I'm going to duplicate it, Command or Control+D, and then we can start rearranging some of these layers. So this text layer, I'm going to move closer to the top. I'm going to call this: Video Call. I might make it a little bit larger. And then this text layer right here is going to indicate how many people it is calling. So it's calling five people. And I'm going to make this a bit smaller. Next up, we can keep the users looking just like this, but we might also want to rearrange them so we can use Auto-Animate. So I'm going to dive into this group. I'm going to select all of these layers right here, and we want to make sure that the height matches the width. So I'm going to enter 85 and then I'm going to continue rounding up the corners within the Properties Inspector until I have a nice circle.
Now I can start selecting the individual layers just like this and moving them into place as I'm resizing them. They don't have to be the exact same size for all of them. I'll make some of them a little bit larger, some of them a little bit smaller. And what I also want to do is select my image in the background and do the exact same thing. So, I'm going to bump this up to 100%, set the size within the Properties Inspector so that it's equal, round out those corners, and then move my photo into place. I'm also going to select the entire group and shift it on up just a little bit. Now, since this call is in the process of being taken place, we want to go ahead and either delete or hide this call button. I'm going to go ahead and hide it in the Layers panel. I'm going to move this icon to the center and, depending on how indepth you want to get with our design, you can go ahead and add additional controls. So you can select the Rectangle tool, draw one out, round out the corners, shift this behind this icon, and then adjust the color slightly, if necessary. And on this bar, you can add additional icons to chat, mute your mic, flip your camera, add additional users, so on and so forth... but for now, I'm going to leave this nice and blank.
All right. The final screen we're going to be adding before we add in some audio triggers is what the call is going to look like when everyone is connected. So one more time, I'm going to duplicate this artboard over to the right. And I'm going to start by hiding the layers that we don't want to see initially. So I'm going to grab these two layers. I'm going to hide them both and do the exact same thing for these ones at the bottom. And just like we did on the previous screen, we can start rearranging some of these users. And for this screen, we're going to go for a more rectangular format.
Now, depending on the type of experience that you're going for, you can add additional elements like names, chat messages towards the bottom, and various other things. But I'm liking how simple this is looking. And now that all three of our screens are in place, we can hop into Prototype mode right here at the top to wire it up and bring it to life. And I'm going to start by selecting the call icon on the first screen. I want to drag the wire over to the second. Within the Properties Inspector, I'm going to make sure that Tap is the trigger and I do want to set Auto-Animate as the Type, so that XD recognizes the differences on the two artboards and animates those changes. In terms of the easing options, we'll give it a nice Ease In-Out with a fairly quick duration of around .4 seconds.
Next, here's where things get kind of exciting. Under Action, you can go ahead and add an additional Type, which in this case will be an Audio Playback. And here we can choose a new file to add to our prototype. So when this button is pressed, an audio file can start playing. And in this case, we're going to go for this FaceTime file and I'm going to press Import. Now, on this screen here, that audio file is going to be playing but, after a certain amount of time we want it to automatically transition to the third. So selecting this entire second artboard, I'm going to drag the handle over to that third artboard and then back within the Properties Inspector, I want to make sure that Time is the trigger, and we don't want it to kick off immediately. We want to give it about 2 seconds and Auto-Animate Ease In-Out and 0.4 seconds should work. But then, on this screen right over here, we want an additional audio file to play that indicates that the call has begun. So selecting this last artboard, instead of dragging the handle to another artboard, I'm simply going to click on it. We're going to use another Time trigger, but this time it's going to be set to a 0 second delay. And since there won't be anything to animate, we're going to choose Audio Playback. And again, we're able to select a new audio file like this Call Start one that I have right over here. And with that all set, we can click on our first artboard to launch the prototype and press the Call button.
And that's how you can design and prototype a video chat experience using Adobe XD. Hope you all enjoyed this series. Definitely let me know in the comments or on Twitter what you thought. Thanks for watching and I'll see you all very soon.
In this tutorial, you’ll design a series of artboards to simulate a group video call and then wire up interactions to jump between screens and play an audio clip. The flow begins with an image of a person initiating the call. You’ll add a Call button that jumps to the next artboard, displaying the people who’ve joined the video call and an End Call button. Quickly add multiple images to a Repeat Grid, then ungroup the grid to rearrange and resize the images on the design canvas. Learn how to wire up Tap and Audio Playback interactions to buttons and bring your designs to life.
