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

Strokes plus updating color defaults in Figma

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

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 look at Strokes, strokes around the outside, that's the line around the outside here. We'll look at Burger menus, which is just a group of lines, but we'll also look at the ends here, can you see, they've got nice little rounded lines, instead of this kind of like big flat end on the edge. We'll look at setting some of the defaults, that every time we draw something, like a rectangle, it is kind of set to the rounded corners, and the Stroke, we like, and the color, we like. There's a few things we cover in this video, all right, let's jump in. 

So let's do our Stroke, we're going to click on the rectangle, the Stroke is this one here. By default you get a Fill, you don't get a Stroke. To add a Stroke, hit the little '+' button, and we've got a black Stroke around the outside. The Stroke Width, we can drag, I'm going to put in just two for mine. Do you have to have a Stroke around stuff, you don't, but we're learning stuff. 

The one thing you will get annoyed about later on, is if you do have like a Style, you know, you've decided that this green, with that Stroke around the outside, and you're like, "Okay," I'm going to draw another one, on this Product Details here." 'R' for my Rectangle tool, you're like, "Ah, it's gray," it's gray again, it's got no Stroke, and no rounded corners and you're like, "Okay." So I'm going to go over here, and I'm going to change it to 5, and go slightly mad, trying to get the Eyedropper tool. 

So what you can do is, you can get to a point, you're like, "Actually, I like that, I like my rounded corners, I like my green, I like my Stroke," and I can go change it as the default. So let's go to our little 'Figma' icon here, and go to 'Edit', and there's this one here, it says 'Set Default Properties', nothing really happens, except, that word appears, but now if I click off, grab my Rectangle tool, draw something out, look at that, I've got a sweet green rectangle, with black line around the outside, and yeah, rounded corners. So that is how you set the defaults, I'm going to leave that. 

Another thing you can do is, because these are already drawn in the past, I can't go, like, I don't know, I want it to now look like this. So we don't have Style set up, which we'll do later in the course, what you can do is you can click on this guy and say, 'Edit', 'Copy his Properties', these are his properties over here, and we're going to copy them, and we click on him. Doesn't matter what color he was, if we go to 'Edit', 'Paste Properties', it comes along. We can click more than one, I've got the two rectangles, and let's go 'Edit', 'Paste Properties', there we go. 

So that's Stroke, let's look at a bit more Stroke, we're going on a bit of a tangent there, with setting the defaults, let's look at doing our little Burger menu at the top. So I'm going to zoom in, remember, 'Command +' on a Mac, 'Ctrl +' on a PC, and kind of get up here-ish to get started at least, and let's look at, let's drop down the rectangle. So you just kind of click and hold it, will show you other things. I'm going to use the Line tool, and I'm going to use my Line tool to click, hold, and drag, that didn't work, I don't know why, Click, hold, and drag, it will try and be straight, if it's kind of not straight enough for you, hold down the 'Shift' key.

Shift key will do something with the Line tool, remember, it did with the Circle tool, it made a perfect circle. With the Line tool, it just makes it go in kind of some, you know 45º, 90º, and straight, So I want something kind of that long, don't worry about how long it is just yet, we'll make it, then we'll go out to 100%, and kind of make it the right size. So we're going to grab this guy, we're going to have three of them, so we're going to either copy and paste, remember, copy and paste has that weird option, where it's, well, it's not weird but it's over the top of it. 

So remember, I tend to just use the Selection tool, hold down my 'Option' key on a Mac, 'Alt' key on a PC, and just drag another version out, and it really wants to go underneath it, which is great. I'm going to introduce one more shortcut, if you're like, "If this guy introduces another shortcut here I'm going to scream", close your eyes, or your ears. I'm going to introduce you to the 'Command D' or 'Ctrl D', really common in Figma, it just means, do it again, okay, duplicate, do it again, whatever you want to call it. 

So 'Command D', will just do the last thing I did, so I can go 'Command D', 'D D D'. It's great when you're doing like lists and images, and you've got four of them, you just want to kind of like make a new one, it doesn't matter what you're doing it with. So let's say I want some Type, and I'm making a list, drag it out, holding my 'Option' key on a Mac, 'Alt' key on a PC, 'Command D', 'D D D D', or 'Ctrl D', 'D D D D' on a PC. You can open your ears now, people that are screaming about my shortcuts. 

So with these lines here, you're like, "How big should the Nav be?" The best way is to copy an existing template, so I'll show you kind of some of the templates that Figma's got, but if you are building stuff on your own, especially things like icons, it's best to be, remember, at Shift 0, or at 100% up here, so that you've got a good sense of the size, because if you have them like this, they're going to be very hard to click, or if they're going to be big jumbo ones it's just not that fun, well, they don't look like they should, I got lucky with mine, I think mine are appropriately sized here. 

So what you can do is just drag a box around them all, grab the corner and scale them to what you think they should feel like, that feels good to me. I'm going to put them in a kind of appropriate position for navigation, it's called the Burger menu or the Nav sandwich, that thing you click, that gives you all the sort of options, really common, in the top right, but can appear in the top left as well. So let's look at a bit more strokey goodness, so I'm going to zoom in on it, because I want the little bubble ends. 

Now over here, my Stroke, the Stroke Weight, we've talked about, so Start and End point, they do two things, click on the first one, you can put an arrow at the end, that's great. If I hit undo it doesn't go away, maybe this is just on my machine, I don't know why, undo, undo, that's one of those quirks. I'll leave it in this course because it's a weird quirk, is it just on my computer, no, I think it's universal, but it's probably going to be gone in the future, it's one of those updates where it's on somebody's, some developer's bug fix list, it's not super important because I can go back to None, but my undo doesn't turn those off. We've gone off on a tangent, let's stay on point, because I want to show you these, there's three options.

So your Stroke at the moment just finishes right at the end, can you see there, the second one, I'm going to go, this Stroke has a rounded end, and that is the pretty one that I want. So the Stroke still ends there, but there's this like little round, that's a Butt cap, that is a Round cap, and this is going to be a Square cap. So this one here, look at the difference, between this top one and the bottom one. The Stroke is the same size, underneath, but this has got like a big square cap on the end, this has got an unfortunately named Butt cap, and that has got a nice round cap, that's what I want. I want all you guys, you'll see mixed quite a lot, if you've selected stuff, and it doesn't know what to say, instead of going, question mark, I'm confused, it says, Mixed, which means one of them, there are all sorts of different things. I'm going to say, you're all round, which only partially worked, oh yeah, why not do it at the end as well, there we go. 

So what have we learned, there are some quirks to Figma, like the undo with the arrows, we've learned about Strokes, actually, the last thing I want to do is, with images, we've written, Product Shot, but it's actually more common to just, draw a big cross through the middle, as a placeholder for an image. So I'll just great grab my Line tool, and I'm going to go from this corner over to here, and this corner, got to go back to the tool every time, cool. So it'd be really common to have that as like, that's kind of a visual cue that there's an image to come here, but it's not available right now. 

The other thing you might do, just while we're on the topic, is, instead of those lines - I'm going get rid of them for a second, and bring them back. - is we can put in a, like an icon that shows an image. So a really common one for this is an icon, I'll show you, so it's in your Exercise Files, so how do you bring in an image or an icon? You can go up to, there's couple of ways, there's this way here, so it's weird, under your Rectangle tool is where you bring in images as well. 

So I can place an image, there's the shortcut, the other way, is under 'Figma' you can go to 'Edit', no, 'File', 'Place Image', use the shortcut quite a bit, but I'm going to bring in an image, under your 'Exercise Files', under 'Icons', bring in the one that says 'Icon Image', and click 'Open', and within them-- with this, if you bring in an image, you click once, it'll come through, gigantic size, or whatever size that it was. I'm going to undo, go back to my 'Import Image', find him again, is you can click and drag, and it gives you a more appropriate size, and what you'll notice is that it's squishing it, which is, killing me inside. 

Never leave your icon like that, and hold down the 'Shift' key, if you want to drag it out, remember, same thing with like the lines making them go straight, and the rectangle being perfectly square. That would be very common as well for placeholder image, we are going to not do that for the moment, I don't mind, I don't really care. Lines, actually no, keep the lines there because we're going to look at, something in the next video that is kind of reliant, on having a couple of diagonal lines there. 

All right, that is Strokes 101, let's get into the next video.

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