How to use the Pen tool in Figma

Oscar de la Hera Gomez
A flower that represents Figma with the text “Pen Tool” beneath it.

A guide on using the pen tool in Figma.

Step One: Select the Pen Tool

A screenshot of Figma showing you how to select the pen tool. The pen icon is found on the center left of the top menu bar. Alternatively you can press the P key on your keyboard.

Select the Pen icon from the top menu bar.

Alternatively, press P on your keyboard.

Step Two: Draw your Shape or Path

A screenshot of Figma showing a shape drawn using the pen tool. It has no fill.

On the Figma canvas, draw your shape or path.

Please note that you can adapt the position of the dots on the shape by clicking and dragging.

Step Three: Bend a Path

A screenshot of Figma showing a shape drawn using the pen tool. One of the paths has been bent compared to the last image. To activate this tool, select the “Bend” tool on the top menu bar or press the command key on the keyboard. To bend paths thereafter, click and drag an existing path.

If you wish to change the bend of a path, select the Bend tool and click and drag on a path.

Alternatively, you can press the command key on your keyboard to activate the tool.

Step Four: Paint a Shape

A screenshot of Figma showing a shape drawn using the pen tool. The interior of the shape has a pattern, which appears when you select the paint bucket tool and hover your mouse over a shape. To activate the paint bucket tool, select it on the top menu bar or press the B key on your keyboard.

If you wish to paint the shapes interior, select the Paint bucket tool and click a shape.

Alternatively, you can press the B key on your keyboard to activate the tool.

Step Five: Done

A screenshot of Figma showing a shape drawn using the pen tool. It has been filled in with the paint bucket. Highlighted on the top menu bar is  the “Done” button. Click this button to exit the pen tool.  Alternatively, press the esc key on your keyboard.

Once you're done, press the Done button.

Alternatively, press the esc key on your keyboard.

Step Six: Modify

A screenshot of Figma showing a shape drawn using the pen tool. It has been filled in with the paint bucket and is currently selected. To re-enter the pen tool mode for a shape, double click it after selecting it.

If you need to adapt the shape or path, double click the shape or path.

Looking to learn more about the basics behind text, shapes and media in Figma ?

Consult the list below to learn more about the basics behind text, shapes and media in Figma.

Any Questions?

We are actively looking for feedback on how to improve this resource. Please send us a note to inquiries@delasign.com with any thoughts or feedback you may have.
delasign logo

Book a Free Consultation.

An icon of an email.

Click here to email us.

Fill in the details below to book a free consultation or to let us know about something else. Whatever it is, we are here to help.

How can we help you ?

Contact Details