Note: If you have a different UI than in the course, you can change it back by clicking the '?' in the bottom right corner of Figma and select 'Go back to previous UI'. Happy Figma'ing!

Figma UI UX Design Essentials

How to create a moodboard in Figma

Course contents
SECTION: 1
Getting Started 30:36
SECTION: 2
Wireframing - Low Fidelity 11:03
SECTION: 3
Type, Color & Icon Introduction 1:12:34
SECTION: 4
Pages 8:32
SECTION: 5
Prototyping - Level 1 30:08
SECTION: 6
Animation Level 1 10:46
SECTION: 7
Commenting 14:09
SECTION: 8
Moodboard - High Fidelity 13:40
SECTION: 9
Columns 13:54
SECTION: 10
Tips & Tricks 7:21
SECTION: 11
Colors 34:48
SECTION: 12
Text & Fonts Advanced 47:48
SECTION: 13
Drawing 35:41
SECTION: 14
Working with Illustrator 4:16
SECTION: 15
Images 17:55
SECTION: 16
Working with Photoshop 11:58
SECTION: 17
Autolayout & Constraints 52:08
SECTION: 18
Effects 15:30
SECTION: 19
Saving & History 5:42
SECTION: 20
Components & Instances 36:15
SECTION: 21
Variants 23:04
SECTION: 22
Making a form 34:05
SECTION: 23
Prototyping - Level 2 43:01
SECTION: 24
Teams & Projects 5:19
SECTION: 25
Libraries 11:03
SECTION: 26
Animation & Micro Interactions 1:00:51
SECTION: 27
Thumbnail update 4:10
SECTION: 28
Exporting 35:21
SECTION: 29
What next 14:53

Questions

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

Course info

114 lessons / 12 hours 29 quiz questions 22 projects Certificate of achievement

Overview

Hi there - my name is Dan Scott & welcome to Figma Essentials.

Together - you and me - are going to learn everything you need to get started working as a UX Designer using Figma.

You can try Figma for free by clicking here.

We’ll use this UI UX design tool to create beautiful User Interfaces and engaging prototypes. Most importantly... we'll cover the client expectations of you as a new UX designer. 

This course is aimed at people new to design, new to User Experience design. Even if you’re not totally sure what UX really means, don’t worry. We’ll start right at the beginning and work our way through step by step. 

First we’ll describe the brief & how to work with a UX persona.  

Then you’ll learn how to create simple wireframes.  

From there we’ll look at how to implement colours & images properly in your designs.

You’ll learn the do’s & don’ts around choosing fonts for web & mobile apps. 

You’ll learn how to create your own icons, buttons & other UI components. 

You’ll learn some pretty scary terms such as Components, Constraints & Multi Dimensional Variants. They are all really easy to understand once you know how. 

We’ll also make our lives easier by using free UI kits & plugins for Figma which will speed up our workflow dramatically!

We’ll build a simple Style Guide ready for client handoff. 

You’ll understand how to make both simple & advanced micro interactions, page transitions & animations 

Before the end of this course you will have made fully interactive prototypes 

You will take a project all the way through -  collaborating with other team members and exporting the right files ready to hand off to your developer or software engineer. 

We’ll be focusing on the software Figma but I’ll make sure to explain the techniques & terms used in the UX and how real world projects are run. You will develop a great understanding of the industry and will be able to manage your own UX projects.

I will be setting assignments through the course which will help develop your skills and enable you to create something special and unique for your own portfolio. 

Alright - it's time to upgrade yourself & go from Figma Zero to Figma Hero.

Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

Certificates

We’re awarding certificates for this course!

Check out the How to earn your certificate video for instructions on how to earn yours and click the available certificate levels below for more information.

Downloads & Exercise files

Download Exercise Files

Transcript

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.

Bring Your Own Laptop
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2024