This lesson is exclusive to members

User Experience Design Essentials - Adobe XD UI UX Design

How see your design on XD App on iPhone & Android

Daniel Walter Scott

Download Exercise Files

Contents

Certificates

We’re awarding certificates for this course!

Check out the How to earn your certificate video for instructions on how to earn yours and click the available certificate levels below for more information.

Introduction



You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

All right, so it's time to download the app. There's both, an Android and an iPhone version, which is awesome. So go download that for your mobile phone. Now there's two ways of actually getting it on there depending on if you have a Mac computer like a MacBook Pro, or an iMac, or if you have a PC. It's okay, PC as well. 

So I'm going to launch the app, click on 'XD'. Now if you're on it-- we're using the Mac version first, remember. So it doesn't matter if you've got an Android or an Apple phone, it's to do with the computer. You can see here, I've connected the USB cable, nothing fancy. And what we can do is, we can use Live view. The cool thing about Live view is that whatever you've got open on your screen will appear down here, in your mobile phone. Now, it's showing you whatever has the house next to it. So if I zoom-- where are we? Over here. That's my Home Page, can you see this little house here? We're jumping between screens and everything here, but you can see, this little house here, it's showing me that on my phone. So I want to change the little house to this, so I can preview on here. Click on this guy, click the house, and you can see, there he is in all his glory. 

What's really nice about the Live view is that, watch this, as I start moving this thing around, it updates automatically. So it's really nice to have this set up on a nice little screen here. So when you're editing, my desk is all clean, it's never this clean. It was just here for me. Have it all set up, the iPad, and everything kind of up, so you can see it as you're working on it, and you can make adjustments. The cool thing about it as well, is because we've wireframed this thing we should be able to click on this, and go 'Next'. And it's gone for the 'Slide Left'. And into no man's land. Where does this thing go? For some reason I connected that to all the way over here. That was pretty good. So I'm going to zoom in, figure out what I did here. 

So you go there, but I think I clicked on the word 'Next'. How did we get all that across there? I'm not even sure. So, 'Next'. Okay, now it works. 'Next', and then 'Next'. We get a blank screen. Now when you're working on this app there's a couple of things you can do to navigate it. You can click and hold it down for a while, and you get a few options here. One of them is to browse the Artboards, and you can just see like the big version of everything that's in my XD file, which is a great way just to jump back to here. Other things you can do while you're in here, is hold it down and, see this one that says 'Hotspot Hints', you can turn that on because if you click somewhere, can you see, it's for people that I want to say, like my parents. They need a little bit of encouragement to be able to use this testing thing. That should be okay because it's 'Next', and escape, but if you've got something a little complicated, and you need hints, it's probably a sign of a bad user experience, but sometimes you just need to have these things to show. 

I've already enabled a few of the buttons, not all of them. So what else? So that is Live view, if you've got a Mac. Connected to either an iPhone, or this gritty old Android phone, with PAW Patrol stickers on it, for my son, with big cracks on the screen. You can do it another way. And the way is, you go into here, and you'll have the option-- I'm going to click and hold, I want to go back to my XD documents. So XD documents is stuff that is saved in your Creative Cloud. So what you need to do here on the screen, is you need to go to 'File', and you need to go to 'Save As', and on your computer, it doesn't matter if it's a Mac or a PC, this will make this work. You need to find your Creative Cloud folder. I may know where it is on my Mac. You'll have to double check where Creative Cloud keeps their folders on your PC. I know, on my Mac, it is, I know it's around here, it's under all of this junk, when you get to your name, there's mine, 'danielscott'. Here is where Mac keeps them. On a PC, you'll have to do a quick little look to see where they are. 

So what I can do is click it in there and I can put it in its own special folder, or I could just dump this thing in here, so this is my 'iPhone App Test', and click 'Save'. And what will happen is, once it's all synced you'll see this little icon at the top here, it starts syncing and it will eventually end up in your Creative Cloud library. That's the whole thing with Creative Cloud. And magically, this thing will see it. So I am going to update, and check to see if it's in there. It's not there yet. Did I save it in the right place? I think I did. Creative Cloud Files, yes. Awesome! 

I'm going to open up. Sometimes you can give this thing-- you can see it's syncing here, not sure why-- not sure how big it is, but let's pause and wait for it to sync. And I'll jump back in. Now if that doesn't work, mine isn't for some reason, mine's stopped syncing. Works every other days, not at the moment. Good excuse to show you another way. I've logged in to my Adobe account, so 'assets.adobe.com/files', and you can just drag it into here. And you can see, it's uploading nice and sweet here now. And hopefully now, on my phone, if I go to 'Update', it will go and search through all of my Creative Cloud files and see if there's any XD documents. Hey, there it is there. 

So this is a way that I can do it. I don't have to be connected to my phone. So I don't have to use this cable. And I can have it on here now. Does the same thing for testing. 'Next', I can skip along. The cool thing about it is, once you've got it on your Creative Cloud file, it's great for user testing, because the Live view is only when you've got it plugged in, right? So what you can do is have this thing out in the field to show people. Going to see a client, to pitch it, or just showing people, colleagues, at meetings. And this is the same as before, I can click and hold it down, and I can share as an image, I can take a screen shot. Same things as I had before. 

All right, so that is it for using the app. Live view will work on both Android and iPhone but only if it's plugged in to a Mac. If you want to use it on a Windows system, or you don't want to actually plug it in, and use Live view on a Mac, you can use it on both of those systems, you need to save it into your Creative Cloud files. Either through the web version, or normally you can just dump it into this folder here, which is not working at the moment. All right everyone, that is it. I will see you in the next video. Bye now.