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

buy this class

$00

Buy Class

Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2000+ more >

79.7K Students

99% Recommend this Class

00 Student Work

0 Video lessons in HD
00h 00m of class content
Exclusive bonus content
Lifetime access, anywhere, anytime
Streaming access on desktop and mobile browsers
Download and offline access with class purchase
Offline sync with our iPhone & iPad apps
100% satisfaction guarantee

Daniel Walter Scott

Multi-award winning, influential media designer & Adobe Certified Instructor with 15+ yrs of experience.

SEE INSTRUCTOR'S CLASSES

topics covered in this class

UX Design

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!

2,000+ classes ranging from fundamentals to advanced techniques.

Strokes Plus Updating Color Defaults In Figma

Strokes Plus Updating Color Defaults In Figma

Lesson Info

12. Strokes Plus Updating Color Defaults In Figma

Lessons

Introduction to Figma Essentials

Getting Started with Figma Training

What Is Figma For & Does It Do The Coding?

What's The Difference Between UI And UX In Figma

What We Are Making In This Figma Course

Class Project 01 - Create Your Own Brief

What is Lo Fi Wireframe vs High Fidelity in Figma?

Creating Our Design File & Introducing Frames In Figma

The Basics Of Type & Fonts In Figma

Rectangles, Circles, Buttons And Rounded Corners In Figma

How To Use Color In Figma

Strokes Plus Updating Color Defaults In Figma

Object Editing And How To Escape In Figma

Scale vs Selection Tool in Figma

Frames vs Groups in Figma

Class Project 02 - Wireframe

Where To Get Free Icons For Figma

Matching The Stroke Of Our Icons

How To Use Plugins In Figma For Icons

Class Project 03 - Icons

How to Use Pages in Figma

How to Prototype in Figma

Prototype Animation and Easing In Figma

Testing On Your Phone with Figma Mirror

Class Project 04 - Testing On Your Phone

What is Smart Animation & Delays in Figma?

Class Project 05 - My First Animation

Sharing & Commenting on a Figma File with Stakeholders

Sharing & Editing With Other Ux Designers In Figma

How I Get Inspiration For Ux Projects

How To Create A Mood Board In Figma

Class Project 06 - Moodboard

How to Work with Columns & Grids in Figma

Tips, Tricks, Preferences, and Weirdness in Figma

Color Inspiration & The Eyedropper In Figma

How To Create A Color Palette In Figma

How to Make Gradients in Figma

How to Create & Use Color Styles in Figma

Class Project 07 - Colors & Columns

Fonts on Desktop vs in Browser in Figma

What Fonts Can I Use? Plus Font Pairing In Figma

What Common Font Sizes Should I Choose In Web Design?

How to Make Character Styles in Figma

Lorem Ipsum & Placeholder Text In Figma

Useful Things To Know About Text In Figma

How To Fix Missing Fonts In Figma

Class Project 08 - Text

Drawing Tips And Tricks In Figma

Squircle Buttons with ios Rounded Courses In Figma

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

What Is The Difference? Union vs Flatten In Figma

Class Project 09 - Making Stuff

Smart Selection & Tidy Up in Figma

Do I Need To Know Illustrator With Figma?

Tips & Tricks For Using Images In Figma

Masking & Cropping Images In Figma

Free Images & Plugins For Figma

Do You Need Photoshop For Ux Design In Figma?

Class Project 10 - Images

What Is Autolayout & Expanding Buttons In Figma?

Class Project 11 - Buttons

Auto Layout For Spacing

How To Use Constraints In Figma

Combining Nested Frames Auto Layout & Constraints in Figma

Adding Text Box Autoheight to Autolayout in Figma

Class Project 12 - Responsive Design

Nice Drop Shadow & Inner Drop Shadow Effects In Figma

Blur Layer, Background Blur & Image Blur in Figma

How to Make Neumorphic UI buttons in Figma

Class Project 13 - Effects

How To Save Locally & Save History In Figma

What are Components in Figma?

Updating, Changing & Resetting Your Components

You Can’t Kill Main Components In Figma