This lesson is exclusive to members

Figma UI UX Design Essentials

Class Project 08 - Text

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. We're going to kind of wrap up a lot of the text stuff we've been doing, and push your design that you're working on, the one that you got the brief earlier on. It's got your own name, your own object, and you're going to work on that one. 

So create a logo, it can be simple, just do something, like all I did for this course was, like stack different weighted fonts on top of each other, or something like that where it's just kind of separate weights. If you are keen, you can spend a lot longer on your logo, up to you, but I'm not expecting anything fancy. 

On the Home page I want you to add your marketing message and placeholder body copy, and then kind of work through, finding a font. So we kind of did it in this class, so go off, look at Google Fonts, Adobe Fonts, whatever you want, find some good font pairings, and I want you to have, like this big marketing message, and this body copy. 

The marketing message, come up with, by yourself, mine is super cheese, look at that, "The music of our people," so you, come up with your own one. If your, I don't know, if your product ends up being handbags, I don't know, you could borrow from some other company as well, we're just practicing here. 

So something actually in here, style it, get it nice, make it one of your headings, and in here I want you to install the plugin for content real, just to practice installing a plugin, and throw in some body copy, and kind of style it. I put mine on some background colors, we're going to probably throw an image in the background later on, but yeah. 

Once you've done that, and you kind of got a sense of the fonts you want to use, I want you to build that styles, those text styles. I've moved mine to here, so this thing, you don't need an alternative one, just the first one. So create these, you can pick any fonts you like, turn them into the styles, like here, and what I want you to do is grab these, plus your color palettes, remember, they used to be over here, on mobile, just copy and paste them, move them to their own page. 

So you're going to learn, well, you know how to make a new page now. Create a page, create a style guide, dump both of these in there. I tied them up in their own little frames, oh, fancy, otherwise you end up with stuff like this, where is it? This, if you don't end up kind of moving, mood board to mood boards, and styles to styles, and man, there's so much junk, so let's do as I say, but not as I do. 

To create the styles, move them to their own page, and this one here is an interesting one, this is our research project, so if you're an experienced designer, and you're already kind of like, you know, you're just learning Figma, you can skip the research part, and just build some cards. 

So UI cards is a term you need to know, and it's, I don't know, I can't go through all design principles in this one, so if you are new, go research, "What is a UI card?" I've given you some examples, of the kinds of ones I want you to build in this. This is what I've done, it is not fantastic, but this is my little card, the short version is, a card is like a reusable unit. I could have 100 of these, it's a nice, easy, reusable, these are going to be images. 

So I want you to make an image card, I've done this weird circle on the side with a text over here, I know it's going to come back to bite me, when somebody wants more text, but hey, it's a course, I get away with some things here. So go and research, what is a UI card, and just have a look through the first few articles. Doesn't have to be long, spend 10 minutes, read about them, get your skills up, know what a card is. I've given you some examples of the kinds of ones that I think would be appropriate for this. 

You can use whatever you want, under your 'Exercise Files', under 'UI Card Examples', and they're just ones that use images and text, that's what I was kind of looking for. See these things here, there's a card, it's got, this one's quite an in-depth one, right? There's a heading and body copy, kind of like what we've got in an image, very different from the card that I'm trying to make here. So have a look, sizes, ways they're laying it about, there's a few examples in there, go find your own, Google images or Dribbble, and look at "card," or "ui card design" would be the easiest term to use. 

What then? Now we're going to start, up until now we've been doing stuff, and kind of just keeping it to yourselves, or uploading it to the assignments, what I'd like to do is share some of this stuff for feedback now from the group. So we've got a friendly group on Instagram, Twitter, Facebook group and LinkedIn, whatever your home base is, whatever you like the most, take a screenshot of two things, take a screenshot of this, these two bits, and your style guide. 

So upload them to the assignments part as well, in the class projects, but also take screenshots and upload both of those, just so I can see what you've done. You can ask for feedback, I'm on Facebook, I'm on all the places as well, I get a little bit overwhelmed, so I've got help from teaching assistants, creative friends of mine, that help out and kind of review and give feedback, and it might just be like, "Hey, good work," that might be what you're looking for, or if you're like, "Hey, I don't know what I'm doing, what am I doing wrong?," just let us know in the comments, when you do post stuff, we're a friendly bunch, go check them out. 

All right, that is it, I will see you in the next video, a little bit of work there, not too much, and again, we're not really looking for design, like if you, if you hate your colors and you hate your fonts, that's okay, this is not what this is about, this is a software course, let's get the skills up, let's get practicing, and don't worry if you're not super proud of where you're at just yet, be proud that you started. All right, next video.