2.4 Creating Vector Networks With the Pen Tool
In this lesson, you’ll learn about working with vector networks and the Pen Tool. A vector network is a unique feature in Figma, and it takes using the Pen Tool to the next level.
1.Introduction2 lessons, 06:09
2.Getting Started With Figma6 lessons, 44:41
3.How to Use Figma as a Designer3 lessons, 50:38
4.How to Use Figma as a Developer2 lessons, 08:11
2.4 Creating Vector Networks With the Pen Tool
Welcome back to the course. In this lesson, you're gonna learn how to work with the pen tool, and also with vector networks. And a vector network is probably one of the most unique features in Figma. So let's have a closer look at it. Now traditionally, most design tools work with the pen tool in the following way. You would click and create multiple points. And then eventually you would come back to your starting point, and you would close that path. It doesn't work in any other way. But with Figma and with vector networks, you can do stuff like this. You can create a line here, and then you can create a line like so, and then you can create a line like so. And you just created an arrow. So notice these open-ended paths. Well, you can't really do that very easily in traditional design software. But with Figma and with vector networks, it's really simple. You can even create more complex shapes. So using the pen tool or P, you can draw something like this And then maybe something like this, you can hold down Shift to snap this to 45 degree increments. Let's draw a nice little cube here. Cool, and when you're done, just hit Done here or press Enter, and now you have a cube. To enter the vector edit mode, you can select the vector, hit Enter or this little button that says Edit Object. So now what you can do with these vector networks is that you can select any line, Or any point, And just move them around, delete them, add new ones, it's really, really simple. Now, Figma does this very simply for us. Notice that when I hover on a line, it gives me the option to create a new point right in the middle of that line, see? And if I click that, I just created a new point, very simple. Now, I can also press B or select the paint bucket tool to add colors, To my different shapes. So notice that if I hover on a shape that's already painted, I get a little minus inside the the little drop, so that means it's gonna remove the fill. But if I hover on a shape that doesn't have a fill, I get a plus sign, and I can add a fill to that, which is pretty cool. Now, I can also click the bend tool or press Ctrl or Cmd. And when I click on a point, it's gonna transform that point, it's gonna add Bezier handles so that I can create curves, really simple. I can also do that, by the way, When creating the vector. So I can click, and I can click and hold and then move. And that's gonna create, This type of shape. Now, that's the pen tool. The pencil tool, Is more of a freehand version of creating vectors, right? So this is just another vector that I can, of course, enter edit mode and I can grab any of the points. And I can delete that point, I can move it around, I can change its curve using the Bezier handles, I can do a lot of things with it. But probably, most of the time, you'll be using the pen tool. Now, since we're on the topic of vector networks, you should know that any shape that you create within Figma is a vector. For example, let's take the rectangle. Right, if we select this and we enter Edit Object, it gives us the exact same controls that we had previous. We can select any of these points, we can move it around. You can hold down Shift while pressing Delete or Backspace, and that's gonna automatically delete and heal, so it's gonna connect Those remaining two points. So if you were gonna do that with just a simple Delete, it's gonna look like this. But Shift + Delete, it's gonna connect the remaining points. Now at any point, you can select this,and you can add a stroke, you can change the position of the stroke, of course, the stroke color. And you can also define how the joints are, you can create some nice rounded corners here. You can add dashes to this if you prefer. And overall, it's really, really simple to work with these vector networks. So what can you use this for? Well, a lot of things, from creating simple icons like the arrow I showed you previously, to creating illustrations, or creating some complex shapes like this. But vector networks are basically used for any basic shape that you create. I showed you the rectangle previously, here's how a star will look like when you enter vector edit mode. It's exactly the same thing. Same goes for an ellipse or a circle, here's a circle. And if we press Enter, we can see that it's made up of four points that produced these curves that are basically identical. All right, and that's how you can create and edit vectors in Figma. Now, as I was saying earlier, Figma is an interface design tool, and usually, interfaces use grids. It's really easy to work with grids in Figma because there is built-in functionality for that. So let's have a look at it and see how it works in the next lesson, I'll see you there.