2.3 Applying Fills and Strokes
A vector isn’t much without its fills and strokes. In this lesson, we’ll look at how to apply fills and strokes in Figma, including gradients.
2.3 Applying Fills and Strokes
Hey, welcome back to Figma for SVG. So far we've gone through how you can draw vector shapes in Figma and also how you can edit those vector shapes. Now we're gonna look at how you can apply fills and strokes to your shapes in Figma. So on the screen here, I have a rectangle with neither any fill nor strokes applied to it. The first thing that I'm going to do is show you how to add a fill. So over on the right here, you can see that we've got this section called fill. To add a fill to your shape, you just hit the plus button here. And by default, it's just going to fill it with a flat gray shape. If you want to enter a specific color and you already have the code for that color, then you can just click in this field here and change the color. Or if you want to pick a color on the fly or change it to a gradient. Then click the little color tile instead, then in here, you'll have a standard color picker, same as in pretty much any design program. You've got your hue slider along here. You can change your values and saturation up here, and you've got an opacity slider here. And one of the cool things about Figma is it will collect up the colors that are being used in your document and put them in a pallete here for you to choose from. So I've got off to the side, A couple of shapes with colors already set in them. So Figma has picked up on the presence of those colors and it's added them here to this palette so that I can easily apply them. If you don't want a flat color, instead you want a gradient, there's no gradient tool. You need to do it in the application of gradients here in the color picker. So up in the top left you hit this little drop down in here, you can change from the solid color state into any one of these gradient fills. Some of these gradients will work fine in SVG, and some of them won't. We're gonna go over which ones can and can't use in a later lesson. So for now, I'm just gonna show you how gradient application works in a linear gradient. First have to set the color of your stops, you'll just need to click on either one of these squares here. The squares represent the stops and from there you can change the color of your stops. I'm just going to change that first stop to this blue color. You can also select your stops up here. I'll change that stop to this color. If you wanna add new stops, then all you need to do is hover at the point that you wanna add the stop in. And click, and you'll get that extra stop. To get rid of it again, just make sure it's selected and then hit Backspace. If you wanna change the position of a stop, then come up here and hover over the stop, and you're gonna see this moving cursor. Then you can drag that position or if you wanna change the angle of the gradient, you're gonna have to hover a little bit to the left, so that you can grab the ends of the gradients. They can be a little finicky because the cursor isn't going to change. You just have to make sure that you're hovered over the thing that you're actually trying to drag. So the end of the ingredient versus the stop. You can also apply multiple fills in Figma. So if I come up here and first I'll just close the color picker app. And I hit this plus button again, now I get another fill over the top of the fill that I have underneath. So now I can do the same thing, I can come in here, and I can mix up my gradients to create some interesting styles. You'd be able to make all kinds of different sort of impressions of shape by mixing up these different gradients. So if you want to also toggle off being able to see the different gradients, then you've got this little visibility button here. And of course, you can change up the opacity of any of these fills as well. These fills work a lot like layers in a typical graphic design program. Right, now, on to strokes. They work almost exactly the same way that fills do. So you hit the plus button to create your stroke, you have the same set of color picker tools. So you can click on the little tile, choose your color, and you can also choose to use a gradient on your border, as well. And same thing again, you can just click and drag it around. Those gradient tools are exactly the same as with the fill. You can increase the size of the stroke with this drop down list here or by just clicking inside, and then directly entering in the width of stroke that you want. And then you can change the alignment of the stroke here between a centered stroke, a stroke inside, and a stroke outside. You can also create multiple strokes in the same way that you can create multiple fills. Hit that plus button again and we get an extra stroke. But the tricky part here is that the width setting and the alignment setting apply to all of your strokes. That might be something that changes later. But for now it means that you can't do something like having a thin dark stroke on the inside of a shape and a thicker, lighter stroke on the outside, for example. So really the usefulness for the multiple strokes in Figma comes down to if you want to sort of layer one type of stroke on top of another and blend them together to create a sort of a joint look. But with the fill you do also have the option to choose an image to fill in a shape. But given that what we're working with here is SVG, you're probably not gonna want to use images as fills very much. We wanna try to keep our code size and our loading size pretty small. So that's not really relevant to SVG, the main thing you wanna focus on is just how to use the flat fill colors and the gradient tools. All right, so that is how you work with fills and strokes in Figma. It's pretty straightforward, Figma makes things quite smooth and intuitive to work with. Just a couple of things to bear in mind, there's no specific gradient tool. You need to go into the color picker to modify your gradients. You can have multiple fills and strokes, but you can only have one line of size in alignment settings for your multiple strokes. And as you're putting your document together, Figma will collect up all of the colors that you're using and give them to you in an easily accessible document colors palette. I mentioned that some of these fills can export probably to SVG, and some of them can't be recreated in SVG. And I'm gonna show you which things can and can't be used for SVG design. But before we get there, seeing as I'm gonna be showing you things that center on exporting, we're gonna cover how you actually export SVG from Figma. There's a few different ways that you can export SVG from Figma. So we're going to go over that in the next lesson before we move onto talking about things you actually can and can't export successfully to SVG format. So we're gonna go over how you actually go about exporting SVG and what kind of options you have available to you in Figma in the next lesson. I'll see you there.