2.1 Drawing Tools Overview
In this lesson, we’ll start by going over Figma’s vector drawing tools: the pen, pencil, and primitive shape tools.
2.1 Drawing Tools Overview
Hey, this is Kezz. Welcome to Figma for SVG. We're gonna start at the beginning of this lesson and go over the drawing tools that Figma gives you for creating vectors. If you're familiar with vector drawing applications and you've used them a fair bit before, then everything's gonna be pretty familiar. So what we're gonna focus on is how you can use the settings that are available for each of the tools here, specifically in Figma. And also, we're gonna talk about the drawing tools that you have here in Figma relate to the SVG code that Figma is gonna generate for you. So one of the things you wanna consider when you're doing vector work, specifically for the purpose of producing SVGs, is what kind of SVG element is gonna be used to represent what you're doing in your design program. You basically have two categories. You have your basic shapes. You can see them listed here. We've got rectangle, circle, ellipse, line, polyline, and polygon. And then for everything else, everything that can't be done with these basic shapes, then you have a path, which is just a free-flowing shape that could be anything. And the reason that this is relevant is that, generally speaking, if an element of your design or the graphic that you're creating can be produced in SVG using a basic shape, it's gonna need less code to create the same result than a path element will. So when you do your design work in Figma, it's a good idea to understand how each of the available tools are gonna relate to those basic shapes or the path element that's in SVG. So if we look along the toolbar here, these are our drawing tools here and here. So we've got a bunch of shape tools along here, and then we've got the pen and pencil here. And both the pen and pencil, which I'll demonstrate in just a moment, will produce shapes that are going to be exported in SVG as path elements. So even if you use these tools to make a rectangle, it's not gonna actually be exported as a rectangle. It's gonna be exported as a path element. Now, in this drop down here, we have a bunch of shapes. So a rectangle is gonna give you a rect element when you export to SVG. A line will give you a line element, and an ellipse will give you an ellipse element, however, the other shapes in here aren't actually going to produce SVG shapes, technically speaking. The arrow, the polygon, and the star are all gonna produce a path element. There is no arrow element in SVG, so it couldn't be produced as a basic shape anyway. There is a polygon element that could be used to produce these polygons or stars, but Figment doesn't use those elements. It exports polygons and stars as paths. Let's take a little bit closer of a look of what we can do with each one of these shapes. We'll just focus on the rectangle to start with. In pretty much any vector program, the whole reason for there being a primitive shape there is that it gives you some sort of common shortcuts to do common styling tasks that you need to do with a shape. For the rectangle in Figma, those shortcuts include the ability to round out the corner. So you've got these little handles here in the corner. So you just drag them and then that changes out the radius of the corner. And if you go over on the right here, you can see that our radius is mirrored up here. So whatever we've dragged this radius out to here, so we've got 61, that's gonna be reflected up here. And if you click this button, then you can actually have a different radius for each one of the corners. So now, I can drag this radius out to be different to all the others. So that lets you create some pretty irregular shapes. So that's pretty much everything you need to know about the rectangle. We have the ellipse, and you can see we have a drag handle here, as well. This lets you create different types of arcs. I'm just gonna go over these fairly quickly, cuz a lot of this you can probably just find by exploration yourself. We've got polygon. You can change the number of sides up here. Just gives you that shortcut, and then you can also change the radius of each one of those corners, the different types of shapes. You've got the star tool, which is effectively just a different type of polygon. So you can change the number of points up here. And you can change the angle of those points, and once again, you can drag here to alter the radius, and you've got a few different drag handles that you can work with. The line tool. You can change the rotation of it, here. That's probably not really that necessary because, obviously, you can just draw out a line, On whatever angle that you need. The main relevance of this line tool to SVG is that when you use the line tool, instead of using the pen tool, you're going to get a line element in your resulting code. And then, the last one is the arrow tool up here, which as I mentioned, is technically not really a shape, it's a path tool. And to change the size of the arrowhead, when you first draw out a line, you're not gonna see the arrowhead at all. What you actually need to do is come down to the stroke here, and then increase the size of the stroke. So the size of the arrowhead is going to be determined by the width of the overall stroke. All right, so then we've also got our path drawing tools. We've got the pen. This is the mainstay of any vector design application. So you just click, To draw out your points. We've got some settings up here, but we're gonna actually talk about these settings in the next lesson. If you point and click, you're going to get sharp corners, but if you click and drag, then you're gonna get round corners. If you start a path and you don't want it to be self-closing, just hit Enter to complete the line, and that's pretty much everything that you need to know about the pen tool. And then finally, we have the pencil tool, which is just a freehand drawing tool. It's probably gonna be a little bit difficult to use the pencil tool effectively for SVG creation, unless you have a really steady hand, because there isn't any type of a stabilizer or node reduction, or cleanup tool in Figma yet. So you would either have to manually adjust all the points in your path afterwards to get your shape looking just right, or, as I said, have a really steady hand and be able to draw out exactly the shape that you need to. All right, so that's an overview of all of the drawing tools in Figma. So just to recap, you've got all of your basic shapes here, which correspond with the basic shapes of SVG. You have your path tools, here, which will give you a shape that's going to be represented with the path element in SVG. When you draw out your shapes, look for the little drag handles to help you modify the settings, and look over here on the right side of the interface to find additional settings. And when you're working with the pen, point and click for sharp corners, click and drag for round corners, and hit Enter if you want to finish off an open-ended path. All right, so next up, once you've actually got your shapes drawn, you're gonna wanna know how to edit them. So in the next lesson, we're gonna look at how you can edit the objects that you've created in Figma, how you can manipulate the nodes. And we'll check out a couple of the vector editing tools in Figma, like the bucket tool and the curve tool, and we'll take an initial look at something called vector networks. Which, at the moment, is unique to Figma, and it's really cool. So we're gonna step through all of those things in the next lesson. I'll see you there.