Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:12Length:1.3 hours
140786 adam noonan thumbnail figma 02 400x277px 102417
  • Overview
  • Transcript

2.4 Working With the Pen Tool (Vector Networks)

It’s time to learn about a feature called “vector networks”, Figma’s own way of working with the pen tool. It’s really easy to use and super intuitive, so let’s get to it.

Related Links

2.4 Working With the Pen Tool (Vector Networks)

Hello, and welcome back to this course. In this lesson, you are going to learn about a Figma feature called Vector Networks. This is basically Figma's take on the Pen Tool. But compared to a traditional Pen Tool, it's a little bit easier to use and more intuitive. So you would access the Pen Tool by using the shortcut P or clicking this icon. And then, it's just a matter of drawing your shapes. So if you want to draw a rectangle, you would make that out of four points. So one, if you wanna create a straight line, just move your cursor until you see a red line, and that's gonna show you that it's a nice straight line. And then you create the third point. And then the third, and then the fourth point. And now, you have successfully created a shape. Now, if you want to color the inside of the shape, you would get this Paint Bucket Tool, and you would fill the inside, all right? It's very easy. Double-clicking a shape will enter Edit mode. And here, you can basically take any of the points, you can move them around. You can delete one of them if that's what you want. But this is where things get a bit different. Because normally, if you would do that in an app like Sketch or Illustrator. By deleting that point, you'll get a connection between these two points and you'll still get a fill color. But not here, here is different. Because you can use the Pen Tool to basically draw anything you want, whenever you want. So, you want to add another point to this? Well, it's fine. Simply create another point here and then just maybe connect it with this one, all right? Maybe you wanna create another shape here. So in this, maybe I want to color these and these. So when I hit Done and I change the fill color, only those two will be colored. How cool is that? And I can have access to the underlying path any time I want. I can select individual points, move them around as I see fit, add more and maybe bend certain points. So I can click on one of those, and I can grab this handle. I can bend it, all right? Maybe I can bend this one as well. Of course, I'm not demonstrating a particularly good-looking technique here but it gets the job done. Yeah, and once I'm done, I can simply double click and Exit. Of course, by doing this, it's really easy to create simple shapes, like maybe a cube. So you would start with a rectangle like this and then you would start from here. Maybe you draw a path like this, maybe like this, and then may be like this. And then you would start from here, And then you close it here, right? Pretty cool. Now, of course, This can be resized. It can be colored, you can change the stroke color to whatever you want. Now, you can not only move points, you can move entire paths if that's what you want. So you can select this bit, you can move it around, and the others will adjust accordingly. How cool is that? Maybe you want to move this a little bit and create a shape like this. Or maybe you want to move that. So it's really easy to manipulate these paths. Maybe I want this to be a bit larger and maybe I want it to look a bit like that and a bit like that. And from a cube, we've now ended with something completely different, right? And of course, as I said previously, you can grab a Paint Bucket Tool and choose what portions of this you want to paint. So, for example, only this will get the paint treatment. And that's a very quick look at the Vector Networks, or the Pen Tool inside Figma. Now, if you want more details, check out the lesson notes. I've included some relevant links there. Now in the next lesson, we're gonna have a look at a very interesting feature in Figma called Components. I'll see you there.

Back to the top