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 09 - Making stuff

This lesson is exclusive to members

Course contents
SECTION: 14
Working with Illustrator 4:16
SECTION: 19
Saving & History 5:42
SECTION: 24
Teams & Projects 5:19
SECTION: 27
Thumbnail update 4:10

Questions

1
1
1
1
2
1
1
1
0
1
1
1
1
1
1
2
2
1
1
2
2
3
2
4
2
1
3
3
1
2
1
2
1
1
1
2
1
1
1
1
1
1
1
1
1
1
3
1
1
1

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

Oh man, another class project, ah, you're enjoying it, I hope you are. So this one here is kind of filling in for a chunk we've done, a lot of drawing stuff. Basically this stuff here, the icons and the buttons, click the frame, 'Shift 2' zooms it right in, there you go. 

These three along the top of these two buttons, so what do you have to do? Make buttons with text in it, just like the ones I did, you don't have to, you can decide on your buttons, you don't have to do the squiggle edges or-- I've done an outline version, you might use different colors, might be square edged, but get those going, and I want you to create three icons. I've picked these three boring ones, that we've been kind of making in the class, but you can pick any three, actually, make sure one of them is the Nav, which is an easy one to make, but hey ho. 

So make three of them, and you've got to draw them yourself, you can't go off and find them from icon places, I'll know, I've seen them all, every single one of them. So pick three, any three you like, what I'd like you to do though is, hey, if you've got a little bit more time do five of them, pick any five, and if you're super keen I want to see you do them all. See if you can crack all of these guys. 

Now I've put them in what I think is the most easiest to draw down, so, hardest one, shopping cart, easiest one, burger menus. So you're going to pick only three, go for the hard ones if you feel like you can, but anyway, all I really need is three, but do as many as you can. 

Now one little note is, when you are drawing icons, icons aren't easy, so don't worry, if you're drawing them, and they all don't quite match, and look a bit horrible, that's not what the goal of this here is, it's, the goal is to practice drawing. So I'd like to see the ones you've done, both with the projects and assignments section, plus on social media as well. You're not going to be judged based on like how amazing they are, it's about showing where you're at right now, and getting some maybe feedback from other people. 

Now a good start for drawing icons is to start with a square, it can be any size, but it can be quite nice to start with 'R' tool, draw this out, and make it a width and height of about 48, it's a really common kind of icon designing size, and it just means, when you're drawing in that, draw your icon inside, and kind of use the edges. 

You don't have to go with complete edges, but just know that these little units, you're going to stack these icons next to each other, so it can be handy to draw them inside squares, just to give yourself some boundaries, and know, like when I drew this one, it does feel a bit, not quite wide enough, so I tried filling it out and ended up making like a short squat person. 

You'll notice as well that I have rounded the shoulders, I feel like he's not much of a bouncer anymore, anyway. So three icons, make some buttons, and I want you to give it a test, test it on your phone, just to see, are the buttons easily clickable, can they be seen, is the font big enough on your buttons, can it be smaller, can it be bigger, just to give it a little test of what you make. 

The deliverables here are screenshot of what icons you've created, three, five, all of them, and take a screenshot of your Home page kind of laid up like that, this guy, 'Shift 2', don't need this. Upload it to the assignment/project section, and I'd also love to see what you make on social media as well. 

So screenshots, icons, screenshot, home page, off you go, enjoy the drawing, I'm interested to see what you actually create, all right, next video.

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