XD App on Your Phone
Hi everyone. This video is all about testing on our phone. Okay So we build that little mock up wire frame of an app and we don't wanna like we've been testing so far using this. Remember we went was the command inter it's over there, apologize when I'm facing this way, you can hear me when I'm facing this way. Not so much the microphones there. But anyway we've been testing just on the computer. Remember this thing. Okay and just kind of skipping next and that's cool and works but testing on the phone is so much better. Right? So what we need to do is you need a couple of things you need a phone you need it could be Apple or android doesn't matter. So an iphone or an android phone you need to have it plugged in. You need a cable so you can't do it wirelessly at the moment you plug it straight into your computer. Now be careful with the cables. I've had a trouble like not all cables will carry data. Some of them are just charging cables if you've got a cable and it's like taped up and ...
it was bad to start with it's probably not going to do this thing so just make sure if it's not working find a cable that looks legit. Okay because not all for you can't tell just plug them in or some of them will work. So you've downloaded the app you've opened it up and it will ask you to sign in with your Apple I. D. Not your Apple I. D. It will ask you to sign in with your adobe ID. So sign in, you'll end up a screen looking like this and the one you want to use is live preview. So it's kind of the middle one. I click on that and the cool thing about it is it will start opening hey the screen that I have selected here. So I'm going to close down that and you can see there's the blue thing and it's a mattress on the screen. Watch this. I'll click the other one, the great one and then there's the black one. Is it working? There's the black one. Okay so it's it's totally live. So what I'll be doing is I'll have this propped up. I just got my little stand here. Okay and I have it sitting here and I'm constantly open. Remember my desktop views over there constantly open on my laptop. I have my phone constantly open there. And the cool thing about it is especially when you're picking things like font sizes and your logo size, you need to really see it on the phone, not not on the on the on the monitor here. So it's live as in check this out. I'll move it around ready, moves around on the screen and moves around on my phone. Okay. I love it and what else can you do? And this is totally usable. So remember we added that prototyping before. Watch this next next okay up and down. Cool. Huh? So we're gonna like if you were testing this with clients, Okay. And you want to show them how it works, you just bring your laptop along, plug this in and they can actually start using the wire frame. I don't test the wire frames very much. But when we get to, what do you call it later on in the course, when we do a high fidelity version, this is a great way to do user testing little tips is the main one is three fingers. Three fingers on takes you back to kind of like a screen where it will ask you things like you can browse the upwards rather than just like trying to navigate through them. You can actually just see them all. You can save screenshots and share and all sorts of other stuff. So three fingers is the only real main one. Okay. And you go back to the demo and now there's times where this doesn't work. One is the cable one is if you've got these two things right? You've got a mac or a Pc. So that's one of the things you've either got one of those two and for your phone you've either got Apple or so an iphone or an android phone. It's one of those two. There are some others. I know, but they don't work okay. But most people have got macs or pc's iphone or android? That is a mac. This is an android works perfect. That is a mac. If I had an iphone, it works. Perfect. Okay, so max good. If you've got a mac works on both android and iphone, if you've got a PC or Windows pc. Okay. Uh Windows mentioned it's a Windows pc. It will connect to an iphone. Perfect. Do this live plug in thing if you've got android though. No working. Okay. So there's a workaround, which I'll do in a second. But if you if you don't have a Windows connected to an android, you can skip along. Okay. If you actually everybody hang around because it's actually quite useful because the problem with this is it's connected. Okay? But if you want to have this on your phone so you can be walking around and like meet somebody like, hey, oh man, you should really look at this app that I'm building. Okay. You can kind of make it offline and it comes along with the phone. It's not, you know, you're not gonna see it update straight from the screen on here. But at least you can take it around with you. So it's good for everybody. You can just take a nap around and it's totally kind of usable, but it's the only way if you've got Windows to android. All right, so let's jump into the computer now and I will show you how to get that working. All right, jumping. Okay. To make this work. Doesn't really matter if you're a poor old Windows person with an android phone and actually they keep changing like they're updating this over all the time. You might want to double check before you go off and do all this because it might actually just work by now and there might be, yeah, it might all work. But even if it does, this is a handy way of not having it connected to the phone. Remember not using a cable. It means you can walk around with the cool little mock up on yourself. So to do it, all you really need to do is, or the big thing is file you need to go either save. Yeah, save as you need to put it into your Creative Cloud Files, folder on your machine. So because you've installed X. D, you're going to have this file somewhere on my Mac. It was just installed on the favorites here on a pc. I'm not exactly sure where it is, but you can check it by going to the Creative cloud app on Mac. It's at the top pc It's down the bottom, go to your preferences. Okay. Which is a little dot dot dot here and go to preferences and then hear clicking on Creative cloud. So you're on general Creative Cloud, click on files and it should tell you your folder location. So in my case it's under I'll show you where is it? Creative cloud files. It's under all of this stuff. So it's under my users Daniel scott sitting in there. You have to do a search for a try and find it and may be added to your favorites on a pc. It's going to be in a different place, but this is where you want to save it. So I'm going to go file save, there's already saved mine. Okay, I've saved it in here, click save. And what's going to happen is your credit card app is gonna start sinking. So I'm gonna go back from preferences on the bottom here will say sinking, sinking, sinking, sinking, sinking. There will be a little icon change for this. It'll look like it's kind of doing something and eventually it will be uploaded to the cloud and that's it. What you can do now is jump back to your phone, I've got it in my hand here, you have to imagine to load it up and you'll get the option. It will actually default to something called XD documents. We've been using live preview. If you're still stuck in live preview, remember give it a three finger click and you'll be able to kind of go back out of that way back to the home screen. Okay, And on the home screen says XD documents, you might have to refresh it by dragging kind of down on it to refresh it or closing down the app and opening up again and I can see my app there he is there, I can open it and I can use it just the exact same way I was using the live preview. Okay. I can click through it and start working with it. The only difference is that I can't do the live updates. So say I make a change here on my screen and I go through and I move that over there. It's not going to live update. What ends up happening is I have to do a save, it'll have to sink and then it will be available. So it's not like a really fluid thing, but it's fine for doing a big bulk test. It's not as exciting as like the full on next to the computer. Looks fancy as well. People walking past and you're doing stuff on your screen. It's updating on your cell phone call. Alright. I hope you found that useful. Let's move on to the next video.