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

Class Project 01 - Create your own brief

This lesson is exclusive to members

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:05:40
SECTION: 27
Thumbnail update 4:10
SECTION: 28
Exporting 34:21
SECTION: 29
What next 15:53

Questions

2
1
1
1
1
1
1
2
1
1
1
1
1
1
1
1
1
1
1
1
2
1
3
1
1
1
1
2
2
2
2
2
2
2
2
2
2
2
2
2
2
2
3
2
1
1
1
1
1
1

Student class projects

0 0
Avatar

Danica Mladenovic

@danicaMladenovic
0 0
Avatar

Maz Maz

@mazMaz

Hi! I don't know much about armchairs, but I went along with it!
0 0
Avatar

Srbislava Popović

@srbislavaPopović
0 0
Avatar

Conor Fenner-Toora

@conorFennerToora
0 0
Avatar

Jennifer Cardoso

@jenniferCardoso
0 0
Avatar

Sandro Jandieri

@sandrojandieri
0 0
Avatar

Chloe Lewis

@chloeLewis
0 0
Avatar

Thomas Dillon

@thomasDillon
0 0
Avatar

Michelle McNeil

@michelleMcNeil
0 0
Avatar

Heer Patel

@HeerPatel
1 0
Avatar

Khan Tihema

@khanTihema

Brief for design
0 0
Avatar

Mudita Mathur

@muditaMathur

This is my Brief.
1 0
Avatar

Michał Pawełoszek

@MichałPawełoszek
1 0
Avatar

Tobias Jürgens

@tobiasJürgens
0 0
Avatar

Anastasiya Terebus

@anastasiyaTerebus
2 0
Avatar

Arafat Ibrahim

@arafatIbrahim
1 0
Avatar

David Lindblad

@davidLindblad
1 0
Avatar

Fanni Almási

@fanniAlmási
1 0
Avatar

Farouk Hamzaoui

@faroukHamzaoui
1 0
Avatar

Venice Ayque

@veniceAyque

This is an interesting brief. I will get to work on an alcohol beverage that caters to man in their early 40's. I am excited to create a brand for this.
2 0
Avatar

xiangling Zhang

@xianglingZhang

this is my brife
1 0
Avatar

David Reisinger

@davidReisinger

Accidentally started the Wireframe project using the advanced Figma brief, so tweaking a few details in my projects and saving the Punk Rock brief for the advanced course!
1 0
Avatar

Ena Karadžin

@enaKaradzin
1 0
Avatar

Melina Sica

@melinaSica
1 0
Avatar

Roberto Puddu

@robertoPuddu
1 0
Avatar

Sritam Tripathy

@sritamTripathy
1 0
Avatar

Diego Escala

@diegoEscala
1 0
Avatar

Alex Yoon

@alexYoon
2 0
Avatar

Michael Temple

@michaelTemple
1 0
Avatar

Alina Umarova

@alinaUmarova

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.

Downloads & Exercise files

Transcript

Hi everyone, it is time for your very first bit of home, we're not going to call it homework, we're going to call it class projects. They're here to-- you can ignore them, you totally can, but it will really help you solidify what we've learned, and my goal is, so that you can create something through this course, that is unique from the course material that I'm making, that is great for your own portfolio. 

The first one is to create your own Brief, so we saw in the last video that, I made a Brief, where is my Brief? So that's my one, what I want you to do is, go to this website that we've just created here, so randomprojectgenerator.com, I want you to enter your last name, or your pet's name, or a friend's last name, somebody's name, for the company, and enter your location, in Rio, it was where I was born.

You can put in, you know, Ireland as a country, if you're in a big country put in your state or town, whatever it is, and then click 'Generate My Project'. Make sure you're on the 'UX/UI' tab there, and click 'Generate My Project', and you should get something unique for you. So I've got shadow surfboards, oh, it's kind of cool, so this gets randomly generated, do not hit 'Retry', the red button is red, I just want you to pick the first one you got, even if you're like, "Hmm." 

Some of the more tricky objects, and tricky personas, is one of those things that will really help build you as a designer, don't hit it, and yeah, have a little read through. So you're going to get something unique, and it's going to be unique in some ways, as in the company name and the product, but the actual thing we'll build together will all be the same kind of structure. 

So we'll follow the same task flow, you're going to use Home page, Product Features, Checkout, and Confirmation, whatever the product is, and it just means though that when you do start following along, we're still going to draw a button, and it's still going to say, Learn More, but you're going to be using colors, that are good for your persona, and when I say bring in an image, instead of bringing headphones, you're going to bring in surfboards, or whatever your product is. 

You're still going to have an image in a circle, so they're going to have the same structure, but at least at the end, you're going to have something, kind of unique for your own portfolio, plus it's going to get you thinking about your own persona, and how you might kind of design for them, you get the idea? 

So follow along in this course, but using your own company name, - which I'll get you to make a little bit later on. - and picking your own images and colors for that brand. So once you've done it you either take a screenshot of it, or copy it to clipboard, or download it as a png, and just store it away on your computer or your phone, ready for later in the course. 

We're going to put them together, on a kind of a 'Brief & Taskflow' page later on. Another thing I want you to do, so we've got our kind of company name and persona, so you've downloaded it, copy to clipboard, something, you've got it somewhere stored away, and let's bring in the task flow as well, because we're all using the same one. 

So it's going to allow me to show you something strange, weird, I don't know, interesting for Figma. Figma really wants everything to be in the cloud, online, so go back to your kind of Home page, or if you're on a PC, go to the little Figma icon, go to the one that says, it's about here, it says, go to files or something similar, be on your drafts, and if you want to import a Figma file, rather than it being shared with you, you see this little icon up here, Import, look for that icon, it has moved around in the past, give it a click, and in your Exercise Files there's one called taskflow.fig, load that in there, and we'll use that later on as well. 

 You can open it, have a look, basically, it is just our task flow. We'll copy and paste that, and combine it later in the course, but you've got your task flow, you have got your own brief release, persona and name, and you're ready to carry on. So go do that as homework, and I will see you in the next video.

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