This lesson is exclusive to members

Figma UI UX Design Essentials

Class Project 02 - Wireframe

Daniel Walter Scott

Download Exercise Files


You need to be a member to view comments.

Join today. Cancel any time.

Sign Up
Hi everyone, it is class project time. I want you to create something like this, You might be following along so far, and you might be, kind of at a similar sort of stage here, if you're not, I want you to build, get all your frames in, I want you to build this first page plus these other three, basically just other kind of versions of this first page, rectangles, lines, some text. 

I want you to keep it reasonably similar to my layout, even if you're like, even if you disagree, and you're like, "No, they shouldn't be there." Keep it kind of similar because, I don't know, I want you to be able to follow along with your example throughout this course, and these kind of units help me show you, all the different features in Figma, so keep it close to that. 

The actual requirements, for the different class projects are in your Exercise files, you'll see something in there called Class Projects, open that up, and it will look something like this. We've done this first one, so ignore that, now if you haven't, this website url will change, kind of building it at the moment, but remember, you're going to go to that website, and you're going to create your own brief and persona. 

So we've done that one already, potentially, and then we're up to here. So use the skills you've learnt so far, it should look something like that. If you're looking for a larger version of it, you should be able to zoom in, in this PDF, but if you can't, in your Exercise Files there is the png, Wireframe Example, just a nice big version of it you can look at. There is a Figma file in there as well, remember, if you can't remember how to do the Figma file stuff, when you go 'Home', go to your 'Drafts', and hit that, and you can import that Figma file, up to you. 

All right, what else needs to be done? Here are the requirements, so four pages, those are the four pages from our Task Flow, pick your own color, it doesn't have to be green, and your own font. You lose points if you use, Papyrus, Trajan, BrushScript, or Comic Sans, all terrible fonts, pick a plain simple font that I don't hate, it's part of the requirements. I'm looking at you, Papyrus, and then what I want you to do is, just take a screenshot, I'll show you how to export frames and stuff properly later on, but it's actually just easier at the moment to go into Figma, and open up your project, and just take a screenshot. 

On a Mac it's 'Command-Shift-4', you can just drag a box around it, and on your desktop you probably have a screenshot. On a PC it's slightly different, you do use Print Screen, and then you paste it somewhere. I'm not big on PC, exactly how to do it for the different versions, so just Google, "how to take a screenshot." You're allowed to take a photo with your phone, either way, do that and then upload it to either, the projects or assignments, it depends on the website you're on, you'll have a look, there'll be a way to kind of submit it, either as an assignment or a discussion, or a project. 

Once you've done that, I will see you in the next video. Is that big homework? I don't know, it doesn't take too long, but it's good, we're going to practice our tools, our techniques, and we're going to get better together, but we need our wireframe. All right, I'll see you in the next video.