Testing on your phone with Figma Mirror

Hello, this is the other side of my office, you're normally looking from that way, across this way, this is, that way looks like, my junk and my sound boards, to try and make it sound nice, and it's night time, it's not kind of moody, it's just actually dark, it's about 11 o'clock at night, and we're making courses for us. 

In this video we are going to be looking at something called Figma Mirror. What is it? It's a way of testing our, you know, we're on the computer trying to design a phone website, a mobile first website, or an app. There's no point spending all your time on there, you need to be testing it on the device, that thing. 

So there is an app you can download from, either the Android or the Mac app store. You can tell I don't use it, but it's called Figma Mirror, they might be changing that name, check in the comments if they have updated it, but it's called Figma Mirror. You sign in with your Figma username and password, then somehow, magically, just starts happening, you don't have to be on the same network, it's magic. 

Basically what happens is, can I show you here, I'll show you, can you zoom in on that, you kind of can, basically, if I click on different things here on my desktop, you can't see what I'm doing over here, but if I click on my 'Details' page, where is it, Details page, there it is, click on my 'Checkout', so it's kind of live updating, and even better, it's actually live and interacting. So will this work? Maybe. 

So click on my 'Home' button, what can you see, Home button, Home button is too small, because I can barely click on it, and you can't see what I'm doing, Buy Now button, look at that, Purchases, what is it focusing on? Is it focusing on the right thing? Maybe. Fades, oh look, how good this is. So I can actually work on it, and the big thing I'm going to show you is, the Buy Now button, is too small, the text look fine on desktop, but it's teeny tiny in there. The Purchase button looks all good, when I go to Buy Now, how is this filming, the cam, this is probably terrible, but hey, that Purchase button feels good to me. 

I'm finding it very hard to click on the buttons along the Nav as well, they just need to be-- they don't need to be bigger, they need to be smaller, with a bigger area around them. So a frame to make them bigger. Logo is too small, text on the Purchase page is good, the Checkout page, and I do get stuck on the Learn More page, I don't have any sort of like prototyping of the, more deep Product Details page. I forgot to add it, you probably saw it in the last video, but it's when you get to this kind of stage, and you're like testing it on your own, you're like, ah, forgot that bit. 

Well, that's way too small, or that's a hideous color, green. Actually, that's probably pretty good, oh, one-- let's do a live update, because, that's pretty cool. I'll adjust the zoom so we can do it a little bit better, you wait there, I'm going to change the camera. 

All right, probably should have done this at the beginning, watch this, it live updates, I'm moving stuff around on my desktop, so you're looking at my laptop there, my phone over there, and yeah, you can just kind of work, so you-- when I'm working, especially at this initial stage, getting font sizes and stuff ready, I just kind of, like I don't have it propped up, I just have my phone lying down on the ground, so you can see it, this is really handy now, I can go through and say, actually, font size here, what do I want to do? 

It's a group, so I'm going to go into my group, and I'm going to use up and down, until I find something-- what I'm looking at, is, I'm keeping my eye out on my phone here, that's what I'm looking at, I'm like, "Is that an approachable for our size?" What you'll find is, pretty much always, 16 is good, you can't see it because it's on this side of my desktop, but I've gone to 16 points, that generally is a no-brainer good one, can't wreck it, 15, if you're trying to be cool and fancy, and trying to keep it small, but if you get down around the 12s and 13 points, it becomes quite a tricky thing to--

It's fine for some things but for a big old click now, Buy button, it feels a bit small, so I want to go through, and let's make this a bit bigger, move them across, center them together, over there. I'm going to have to do the same for the Learn More button, it's hard doing it one-handed, I need my hands over here, but I don't want my hairy knuckles in the video, but you get the idea. 

You can make changes really quickly, be seeing what it looks like on a phone, it's pretty much instantaneous, I'm, I don't know, I'm pretty amazed by how that works. So yes, if you're designing for tablet, have a tablet, if you're designing for desktop, it's a bit easier, because you can just do it on your desktop, a mobile phone, or an app, or a mobile first website, like we're doing. Desktop is part of our plan, but it's secondary, most of our audience is going to be coming from paid ads, because I talk to the client about it. 

Those are the kind of conversations you talk about as well, like lead generation, where is it all coming from? It's coming from Facebook ads, it's all going to come from mobile phones. If it's coming from YouTube how-to videos, like a lot of my courses do, then it's desktop first. So kind of questions you're going to get into as a UX designer, what do we design for first? 

All right, it is late, and surprisingly hot, with all these cameras and lights going, I am going to-- let's make another video before we go to bed. All right, that is Figma Mirror, and testing your prototype on your phone. See you in a bit.