Skip to main content

Strokes Plus Updating Color Defaults In Figma

Lesson 12 from: Figma UI UX Design Essentials

Daniel Walter Scott

Strokes Plus Updating Color Defaults In Figma

Lesson 12 from: Figma UI UX Design Essentials

Daniel Walter Scott

buy this class

$00

$00
Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2200+ more >

Lesson Info

12. Strokes Plus Updating Color Defaults In Figma

<b>In this lesson we will cover what strokes are in Figma. We will also take a look at burger menus and setting defaults for our strokes.</b>

Lessons

Class Trailer
1

Introduction to Figma Essentials

02:53
2

Getting Started with Figma Training

03:06
3

What Is Figma For & Does It Do The Coding?

03:46
4

What's The Difference Between UI And UX In Figma

05:22
5

What We Are Making In This Figma Course

09:18
6

Class Project 01 - Create Your Own Brief

04:01
7

What is Lo Fi Wireframe vs High Fidelity in Figma?

02:34
8

Creating Our Design File & Introducing Frames In Figma

08:29
9

The Basics Of Type & Fonts In Figma

10:51
10

Rectangles, Circles, Buttons And Rounded Corners In Figma

06:50
11

How To Use Color In Figma

05:45
12

Strokes Plus Updating Color Defaults In Figma

09:28
13

Object Editing And How To Escape In Figma

01:47
14

Scale vs Selection Tool in Figma

02:39
15

Frames vs Groups in Figma

09:24
16

Class Project 02 - Wireframe

03:00
17

Where To Get Free Icons For Figma

09:10
18

Matching The Stroke Of Our Icons

05:16
19

How To Use Plugins In Figma For Icons

04:31
20

Class Project 03 - Icons

03:48
21

How to Use Pages in Figma

08:31
22

How to Prototype in Figma

10:46
23

Prototype Animation and Easing In Figma

10:53
24

Testing On Your Phone with Figma Mirror

05:40
25

Class Project 04 - Testing On Your Phone

03:51
26

What is Smart Animation & Delays in Figma?

08:44
27

Class Project 05 - My First Animation

02:01
28

Sharing & Commenting on a Figma File with Stakeholders

07:10
29

Sharing & Editing With Other Ux Designers In Figma

06:58
30

How I Get Inspiration For Ux Projects

06:39
31

How To Create A Mood Board In Figma

05:33
32

Class Project 06 - Moodboard

01:26
33

How to Work with Columns & Grids in Figma

13:54
34

Tips, Tricks, Preferences, and Weirdness in Figma

07:21
35

Color Inspiration & The Eyedropper In Figma

06:34
36

How To Create A Color Palette In Figma

09:02
37

How to Make Gradients in Figma

07:09
38

How to Create & Use Color Styles in Figma

08:01
39

Class Project 07 - Colors & Columns

04:00
40

Fonts on Desktop vs in Browser in Figma

01:30
41

What Fonts Can I Use? Plus Font Pairing In Figma

06:01
42

What Common Font Sizes Should I Choose In Web Design?

11:30
43

How to Make Character Styles in Figma

06:36
44

Lorem Ipsum & Placeholder Text In Figma

04:28
45

Useful Things To Know About Text In Figma

09:35
46

How To Fix Missing Fonts In Figma

02:42
47

Class Project 08 - Text

05:19
48

Drawing Tips And Tricks In Figma

09:38
49

Squircle Buttons with ios Rounded Courses In Figma

02:48
50

Boolean, Union, Subtract, Intersect and Exclude with Pathfinder in Figma

07:25
51

What Is The Difference? Union vs Flatten In Figma

03:36
52

Class Project 09 - Making Stuff

03:29
53

Smart Selection & Tidy Up in Figma

08:40
54

Do I Need To Know Illustrator With Figma?

04:15
55

Tips & Tricks For Using Images In Figma

06:11
56

Masking & Cropping Images In Figma

09:12
57

Free Images & Plugins For Figma

02:31
58

Do You Need Photoshop For Ux Design In Figma?

10:40
59

Class Project 10 - Images

01:17
60

What Is Autolayout & Expanding Buttons In Figma?

10:27
61

Class Project 11 - Buttons

01:15
62

Auto Layout For Spacing

05:47
63

How To Use Constraints In Figma

08:22
64

Combining Nested Frames Auto Layout & Constraints in Figma

11:54
65

Adding Text Box Autoheight to Autolayout in Figma

08:27
66

Class Project 12 - Responsive Design

02:19
67

Nice Drop Shadow & Inner Drop Shadow Effects In Figma

05:56
68

Blur Layer, Background Blur & Image Blur in Figma

05:57
69

How to Make Neumorphic UI buttons in Figma

07:37
70

Class Project 13 - Effects

01:53
71

How To Save Locally & Save History In Figma

05:42
72

What are Components in Figma?

06:19
73

Updating, Changing & Resetting Your Components

07:47
74

You Can’t Kill Main Components In Figma

07:22
75

Where Should You Keep Your Main Components In Figma

05:02
76

Intro To The Forward Slash / Naming Convention In Figma

08:55
77

Class Project 14 - Components

00:44
78

How To Make Component Variants In Figma

06:41
79

Another Way To Make Variables In Figma

06:14
80

How to Make a Multi Dimensional Variant in Figma

11:13
81

Class Project 15 - Variants

01:41
82

How To Make A Form Using Variants In Figma

12:52
83

Class Project 16 - Form

01:27
84

Putting It All Together In A Desktop Example

19:44
85

How To Add A Popup Overlay Modal In Figma

03:03
86

How To Make & Prototype A Tool Tip In Figma

07:26
87

What are Flows in Figma?

05:39
88

Slide In Mobile Nav Menu Overlay In Figma

03:55
89

Class Project 17 - Prototyping

01:10
90

How To Pin Navigation To The Top In Figma

10:17
91

How To Make A Horizontal Scrolling Swipe In Figma

06:36
92

Automatic Scroll Down The Page To Anchor Point In Figma

04:50
93

What are Teams vs Projects vs Files in Figma?

05:18
94

How Do You Use Team Libraries In Figma

11:03
95

The Difference Between Animation & Micro Interactions

02:55
96

Animation With Custom Easing In Figma

25:36
97

Class Project 18 - My Second Animation

01:54
98

How To Make Animated Transitions In Figma

12:34
99

Class Project 19 - Page Transition

01:31
100

Micro Interactions Using Interactive Components In Figma

05:54
101

Micro Interaction Toggle Switch In Figma

04:23
102

Micro Interaction Burger Menu Turned Into A Cross In Figma

04:23
103

Class Project 20 - Micro Interaction

01:35
104

How To Change The Thumbnail For Figma Files

04:10
105

How To Export Images Out Of Figma

07:40
106

How To Share Your Document With Clients & Stakeholders

07:09
107

Talking To Your Developer Early In The Figma Design Process

03:55
108

Sharing Figma With Developers & Engineers Handoff

06:07
109

What Are The Next Level Handoffs Aka Design Systems

03:18
110

Class Project 21 - Finish your design

04:57
111

What Next?

06:08

Lesson Info

Strokes Plus Updating Color Defaults In Figma

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 ge 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 round the 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. All right. So let's do our stroke. So we're going to click on the rectangle. The stroke is this one here by default. You gotta fill, you don't get a stroke to add a stroke, the little plus button. OK. And we've got a black Stroker on the outside. Uh the stroke width we can drag. OK? I'm gonna 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 y...

ou will get annoyed about later on is if you do have like a style, you know, you've decided that this green with that Stroker on the outside and you're like, ok, I'm gonna draw another one on this product, uh, details here, ah, for my rectangle tool and you're like, oh, it's gray, it's gray again. It's got no stroke and no rounded corners and you're like, ok, so I'm gonna go over here and I'm gonna change it to five and go slightly mad trying to get the eyedropper tool. And 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 to the default. OK? So um let's go to our little fig icon here. OK? And go to edit and there's this one here that says set default properties. Nothing really happens except that word appears OK? But now if I click off, grab my rectangle tool, draw something out. Look at that. I got a sweet green rectangle with a black line around the outside and yeah, right of corners. So that is how you set the defaults and I'm gonna leave that. And 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. OK? 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. OK? And we go copy them and we can click on him and it doesn't matter what color he was. If we go to edit piece properties, it comes along. OK? We can click more than one. Got the two rectangles. OK? And let's go edit pa properties. Here we go. OK? So that's stroke. Let's look at a bit more stroke. We got on a bit of a tangent there with setting the defaults. Um Let's look at doing our little burger menu at the top. So I'm gonna zoom in and command plus on a Mac control plus on a PC. You can kind of get up here 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 and it'll show you other things. I'm gonna use the line tool. OK? And I'm going to use my tool to click, hold and drag. That didn't work. I don't know why. OK? Click, hold and drag. OK? It will try and be straight if it's kind of not straight enough for you. OK? 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 degrees, 90 degrees 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, um, you know, 100% and kind of make it the right size. So we're gonna grab this guy, we're gonna have three of them. So we're gonna 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. Counter Mac A PC and just drag another version out and that really wants to go underneath it, which is great. I'm gonna introduce one more shortcut if you're like this. If this guy introduces another shortcut here, I'm going to scream, close your eyes, your ears. OK? I'm going to introduce you to the command D or control D really common in fig. OK? It just means do it again. OK? Duplicate, do it again. What do you want to call it? OK. So command D we'll just do the last thing I did. So I can go command DDDD. It's great when you're doing like lists and images and you've got four of them and 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 and a PC command, ddddd or control ddddd on a PC. OK. You can open your ears now with the people that are screaming about my shortcuts. Uh So with these lines here, you're like, how big should the N A be the best way is to copy an existing template? I'll show you kind of some of the templates that fig's got. OK? But if you are building stuff on your own, especially things like icons, it's best to be member at shift zero. OK? Or at 100% up here. So that you've got a good sense of the size. OK? 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 just not that fun. Well, they don't look like they should. So 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. OK? And I'm going to put them in a kind of appropriate position for a navigation. So it's called the burger menu or the NAV sandwich. OK. Uh 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 stroke. Goodness. I'm gonna zoom in on it because I want the little bubble ends. Now, um, over here my stroke, the stroke weight we've talked about. Ok, so start an endpoint. 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, it's probably gonna be gone in the future. It's one of those updates where it's on, somebody's some developers 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 and 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 gonna go, this stroke has a rounded end and that is the pretty one that I want. Ok. So it's 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 gonna 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, ok, 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 just says mixed. OK? Which means one of them, there are all sorts of different things. I'm gonna say you all round which only partially worked. Oh Yeah, when I did the end as well, here we go. Alright. So what have we learned? There are some quirks to fig like the undo with arrows. Uh We've learned about strokes. Actually, the last thing I wanna do is with images. OK? And we've written p uh you know, 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'm just gonna grab my line tool and I'm gonna go from this corner over to here in this corner. You gotta go back to the tool every time. Cool. So it'd be really common to have that as like a that's kind of, you know, 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 gonna 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 it. Um So it's in your exercise files. So how do you bring in an image? OK. Or an icon. Um You can go up to, there's a couple of ways um There's this way here. OK? 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 fig A, you can go to edit no file place image, use the shortcut quite a bit. But um I'm gonna bring in an image under your exercise files and icons bring in the one that says icon, image OK? And click open and with, with this OK. If you bring in an image, you click once it'll come through at gigantic size or whatever size that it was. I'm gonna undo go back to my uh 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 the inside. Never leave your icon like that. Um Hold on the shift key. OK? If you want to drag it out, remember same thing with like the lines making them go straight and the rectangle being perfectly square. So that would be very common as well for uh you know, placeholder image. We are going to not do that for the moment. I don't mind, I don't really care lines actually, you know, 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. So, all right, That is strokes 101. Let's get into the next video.

Class Materials

Bonus Materials

BYOL_Figma_Cheatsheet.pdf
Exercise_Files_-_Figma_Essentials.zip

Ratings and Reviews

Mahyar Hassid
 

Great class, Daniel drops so much knowledge in every video and in all the in between unexpected moments that helps speed up your process!

Student Work

RELATED ARTICLES

RELATED ARTICLES