How to create a moodboard in Figma

Hi everyone, in this video we're going to take our inspiration screenshots, put them into something that looks half decent as a Mood Board, and I'm going to show you how to do the quick and dirty version, depending on the Mood Board's use case. All right, let me show you how to do it. 

To create a Mood Board, you've got kind of two Mood Boards, you've got the Mood Board for yourself, as a designer, and then the Mood Board that you're going to send to the stakeholders. Now I hate the word stakeholders as much as you do, maybe you don't, it's management speak, but UX world, everybody's a stakeholder, that's, people like the client is one of the stakeholders, it might be the people financing it, it might be, it might be the user at the end. It's kind of like a nice round all term for everybody, but I hate it, it's like, thinking outside the box is another one I hate. Moving forward and maybe giving 110%, all of those management things, I'm allergic to, I hate them, but hey, stakeholders. 

So the one that you are doing, remember, for yourself, can be really rough and ready, all I tend to do is I just zoom out, go find my Mood Board screenshots, and just go up and just dump them all on, and Mood Board made. Maybe I'll stack them up a little bit closer to here, and I just use it to like get ideas for fonts, and colors, and layouts, and that is Mood Board, simple number one. 

Now it can get a bit messy, can you see they're not in a frame. So just to make life a little easier, what I tend to do, you could see the example before, I totally didn't, but I'm going to make this, I'm going to lay it out so it's at least a little bit manageable, give me a sec. Now you saw that I just dragged them onto my desktop, from my kind of Finder window, you can do that, or you can use the normal find, 'File', 'Place Image'. 

What I should do though is put them in a frame, so that I can kind of tidy up this, so I can say 'Frame Tool', drag one out, and it just, because I dragged it over everything they all fell into place, I can call this my Mood Board. You can get fancier and create a page that's called Mood Board, and copy all into it. I don't want that, I'm going to undo that, because I want to be able to see it while I'm working, but depending on your workflow. 

Now a fancy one that I'm going to have to send to a client, I'm going to make, I'm going to-- the weird thing about a Mood Board is, for a client it's not going to be a bunch of UI stuff and colors, it's going to have to, because they're going to come back to me and say, "Why is there a shoe there? Why is this here?" I'm going to have to be a lot more deliberate with my Mood Board, and know who it's going to. For myself I can dump any old junk on here, and be happy. For my client, I need to make it look better, and it needs to be a little bit more clear about my direction, because this thing, plus that thing over there are not a clear direction, they're not going to go, "Yeah, that's a great idea, let's use, I like the direction that you're heading with your Mood Board," because there is no direction. 

So to design a fancy one you could just do exactly what I'm doing here, add strokes around the outside, fancy it up with colors, lay it all out nicely, scale it all around using our K tool for Scale, and get them all nicely laid out, or you could use one of the templates. There is a bunch of templates in our community, so back to 'Home', make sure you're on 'Community', there's a little option here, and you can see, let's go to our 'Community', you type in "Mood Board", cool. 

There's just lots of pre-laid out ones for you, you might decide that you like this one, so I'm going to click on it, I'm going to click 'Duplicate', remember, duplicating means it's now part of my Figma file, and you can see a bunch of layers. Now, if you can't see them here, there's an example Mood Board, so it's going to end up looking something like that. You can tell how much nicer that is, I can't tell where I'm going. 

One little shortcut while we're here is 'Shift 1', Shift 1 kind of zooms out to show you everything that's on the document, and that can be really handy. Put that in the middle and then smash 'Command +', or 'Ctrl +' on a PC, and you can see they've created this on. On this, they've created some Mood Board structures, you might just copy that, paste it, and start adding your images. Now we're going to cover images a lot better later on, but let's say you like Layout D, you can double click it to go inside this component, click on this rectangle and just go to our 'File', the F, 'Figma F', 'File', 'Place Image', and pick one of these, and go, there you go, or do none of that and just click on it, and you can see, it's gone inside, double click it, move it around. 

 We're going to cover cropping and images later on, but just wanted to give a sense now, at this point of my design, Mood Boards are getting created, and you can either just do the one for yourself, dump it in a frame, don't really care, or a lot more considered Mood Board, that I'm going to go to my client with and say, "Hey, this is the direction, before I start designing and moving, picking colors and choosing fonts, this is the style that I'm heading towards, what do you think?," and they can give you feedback like, "No, I want to look like the Apple website," or, "No, I want it to be a lot more urban and hip," I think you are instantly not urban and hip if you say it, like I just did there, I don't claim to be urban and hip, but you get what I mean, right? 

Like they're going to give them a sense of where you're going, before you start doing it, because it's-- that dialogue is really important, because you can spend ages making a UI that they just don't like. All right, that is it for Mood Boards, let's move on to our next video.