How do you make a vector curve in Figma?

To make a vector curve in Figma, you use the Pen tool and click and drag as you draw points.

Creating smooth curves in your vector designs allows for organic shapes and fluid lines. Figma achieves this primarily through the use of Bezier curves, which are fundamental to vector graphics software.

Drawing Curves with the Pen Tool

The process of creating a curve involves using the Pen tool to define points (also known as anchor points) and simultaneously manipulating control handles that determine the curve's shape between those points.

According to the reference, you need to:

1. Select or draw a vector with the pen tool.
2. Click and drag to draw Bezier curves.

When you click and hold the mouse button while placing a point, and then drag, you pull out control handles. These handles dictate the direction and curvature of the path as it leaves and enters that point. The further you drag the handles, the more pronounced the curve becomes.

Steps to Create a Curve

Here is a breakdown of the steps using the Pen tool:

• Step 1: Activate the Pen Tool
  • Select the Pen tool (P) from the toolbar or press P on your keyboard.
• Step 2: Start Your Path
  • Click once to create your first point. This will typically be a straight corner point initially.
• Step 3: Draw the Curve
  • Click at the location where you want the curve to bend, but do not release the mouse button.
  • Click and drag away from the point. As you drag, you will see control handles appear, and a preview of the curve forming between the previous point and the current one.
  • Adjust the length and angle of the handles by dragging until the curve has the desired shape.
  • Release the mouse button.
• Step 4: Continue Drawing
  • Click and drag again for subsequent curve points, or simply click to create straight segments or sharp corners.
• Step 5: Finish the Path
  • Close the path by clicking on the initial point, or end an open path by pressing Enter or Esc.

Understanding Bezier Handles

Bezier curves are controlled by anchor points and their associated handles.

• Anchor Points: These are the points on the path where segments connect.
• Control Handles (or Bezier Handles): These extend from an anchor point and have a dot at their end. Moving these dots changes the tension and direction of the curve segment connected to that point.

Dragging out handles creates a smooth, curved point (often called a "smooth point"). If you click without dragging, you create a sharp corner point. You can convert between corner and smooth points, and adjust handles independently (breaking the curve's symmetry) using the Vector Edit mode (double-click the vector object) and modifier keys (Alt/Option).

Quick Reference Table

Action	Tool/Mode	Result
Start drawing	Pen Tool (P)	Creates the first point.
Draw a curve	Pen Tool (P)	Click and drag to create handles.
Draw a sharp corner	Pen Tool (P)	Click without dragging.
Adjust curve shape	Vector Edit Mode	Drag handles of existing points.
Convert point type	Vector Edit Mode	Alt/Option + Click/Drag on point.

By mastering the click and drag motion with the Pen tool, you can effectively create and control vector curves in Figma, forming any shape imaginable.