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

Matching the stroke of our icons

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

3
9

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.

How to earn your certificate

Work your way towards your certificate for this course by following these simple steps.

  • Watch the course videos
  • Complete the Class Projects - look out for the videos marked with
  • Upload your class projects into the My Projects area in your account
  • Complete and pass the Knowledge Quiz (Merit level courses only)
  • Complete the Distinction Certificate Project (Distinction level courses only) - look out for the video marked with
  • Upload your Distinction project to the My Projects area in your account
  • Request your certificate when you've completed the requirements for the certificate level you're working towards

Good luck!

Pass certificates

We’re awarding ‘Pass’ level certificates for this course.

You can work your way towards your ‘Pass’ certificate by following these simple steps.

  • Watch the course videos
  • Complete the Class Projects - look out for the videos marked with
  • Upload your class projects into the My Projects area in your account
  • Don’t forget to request your certificate when all your projects are complete

Good luck!

Merit certificates

We’re awarding ‘Merit’ level certificates for this course.

You can work your way towards your ‘Merit’ certificate by following these simple steps.

  • Watch the course videos
  • Complete the Class Projects - look out for the videos marked with
  • Upload your class projects into the My Projects area in your account
  • Complete and pass the Knowledge Quiz
  • Don’t forget to request your certificate when you have passed the quiz and completed all your projects

Good luck!

Distinction certificates

We're awarding 'Distinction' level certificates for this course.

You can work your way towards your 'Distinction' certificate by following these simple steps.

  • Watch the course videos
  • Complete the Class Projects - look out for the videos marked with
  • Upload your class projects into the My Projects area in your account
  • Complete and pass the Knowledge Quiz
  • Complete the Distinction Certificate Project - look out for the video marked with
  • Upload your Distinction project to the My Projects area in your account
  • Don't forget to request your certificate when you have passed the quiz and completed all your projects

Good luck!

Downloads & Exercise files

Transcript

Hi everyone, in this video we're going to bring in some icons, that I've got in our Exercise Files. We're going to try and match them so that they look, the Stroke widths kind of match this first one, and I'll show you how to replicate them across all our artboards, so yeah, let's dig in. 

All right, let's bring in some icons and get them all tidied up, so that we can use them. So we're going to use the long way still for the moment, using the little arrow there, 'Place Image', I want one, two, and three, so I want 'Icon-Share, 'User', and 'Home'. I'm just holding down the 'Command' key on a Mac, and just clicking them individually, on a PC it's 'Ctrl', I'm going to open them up. 

Now what's the key I hold down to make sure they don't go all squiggly, 'Shift', that's it. So I'm going to get mine to our size, don't worry about the size at the moment, am going to drag these in. Now what will end up happening is, the size here will depend on the last kind of Stroke size that you're working with. So sometimes you might drag them, and they might be thick like this, or might be super thin.

One thing we need to do though is, get them all to be very similar. I've got them kind of a similar-ish sort of size, what I want to do though is scale them down, and you've got to decide here, whether you're just going to use the normal Selection tool, or our fancy Scale tool, it'll depend on what you want to do. 

So in my case, can you see, the Strokes are kind of staying at that 2 point, so it's kind of getting-- if I get them down to about there, they're kind of close, or you can use the Scale tool and just scale them down, they all go down, and we can adjust them afterwards. I want them down to about a, size-ish, and get them into that position. So import them, get them down to kind of this position, and we're going to try and match these now. 

Now you've got to decide whether-- I'm twirling all these up, these are frames, just like groups with stuff in them, if you're happy to work like this now, we'll just leave them there, you can pull these out and delete the frames. What I'm going to do is leave them, so my Share icon in here, with that selected, you can see in here, I need to go inside of it because I want to click on this thing, came in with a group inside of it, but with it selected, actually, I can go in here, and I can see the Stroke color. 

In my case I don't need to change it, because it's matching what else I've got, but the Stroke width is about 2, that's what I used here, and I want to try and match these all. So same with this one, sometimes I can't see the Stroke yet, so I need to go inside the frame, and click on both of these. I'm holding 'Shift' to select both of them, and it's scaled down to like 0.5, you can see there, so let me just type in "2". 

This one here, this is not a terrible thing, but the way this has been drawn is that, it's not a nice little Stroke, it's actually a Fill. If I double click it and go to editing mode, it's not like lines that are on top of each other. If you're an Illustrator person from way back, you'll know what I'm talking about, if you're not, and kind of new to this vector world, you will just find some of them that are made of Strokes, and this one is actually made up of a Fill, it makes a little bit harder to adjust. 

So for this one, to make it thinner, I literally have to go and do stuff like this, which is no fun at all. So you might just download a different one, or just draw one. We're going to draw, you could easily redo that with the Line tool, so I'm going to undo, double click to get out, and Scale wise, these probably need to come down a little bit, and this is where I don't want to be using my Scale. 

If I use Scale now, and scale it down to the right size, it might look like this one here, but if I go inside of it, double click, you can see, it's no longer 2, it's 1.8, that can catch you out, probably nobody's going to notice, but I notice, you'll notice. So we're just going to use the Selection tool to do the scaling, and it means that, holding Shift, it means it'll retain being a two-point stroke, you get what I mean? Oh, broke that, I'm going to leave it, it's broken forever, I can't live with it. 

All right, I'm back, so what we're going to do now is, get those three in, get them kind of looking the same, I feel like this one maybe is not looking exactly the same, "Don't spend too long in there, Dan," this is just a wireframe. What I want to do is, I want to show you another, not trick, but a useful thing in Figma is, I'm going to delete these, because what I want to do is have that on all of them. 

So what I'm going to do is copy it, so from this first one, click on the name of Product Details, and just hit paste. So I'm using 'Ctrl C' and 'V', on a Mac you'll use con-- oh, that's a PC, so PC uses Control C and V, and a Mac uses Command C and a V. So you just 'Command V' on all of these, and gets it back exactly where it got it off that first frame, which is cool. 

So do that, I'm not going to spend too long, getting all the spacing perfect on this, because we're going to have to go and test this on a phone because like, are they too big on a phone, probably, are they far enough apart, probably not, my big old fat fingers is going to end up touching more than one icon. So we'll do that when we actually test on our phone, but we've found our icons, we've got them in there, we've got them looking kind of the same, that'll be good for now, let's get into the next video.

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