This lesson is exclusive to members

Figma UI UX Design Essentials

Class Project 03 - Icons

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, not homework. We are going to be doing something around icons, so if you haven't already, I want you to go and make sure that you add the three icons along the top, that we've kind of done in the class, and then on your own, I want you to add this section down the bottom here, on the Confirmation page, just a, like a prompt, to ask people to share their purchase, and when they click on this it'll pre-fill out their Facebook page, or their Twitter tweet about, "Hey, I just bought these great headphones, check them out here, at this link." 

When you are doing this you're going to kind of start dabbling with our persona, so in my case, Sarah here, she's in her late 20s, so I feel like I can be a little bit, not as explicit with my language , because if somebody else maybe is a little less technologically savvy, born in a different decade, they might need a bit more explicit, "Click this button, to upload to your social media," and to share with your friends your, what you have purchased, it might have to be a bit more deliberate. 

So my persona, she's not like 20, so she, she gets the gag or the joke, or the inference without being too explicit, also she-- these are the social media icons that I feel, I'm not going to put them all there, don't you hate sites that just have like, here's the 40 different social media platforms that you might share on it. I've excluded a bunch because I feel like her age group, what else, like, she's working for herself, so probably has a LinkedIn profile, and it's not going to be corporate. So she's probably going to be okay sharing her new headphones purchase, and everyone's using Facebook still. 

So, like use these sorts of what should I have here, go back to persona, decide what's going to be in there. It might be wrong, like I might have got these totally wrong, and my client's going to come back and go, "Why isn't there Reddit there," or some other thing that's new, and TikTok-ey thing, but this is something that I feel like it's worth testing. We might add more to these later on, and hopefully in our user testing, there will be some feedback, like, "Hey, where is that thing" - that I don't even know about - "why isn't that there?" 

All right, so that is it, so the top Navs, I want you to find icons from, I don't want you to draw them, I want you to find existing ones from either a free site, just to practice the svg stuff and, or plug-in , install your plug-in, get it working so you can get stuff out. There's a little bit of text there that goes on there, choose the appropriate icons, we've talked about that, add them to the Confirmation page, take a screenshot, and upload it to the Assignments, Projects, Comments, and that's an example. 

Actually, before you go, if you are using plugins, which I think you should, get it installed, have a go with it, it doesn't have to be Iconify, use something else. Sometimes when you are dragging things from plugins, let's say, it depends on the size of them, like let's say I drag in this Facebook one, sometimes you're like giant F, and it just makes everything really tough, in terms of your layers when you're new, so I'm going to undo that. 

Often it can be - undo - it's just easier just to find, an empty part of your artboard and just drag it off there, because then they're on their own, in their own little kind of frame, and I can drag off a bunch of these, where are they, and what else we got? I can drag up a bunch of these, and I can scale them down and get them appropriate, and then bring them in rather than trying to push them around in there, and they ended up inside of groups or frames, that they shouldn't be, that's my advice. When you're finished with the plugin, close it down, you guys are gone, and yeah, I'll see you in the next video.