7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 7Length: 38 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.2 Vector Editing

Once you've got the hang of drawing vectors, you’ll need to be able to edit them. In this lesson we’ll see how vector editing is done in Figma, and how you can manipulate nodes, curves, and segments.

2.2 Vector Editing

Hey, welcome back to Figma for SVG. In the last lesson, we looked at the tools that you can use to draw shapes out in Figma. And in this lesson, we're gonna look at how you go about editing those shapes, and the nodes that comprise them in Figma. So in most vector editing applications, when you create a shape, if you want to get in and edit the nodes, then you need to convert that shape into a path before you can do so. That's not the case in Figma, process for editing a predetermined shape in Figma is the same as it is for editing a path. So here I've got a predetermined shape, I've got a rectangle and over here I have a path. In both cases, if I wanna get in and edit the nodes, then I can either double-click and you'll see the toolbar along the top has changed. Or with the item selected, then I can press this button here, edit object. When you are editing a predetermined shape, even they don't have to specifically run a command that turns that shape into a path, once you do go in and start editing the nodes it's gonna make that conversion for you. So what that means is you're gonna lose these shortcuts, these radius draggers, and the tools that you have over on the right-hand side. So If I double-click in here, and I start dragging the nodes around, then when I come back out of that editing mode. Now, when I hover over, you'll see I don't have any radius dragging handles anymore. However, I'm just gonna undo. So I've got that back into shape format. If you do, go into vector editing mode and you don't change anything. You realize that you wanna preserve this as a basic shape and you haven't done anything yet and you exit. Then at that point you are still gonna retain those shortcuts. So now let's take a closer look at the actual editing mode. So I'm gonna jump into this shape. Some things in editing mode are the same as in other vector applications and some are different. Just clicking and dragging nodes is the same to rearrange them, there's nothing different in that area. If you want to add nodes in all you need to do is hover over any line that you wanna add a node to and click, so it's gonna give you that extra node. When you wanna delete a node, this can be a little bit confusing at first. If you have your node selected and you just hit Backspace, then it's gonna completely open up your shape rather than deleting a node and then filling the resulting gap. I'm just gonna undo that. What you wanna do, if you need to delete a node but keep the rest of your shape intact is press Shift+Backspace instead. Another point of difference to other vector editing applications is that usually you can hover over a line and then drag it out. But with Figma if you hover over a line and you click and drag you're gonna end up adding another node, which is not necessarily what you want. So if I want to bend this line then what I wanna do instead is come up here and grab the bend tool. Now, I can bend this line as much as I need to. Alternatively, I can leave the move tool selected and, instead of actually switching to the bend tool, I can just hold down Ctrl and that temporarily toggles the bend tool on. And then when I release control, it puts me back to the move tool. And the next thing in Figma that is a little bit different to other vector editing programs is how you change how the nodes behave. So in most programs, if you select a node, you'll then have button summary interface that lets you switch that node in between a sharp state, and a smooth state, and a symmetrical state. But with Figma, the concept that is used is a little bit different. Instead it uses this setting up here called mirroring. With this rather than focusing on the node here having a particular type of behavior. It's focusing on the behavior of the drag handles that come off the node and what kind of mirroring there is in between those two drag handles. So I'm just gonna bend this. Line out so that we get these two drag handles coming off this node. Then I'm gonna show you how this mirroring setting works. Right now, it's set to have no mirroring. So you can see that there's no relationship really in between these two drag handles. They have independent lengths, and they have independent angles. But if I change this to, say, mirror the angle, now that's not gonna take affect until you actually drag one of these handles around. But now if I drag you can see that once I started moving the handles around the two of them snap together so that they have a mirrored angle. But right now this drag handle is still shorter than this one. So what I can also do is change the mirroring up here, to say mirror the angle and the length. Now when I drag, you can see that they both share the same length and the same angle. So it's a subtle difference. It's a focus on the drag handles, rather than the node. The results are the same but it's just a little bit of difference in how you conceptualize these different settings. One of the really cool things that Figma going for it that I haven't seen in any other application yet, now that it's doing it you might see it in other applications later, but it has something called vector networks. So you usually, if you have one node then you just have two segments coming from it. This segment here and this segment here, but with Figma you can actually have multiple segments coming off any single node. So, if I come up here and grab the pen tool so that I can add to this path and I select this node. Now, I can actually start running extra segments off that node and I can bring out as many different segments of this node as I please. And that then brings us to the relevance of the bucket tool up here. Again, Figma is doing things a little bit differently to other applications. You would think that a bucket tool would be about applying a preselected color onto an area but it's actually not. In the case of figma, what the bucket tool does is it just toggles a fill area off or on. So because we can have these sorta complicated shapes via vector networks, the ability to toggle these fills on and off becomes relevant and becomes useful. And then finally the last thing that I wanna cover is the fact that you can duplicate a whole segment by clicking Alt and dragging on that segment. So I'm just gonna curve this segment out, so you can see it a bit more clearly what I'm talking about. Now, if I hold down Alt and then I hover over this line, you'll see that there is a double pointer icon that's appeared that's letting me know that I'm in a duplication mode. Now, if I drag this segment out, I get a duplicate of this segment here. In that case, by dragging out the segment I have a path that's sorta separate from the rest of the shape. But if instead I drag a node then the resulting segments are gonna stay connected to the rest of the shape. I'll show you what I mean. So, if I select this node, now hold down Alt, hover over that node. And again, you can see I've got that double pointer, and now I drag out. I'm not just dragging the node by itself. I'm also dragging out the segments that stay connected to the shape. Then I can come up here, and I can grab the bucket tool, and I can toggle the fill for this new section on. And by the way, if you decide that you wanna join this segment back onto the original shape, then you can just grab the pen tool. Click one end and then click to where you want it to join. And then the same thing up here. And then once again, if you want to toggle the fill on for that area, just use the bucket tool. And that is everything that you need to know about editing vector objects in Figma. There are a lot things in Figma that are done just a little bit differently to other vector editing programs. Sometimes they're just small, subtle differences, but they are things that you do need to kind of get used to when you're making the switch over to using this for your SVG designing process. So now we've got our drawing process down, we've got our vector editing process down. But of course, a vector is nothing if it doesn't have color attached to it in the form of fills and strokes. So in the next lesson, we're gonna go over how you can add fills and strokes to your vectors in Figma. I will see you in the next lesson.

Back to the top