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.

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.

XD App on Your Phone

XD App on Your Phone

Lesson Info

25. XD App on Your Phone

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