By Howard Pinsky
As virtual assistants are becoming more and more popular, you may find yourself wanting to navigate through your applications using just your voice. Let's explore how Adobe XD can help you do just that.
Here we have the same UI kit that we've been working with and have gone ahead and added a microphone icon at the top which I may want to use to activate a voice trigger. But as you'll see in a moment, just about any layer can be used as well. Hopping into Prototype mode, I'll go ahead and select the icon, and then drag the blue handle over to an artboard I wish to transition to using a voice command. Now, within the properties, instead of a "Tap" trigger will want to choose "Voice". This will let us type in what XD will be listening out for. In this case "Show me the current score". Once that's been set, the action can be chosen. And for this one, I'll go with an overlay to display the active match, which will have slide down from the top. Great.
With this one ready to go, let's test it out launching the preview window in addition to tappig on the various triggers, voice can now also be used by holding down the spacebar and speaking the command. "Show me the current score". I mentioned earlier that any layer can be used for a voice trigger, even though the overall group of this team's icon is currently set for tap. I can drill down and choose the individual icon or text layer to use for voice. Again, dragging the blue handle over to the next artboard and making sure that voice is the trigger for this one. I'll go with "Take me to the teams" with a transition that slides left.
I can even take voice prototyping a step further and add in speech playback. For example after the overlay with the scores comes into play, I may want XD to speak something back to me. So selecting that artboard, I'll single click on the blue handle to reveal its properties, which is currently set to go back to the previous artboard. Since the close icon is also wired to go back, and overlays can be dismissed by clicking outside of its bounds we can set this trigger to time and choose speech playback as the option. This will then let us type in what you want XD to say. "Here is the score between Montreal and Los Angeles". Let's see this all in action one more time. Show me the current score." "Here is the score between Montreal and Los Angeles." "Take me to the teams. "
And, just like that, you can navigate through your application using just your voice. But there's so much more to learn and explore make sure to check out our other videos to crank up your knowledge on working with assets repeat grades responsive resize in-depth prototyping and a lot more. I'll see you soon.
Hey Adobe, open the menu. With Adobe XD Voice Commands, take your prototypes to the next level by using voice to control prototypes, trigger animations, and navigate a user journey. Prototype a virtual assistant interaction, or unlock an accessible workflow using just voice and speech. In this tutorial, Howard Pinsky will show you how to progress transitions using Adobe XD voice triggers, and how to layer voice triggers to capture a broader range of commands.
