This lesson is exclusive to members

Figma UI UX Design Essentials

Class Project 04 - Testing on your phone

Daniel Walter Scott

Download Exercise Files

Contents

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up
All right, it is class project time. I want you to download the Figma Mirror app, from Google Play or the App Store, I both named those wrong in the last, the last video, so go in there and look for Figma Mirror. If that's not working for you for any reason, you can actually, on your mobile phone, not on the desktop, go to figma.com/mirror, it works mostly the same way. So log in with your account, your Figma account, and test your phone. 

What I want you to do is just have a bit of a big critique of your own work, are the fonts large enough and legible enough, are the colors easily contrasting? So I can actually see some of the text, that is like over the top of these, I know it's wireframes, there's not much going on, but are these fonts for the description big enough, they don't all have to be 16 and massive, but you know, some parts, that do need to be bigger, like this one here, this like smaller part down here, does it have to be bigger? I don't know. 

I'm going to test it on my phone, also make sure that your buttons are all wired up, you go to 'Prototype', and just make sure they're all connected, when you're testing, and also, are they easily clickable, are the buttons big enough, and the last one, going to go back to Design mode. I have problems with these, they just didn't feel clickable, they're not-- they weren't very nice, just a bit awkward to click. 

So what I don't want to do is, can you kind of see them there, I can see that, like this one here just needs to be bigger, like not the actual icon, I kind of like it, that size, it's the frame around the outside. Unlike a group, remember, a group, we can't deal with the frame independently, but because we're doing with these sweet cool frames, with the little hash symbol, it means that, let's have a look, that this thing inside, and this outside kind of wrapper, which is the frame, can be different sizes. 

We're going to get a teeny tiny bit advanced here, but hey, let's do it. So I don't want to just grab the edge, because what I want to do is, I want to go inside of that group, hello, group, or any of these things, go inside of them all, and I want to say, actually, I don't want you to scale, it's trying to match the size of the frame, which is cool, but actually, I don't want that, I want to say, actually, just stay in the center, don't scale, means, when I grab my frame, which is this one on the outside, can I grab it, look, hey, I can make it bigger, it stays in the middle, which is cool, but I can start making my buttons a whole lot more clickable, without actually distorting the image, or trying to make the icon bigger. 

Same with this one here, I can go inside of it, there's two vectors, I'm going to, Shift-click both of them, don't scale, please, just stay in the center, awesome. Go back to the frame around the outside, I'm going to say, actually, just be a bit bigger, nice. 

So there, I haven't changed the size, I just made the clickable area easier to get to, and that's the only one I've actually rigged up, isn't it? You get the idea. So that is it, go and test your wireframe, and check in your, where's it? Class projects, I just want you to take it, can you take a photo of your phone, not everyone can, if you've got another person's phone, take a photo of it. I just want to see it on the screen, kind of proof that you did it, and a nice little, I don't know, cool graphic of your, first wireframe up on the screen, how do you feel now, like I remember, when I first did my ever, first wireframe, I still get that buzz of like, oh, the thing I made, it's on a device, it's on my computer, and it's exciting, it's interacting, I'm clicking buttons, I feel like a professional, I don't know, is that YouTube? 

Anyway, take a photo, if it doesn't work, and you can't-- you've got nobody else around to take a photo, of your sweet new wireframe app, just take a screenshot from your phone, and upload it to the Assignments part of this website. All right, that is it, I will see you in the next video.