Hey there. This video is all about voice commands in adobe XD. You can ask your mock up questions and it can give you answers. Let's give this a whirl, what is my monthly earnings? Your current monthly earnings are $4528. Cool. Huh? Alright. Let's work out how to do this now in adobe XD. Alright. Quickly before we go on, why are we putting in voice commands now? Probably more typically it's within an app. Okay. And like google maps here, you can hit the little microphone, say uh give me directions to home And it will do a search based on your voice and give you the directions. I use it all the time on my phone. I do things like set alarm for 3:00. Okay or send a reminder or directions home. It's really handy so we can mock that up in XD. The other thing that's really useful for and it's becoming more and more popular is these little guys, these kind of like in home assistance, there's a couple of varieties. The main three are apple, that's there. One there, the homepod google has one c...

alled google home and amazon's is probably the most popular. Okay, this is called the Echo. Now you just plug them in if you haven't seen one of these, just plug them into the wall. There are little speaker, you can ask it to do stuff, get to play music. I'm not really, I haven't really brought into this thing yet. I use my phone to do lots of that sort of stuff. But hey it's meant to be the coming attraction. So you might be asked to mock it up just so you know, I remember this is the homepod google home and amazon echo within them. They have their own little artificial intelligence. Voices. Okay. Apple, Cause they're Siri amazon cause there's Alexa and google just calls it the google assistant at the moment. But they like to change the name of everything every five seconds. So who knows what they're going to call it tomorrow. So there's the actual hardware and then the software is the kind of stuff inside. So let's look at how to mock that up now in adobe. XD. Alright. It's pretty easy. What I'm gonna do is I'm going to do it to this dashboard here. Okay. So this dashboard, you need to be in prototype mode, click on the dashboard title. Okay. I'm going to break any link that I had to it. So click it and at the top here where it says trigger, you've got, we've done tap before. We've done drag. We've done time now it's time for voice. So the trigger for this transition. Well trigger is going to be voice and this is where you the commanders, like what you're going to ask it. So we're going to tell it to open courses page. So that's what it's going to be looking out for then what is it going to do? The action? We're going to get it to transition to an outboard called we need to give this a better name, this is going to be my courses. Okay. And over here we're going to say do this voice lost it. I'll speed this up. Okay, transition to my courses page there, is there? Oh wrong. I've got two courses pages. This is going horribly wrong. Okay. Always put up in the front of it normally. Yeah, the idea. Alright, so that's going to be it. You've got to remember this. I always forget this. Open the courses page. Especially I'm gonna demoing it for somebody. I'm like, I'm saying all sorts of things, I can't remember what it is. So write it down if you're gonna go dimmer it to your clients or impress your boss so that you know, write it on your hand. So now all we need to do is open it. So I've got this upward selected. I'm going to go to preview and what you'll notice is down the bottom here. Can you see hold space bar while speaking now on some computers, you might have a little warning from your computer saying, hey, it's trying to activate your uh your microphone on your laptop or computer just say yes, I agree. Okay. And you might have to relaunch XD. That's just a guess and mine didn't ask for it, it's fine. So I'm going to hold down space bar in a second and ask, I can't even remember now what it is, Open the courses page, we'll see. So for this to work, you need to hold down space part and you need an internet connection so we'll give it a go open the courses page. You can't just say anything it needs to match what you wanted to do and hopefully it'll transition in a second to that page now mind takes forever because of my really slow internet connection. It worked. Cool. So yeah, I love it. Okay so the big thing is is that if it's taking forever it's either broken or it's your internet connection is either non existent so it won't work ever or it's really slow and like mine just takes a bit of time now you don't need a fast internet connection. Like I just happen to be in the middle of nowhere for where I do my recording. So at home works perfectly fine. That's one way of doing it using it for navigation. The next thing I want to do because instead of navigating, I wanted to I'm going to break this link I wanted to voice, I'm going to ask it what my monthly earnings are. So it's not going to leave this page, it's going to read something back on this page. You have to be very you have to tell it what to do. So the command that's gonna be what's my monthly earnings, I'm going to say speech playback and you have to physically write what you wanted to say. Okay so to save you just type some stuff in, copied and pasted it. So it's going to read this back to me. So give it a test, remember command return on a Mac control return on a Pc and we're on the wrong page. Gotta remember what you've asked it. It's a preview now. Mine, I'm just gonna leave this in here. I'm previewing and it's not appearing bottom bidders. I have to prove you kind of twice. For some reason, I'm not sure why. Remember to hold down space bar. What's my monthly earnings for the internet pigeons fly off, gather data and come back And your current monthly earnings are $4,528. The projected total for this month is $12,500. Also can I just say you're looking very handsome today Dan. Have you done something with your fringe? Low, low booty up, knock you down. All right, so you can get it to talk to you. You ask the questions and it responds sometimes a little sometimes nice, sometimes a little regressive. Haven't seen my fringe since the early two thousand's. Okay. Next thing I wanna do is we've asked the question and it gave me a result. You can actually have more than one question and answer on a page. Let's say I want to respond to it again or ask a few different questions. The way you can do it is the moment we've got attached to the whole art board, you can see it here. Okay, The whole up board is waiting for this question. But what you can do is you can actually go back to design view and you can attach that transition, sorry, that voice interaction with actual objects as well. Okay, so you can draw a little objects. That's what I'm gonna do at the top here. I'm going to draw a big circle, big and obvious. I'm going to make it magenta so you can see, okay, and we can attach it to this and then hide it. It's kind of a little workaround. So while it is visible, let's switch back to prototype and let's add some more of this voice stuff. So I'm going to say there was a low, that was low blow Alexa, we're pretending we're using Alexa, she can say stuff back, I can click off and you can test with it on, but eventually you obviously don't want to be part of your prototype. So you can go over here and go to your we've been on assets for quite much of this course quite much. Go to the layers panel. Okay, find it, I'm gonna give it a good name. This is going to be my voice trigger. So voice trigger one and I'm going to turn the eyeball off on it. Okay, This one here, the lie, going to hide it still there. Kind of you need to find it in your, you'll only be able to grab it again in your layers panel. Okay? But it will be yeah, it'll work. So let's give it a whirl again. Let's give it a test. What's my monthly earnings? Your current monthly earnings are $4,528. The projected total for this month is $12,500. Also, can I just say you're looking very handsome today Dan have you done something with your fringe? That's a low blow Alexa. Sorry dan. My passive aggressiveness is set too high to change this setting. Please enter the menu and shoes user settings. All right. And that is voice interactions. We've done it with our app. I'll show you a Ui kit for amazon's echo kind of the ui version where you actually have a screen on it. A couple of things. You need to note that you can't change things like the Voice. Okay? It's stuck at that lady's voice. It only works with kind of us. English works fine with me and a kiwi from New Zealand and it seems to do fine. Pretty clever. Let me know in the comments if you have a different accent and it doesn't like it. Other things you can't do is you can't record it. You can't hit record on this, start using it holding space bar and try and it won't record all of that at the moment. Give it a try in your version. It might be something they update, remember they keep updating XD like every month. So give that a whirl doesn't work at the moment now, this does work in your mobile app. Okay? So you have done mobile testing earlier on in the course? So you'd make that the trigger button, okay? And you can click and hold it down on, you have to hold it down in your app okay? The, the XD app and you can ask the questions. The other note is to remember to write down all the commands because I can never remember them going to a client meeting. I'm like, look at this and then I'm just a fool. Kind of talking to my phone and it's not talking back. Alright, so have a look at that Ui kit. So you can find the amazon ui kits, there's a few of them around XD have kind of commissioned a couple. So if you go to file UI kits and go to more UI kits, it takes you to a website. It'll take you to this page and then, right in the first one is one of the newest ones, alexas kind of XT mock up. So we'll give all the Ui components standard in Alexa. Now, my friends, is it for voice interactions, I'll see you in the next video

Class Materials

Bonus Materials with Purchase

Six Completed Files

Exercise Files

buy this class

$00

Buy Class

Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2000+ more >

79.7K Students

99% Recommend this Class

00 Student Work

0 Video lessons in HD
00h 00m of class content
Exclusive bonus content
Lifetime access, anywhere, anytime
Streaming access on desktop and mobile browsers
Download and offline access with class purchase
Offline sync with our iPhone & iPad apps
100% satisfaction guarantee

Daniel Walter Scott

Multi-award winning, influential media designer & Adobe Certified Instructor with 15+ yrs of experience.

SEE INSTRUCTOR'S CLASSES

topics covered in this class

Web Design Design Thinking UX Design Design Projects

Ratings and Reviews

Haseebullah Johar

Thank you, Dan Scott, for providing such a beautiful Adobe XD course. I completed the course today and noticed a couple of things that are missing. I want to share them here so that you can upgrade the course, which would be helpful for us. Hover state and toggle state. Dragging pages from 1-2 to 2-3 and then back from 3-2 to 2-1 with dragging is not working. Another thing is that we learned scrolling the website from top to bottom, but scrolling or pushing things from right to left has been completely omitted. These are the things I have noticed, and I would like you to upgrade them so that we can improve our Adobe XD skills.

2,000+ classes ranging from fundamentals to advanced techniques.

Alexa Voice Commands

Alexa Voice Commands

Lesson Info

81. Alexa Voice Commands

Lessons

Getting Started with XD

What is UI vs UX

The UX Brief & Persona

Wireframing (Low Fidelity)

How Wide for my Website

Existing UI Kits

Working with Type

Basic Colors & Buttons

Free UI Icons

Footers & Lorem Ipsum

New Pages & Artboards

Class Project 01 - Wireframe

Prototyping & Interactivity

Create a Popup Modal

Prototype

Groups & Isolation Mode

How to Use Components (Previously Components)

Production Video - Left Nav

Repeat Grid

Updating Components & Repeat Grids

Prototype Tricks

Navigation Tricks & Tips

Class Project 03 - Components

Mocking Up an App

XD App on Your Phone

Fixing the Position

iPhone & Android Status Icons

Production Video - Login

Sharing Wireframes

Recording Your Interactions

Class Project - Wireframe Feedback

Mood Boards

Class Project - Mood Board

12 Column or Grids

Working with Colors

Tricks for Using Colors

Gradients

Class Project 06 - Colors

Use Web Safe Fonts

Character Styles

Font & Text Tips Tricks

Plugin Lorem Ipsum

Paste Properties

Class Project 07 - Text & Buttons

Draw Custom Icons

Strokes & Lines

Pen Tool

Drawing Practice

Production Video with Tips

Illustrator in XD

Class Project 08 - Custom Icons

InDesign in XD

Pros & Cons for Images

CC Library Connection

Adobe Stock

Free Images

Masking

Photoshop in XD

Infographic

Class Project 09 - Hi-Def Mockup

Mobile Phone Mockup

Class Project 10 - Mobile Website

Hidden Features for Repeat Grid

Plugin - Content Generator

Plugin - UI Faces

Plugin - PhotoSplash

Plugin - Copy Cat

Advanced Asset Panel

Advanced Symbols

What are Micro Interactions

Button Grow

Animated Image Gallery

Full Vector Change

Class Project 11 - Micro Interactions