By Howard Pinsky
Hey, everyone, I’m Howard Pinsky – Senior XD Evangelist at Adobe. Whether you want to add sound effects to improve your prototype’s functionality or to simple add a touch of fun, let’s take a look at how it’s done using Adobe XD.
On a design like this, I may want to expand the interaction by adding not only speech playback, but also sound effects, as well.
Starting off with the speech, when this artboard loads, I’d like the question at the top to be read back to me. To accomplish this, within Prototype mode, I’ll select the entire artboard then click on the blue handle to the right. This will allow me to set up a Time trigger that will take place after a short delay, somewhere around 0.6 seconds should work. Under Type, there are two options we can use for this. Speech Playback will let us choose a voice and enter the text that XD will read when previewing, or Audio Playback if there’s a specific MP3 or wav file that we’d like to use, we can choose it here. My good friend Andrea Hock recorded the question for me, so I’ll select that file.
Now when the prototype is previewed…"When you create a repeat grid in Adobe XD, what are you required to say?"
To add to this, it would be neat if, when an answer is selected, a chime of some sort would sound to indicate whether you’re right or wrong. I’ve already set up the various states on the possible answers that will change the background color when tapped on but now we need to add in some audio. Starting off with the incorrect answer, since 3 out of the four will use the same audio, I’m going to make sure to edit the master component to push the interactions to the rest.
As you can see within the properties inspector, a tap trigger is already set up, but at the bottom, we can add in an additional action, where I can now browse Finder for the exact file I’d like to play, which in this case, is the buzzer sound.
Now that we have this in place, you’ll notice that it’s also present on the other incorrect answers, and since the correct component was overridden, I can jump in and choose the chime audio file I want to use.
Perfect. Let’s see this in action.
"When you create a repeat grid in Adobe XD, what are you required to say?” Incorrect sound Correct sound
Boop, indeed. Here’s one more example. On the landing page that I showed off during the video on anchor links, I added a button in each section that when pressed, plays back the sound of the animal it’s beside.
Finally, on a more fun note, I designed this BB-8 a while back and to take it up a notch, I added in two audio files that play when it's tapped on.
And that’s a look at how you can use audio playback to take your prototypes to new levels. For more XD tips & tricks, head on over to LetsXD.com and I’ll see you soon.
Sound is an experience in itself, and can enhance any digital experience when used correctly. Prototyping with sound and audio is easy in Adobe XD. In prototype mode, sounds effects and speech playback can be used to create an entirely audible experience and user flow, right inside Adobe XD. Learn how to add audio and speech playback to your prototyping in this tutorial.
