You Need to Adjust That Vector Shape, But It’s Not Cooperating
You’ve imported an icon or sketched a custom shape in Figma, and something’s just slightly off. A curve isn’t smooth, a corner is too sharp, or the entire silhouette feels unbalanced. You know you need to move the individual points that make up the vector path, but clicking and dragging doesn’t seem to work as expected. The shape warps in strange ways, or you can’t seem to select the specific point you need.
This is a common hurdle when moving from basic rectangle and ellipse tools to the powerful world of vector editing. Figma’s vector networks are incredibly flexible, but understanding how to manipulate their points—the anchors that define every line and curve—is the key to unlocking precise design control.
Whether you’re fine-tuning a logo, customizing an illustration, or creating a unique UI element from scratch, mastering point manipulation is a non-negotiable skill. This guide will walk you through not just the basic click-and-drag, but the nuanced techniques for selecting, moving, converting, and adjusting vector points to get exactly the shape you envision.
Understanding the Building Blocks: Paths, Points, and Handles
Before you start moving points, it’s crucial to know what you’re looking at. In Figma, a vector shape is made up of paths. These paths are defined by vector points, also called anchor points or nodes. Each point has a specific position on the canvas.
There are two primary types of points you’ll encounter:
– Corner Points: These create a sharp angle in the path. Think of the corners of a triangle or a star.
– Smooth Points: These create a curved, continuous path. The points on a circle or a wave are smooth points.
Smooth points have additional control elements called Bezier handles. These handles extend from the point and dictate the direction and “pull” of the curve as it enters and leaves that anchor. Moving these handles changes the curvature without moving the anchor point itself.
When you use the Pen Tool to draw, you’re placing these points. When you use the Shape Tools, Figma generates a path with pre-defined points. Your goal is to learn how to take command of this underlying structure.
Entering Vector Edit Mode: The Essential First Step
You cannot edit a vector shape’s points from the default selection tool. This is the most common point of confusion. To begin, you must enter Vector Edit Mode.
Select the vector shape you want to edit with the Selection Tool (the arrow, or press V). Then, do one of the following:
– Double-click directly on the shape.
– Press the Enter key on your keyboard.
– Click the “Edit Object” icon in the top toolbar that appears when the shape is selected (it looks like a small vector point with a pen).
The interface will change. You’ll see the shape’s path outlined, with all its vector points visible as small, hollow diamonds or squares. The shape itself may appear in a “wireframe” view. You are now in the correct mode to manipulate points.
The Core Techniques for Changing Point Positions
With the shape in Vector Edit Mode, you can now select and move individual points. The Direct Selection Tool (press A) is automatically active in this mode, but you can also use the Selection Tool (V) to click on points.
Selecting and Dragging a Single Point
Move your cursor over the vector point you wish to adjust. The cursor will change to a four-way arrow when it’s over a point. Simply click on the point to select it—it will fill in with color. Then, click and drag the point to its new position. The connected path segments will update in real-time.
For precision, you can use arrow keys on your keyboard to nudge a selected point by 1 pixel at a time. Hold Shift while using the arrow keys to nudge by 10 pixels. This is ideal for minute adjustments.
Selecting and Moving Multiple Points Simultaneously
To change the position of several points together, you can select multiple points and move them as a group.
– Click and drag a selection marquee around the points you want to select.
– Hold down the Shift key and click on individual points to add them to the selection.
– Once multiple points are selected (they will all be filled), click and drag any one of them. All selected points will move together, maintaining their relative positions.
This is incredibly useful for adjusting entire sections of a shape, like moving the spikes on a star or widening a section of a custom badge.
Using the Inspector for Numerical Precision
Sometimes, dragging isn’t accurate enough. You need to place a point at an exact coordinate. With a vector point selected, look at the right-hand Properties Panel (the Inspector).
Under the “Design” tab, you’ll find the X and Y position fields for the selected element. When a single vector point is selected, these fields control that point’s absolute position on the canvas. You can type in exact pixel values to place the point with mathematical precision.
Beyond Moving: Advanced Point Manipulation
Changing a point’s location is just the beginning. To truly master vector editing, you need to control the point’s type and its influence on the path.
Converting Between Point Types
The behavior of a path at a point depends on its type. You can convert points on the fly.
– Select the point(s) you want to change.
– Look at the small context menu that appears near the point, or find the point icons in the top toolbar.
– Click the “Corner Point” icon (a sharp angle) to make selected smooth points into corners, removing their curve handles.
– Click the “Smooth Point” icon (a smooth curve) or “Mirror Point” icon to convert a corner point to a smooth point, which will generate Bezier handles.
Converting a corner to a smooth point is often the solution when you need to round out a sharp angle you’ve just moved.
Adjusting Bezier Handles to Control Curves
When a smooth point is selected, you will see its Bezier handles. These are the lines with small circles at the end extending from the point. Click and drag the handle circle to adjust the curve.
– Dragging a handle longer will exaggerate the curve’s bulge.
– Rotating the handle around the anchor point changes the direction of the curve’s approach.
– By default, handles on a smooth point are “mirrored”—moving one affects the other to maintain a continuous curve. You can hold down the Alt (Option on Mac) key while dragging a handle to break this link and adjust each side independently, creating a cusp.
Mastering handle manipulation is how you achieve perfectly flowing curves and custom shapes.
Troubleshooting Common Vector Point Issues
Even with the right techniques, you might run into snags. Here’s how to solve the most frequent problems.
Why Can’t I Select or Move a Point?
If clicking does nothing, first confirm you are in Vector Edit Mode (double-click the shape). If you are, the shape might be part of a Boolean group or a component. Try to enter the edit mode of the deepest layer. Also, check that the point isn’t locked or on a locked layer in the Layers Panel.
The Shape Distorts Weirdly When I Drag a Point
This usually means you have a “Mirror” or linked smooth point, and you’re only seeing one handle. The opposite handle is maintaining its relative angle, causing the far side of the curve to warp. Use the Alt/Option key to break the handle link before dragging, or convert the point to a corner first, move it, then convert it back to smooth if needed.
I Need to Add or Remove Points to Gain Control
You can’t change a position that doesn’t exist. To add a new point to a path segment, switch to the Pen Tool (P) while in Vector Edit Mode and click directly on the path where you want the new anchor. To delete a point, select it and press the Delete or Backspace key. Adding points gives you more places to manipulate; removing points simplifies the path.
My Path Closed Unexpectedly or Opened Up
If you accidentally delete a point that connects the start and end of a path, you’ll create an open path. You can reconnect it by selecting the two end points and pressing Command-J (Ctrl+J on Windows) to join them. Conversely, if you move an end point of an open path onto another point, Figma may auto-close the shape.
Strategic Workflow for Complex Shape Editing
For intricate edits, a methodical approach saves time and frustration.
– Start with the Big Picture: Use multiple point selection to get the overall silhouette or major sections into the right approximate area.
– Refine with Single Points: Zoom in and adjust individual points to correct specific angles or alignments.
– Smooth It Out: Convert necessary points to smooth and adjust Bezier handles to create the desired curves.
– Use Alignment and Distribution: With multiple points selected, use the alignment tools in the top toolbar (Align Left, Distribute Horizontally, etc.) to create perfect symmetry and spacing.
– Leverage Duplication: For repeating elements (like gear teeth), edit one segment perfectly, then duplicate the points or use copy/paste for the others.
Remember to frequently toggle out of Vector Edit Mode (press Escape) to see your shape with its fill and stroke applied, ensuring your edits look right in context.
Your Path to Vector Mastery Starts Now
Changing vector point positions in Figma transforms you from a passive user of pre-made shapes to an active creator of custom geometry. The initial process—entering edit mode, selecting points, dragging them—is simple. The real power lies in combining these basics: moving multiple points in unison, converting point types for different effects, and fine-tuning curves with Bezier handles.
Start by practicing on a simple shape. Take a star and morph it into a flower. Take a rectangle and curve its sides into a unique container. With each adjustment, you build the muscle memory for direct path manipulation. This skill is the foundation for illustration, icon design, logo creation, and crafting truly unique interfaces that stand out. Open Figma, create a vector, and begin moving points. That’s how you turn rough ideas into polished, precise designs.
