Pen tool for custom paths in Figma - Step-by-Step Guide

Introduction

The Pen tool in Figma lets you draw custom shapes and lines by placing points and curves. It helps you create unique visuals that standard shapes cannot achieve.

When you want to draw a custom shape like a star or a wave that is not available in default shapes

When you need to trace over an image or logo to create a vector version

When designing icons that require precise curves and angles

When creating flowchart connectors that are not straight lines

When you want to create a complex path for clipping or masking images

Steps

Step 1: Click

- Toolbar on the left, Pen tool icon

The cursor changes to a pen tip, ready to draw points

Step 2: Click

- Canvas where you want the first point

A point appears, starting the path

Step 3: Click

- Canvas to add a straight line point

A straight line connects the first point to the new point

Step 4: Click and drag

- Canvas to add a curved point

Handles appear allowing you to adjust the curve shape

Step 5: Click

- First point to close the path

The path closes forming a shape

Step 6: Press Escape

- Keyboard

Stops drawing and deselects the Pen tool

Before vs After

Before

Canvas shows no custom shapes, only default rectangles and circles

After

Canvas shows a custom star shape drawn with the Pen tool, with smooth curves and colored fill

Settings Reference

Stroke color

📍 Right sidebar under Stroke section

Sets the color of the path outline

Default: Black

Stroke weight

📍 Right sidebar under Stroke section

Controls the thickness of the path outline

Default: 1 px

Fill color

📍 Right sidebar under Fill section

Fills the inside of a closed path with color

Default: None

Corner type

📍 Right sidebar under Stroke section

Changes how corners look where lines meet

Default: Miter

Common Mistakes

Clicking without dragging when trying to create curves

This creates straight lines instead of curves

Click and drag to pull handles and form curves

Not closing the path when creating shapes

The shape will not fill with color and remains an open path

Click the first point again to close the path

Trying to edit points without selecting the path

You cannot move or adjust points if the path is not selected

Select the path with the Move tool before editing points

Summary

The Pen tool lets you draw custom lines and shapes by placing points and curves.

Use click for straight lines and click-drag for curves to control the shape.

Close paths to create fillable shapes and adjust stroke and fill in the sidebar.