Pen Tool in Figma

The Pen Tool in Figma is a powerful vector design tool used to create custom shapes, vector paths, icons, illustrations, logos, curves, and detailed graphic elements. Unlike predefined Shape Tools that create standard geometric objects, the Pen Tool allows designers to construct custom vector paths with precise control over anchor points and curves.

The Pen Tool is especially useful when a design cannot be created easily using rectangles, circles, polygons, or other basic shapes. It can create both straight and curved paths and is useful for creating custom vector artwork.

For structured Figma and UI/UX learning, visit JustAcademy Figma Training and explore the course through Register for Figma Course Demo.

1. What Is the Pen Tool in Figma?

The Pen Tool is a vector creation tool used to draw precise paths by placing anchor points on the canvas. These points are connected through vector paths to create lines, curves, and custom shapes.

With the Pen Tool, a designer can create simple open paths as well as closed vector shapes. By combining multiple points and curves, it is possible to create detailed icons, illustrations, logos, custom UI graphics, and complex vector artwork.

Basic Concept

Pen Tool

   ↓
Place Anchor Points
   ↓
Connect Points With Paths
   ↓
Create Straight / Curved Paths
   ↓
Edit Vector Points
   ↓
Create Custom Shape

2. Why Is the Pen Tool Important?

The Pen Tool is important because predefined shapes cannot represent every possible design. When a designer needs a unique shape, custom icon, organic curve, logo, or illustration, the Pen Tool provides precise control over the vector structure.

• Create custom vector shapes
• Create logos and symbols
• Design custom icons
• Create illustrations
• Draw straight vector paths
• Create curved paths
• Edit existing vector shapes
• Create detailed vector networks
• Build custom decorative elements
• Modify vector points individually

3. Where Is the Pen Tool Located?

The Pen Tool is available from Figma's Creation Tools menu in the toolbar. It can also be activated using the keyboard shortcut P.

Figma Toolbar

      ↓
Creation Tools
      ↓
Pen Tool
      ↓
Press P
      ↓
Start Drawing

4. Pen Tool Shortcut

The Pen Tool uses P, while pressing Enter on a selected vector layer opens vector edit mode for further editing.

5. Understanding Anchor Points

Anchor points are the individual points that define a vector path. When you click with the Pen Tool, Figma places an anchor point at that location. Additional points create additional path segments.

Point A ●────────● Point B

          Path
 
Point A ●────────● Point B────────● Point C

Each point can be repositioned later. Moving an anchor point changes the structure and shape of the vector path.

6. Creating a Straight Line With the Pen Tool

The simplest use of the Pen Tool is creating a straight vector path.

Steps

1. Select the Pen Tool or press P.
2. Click on the canvas to create the first point.
3. Move the cursor to another location.
4. Click again to create a second point.
5. Continue clicking to create additional points.
6. Press Escape to leave the path open.

Point 1 ●────────● Point 2────────● Point 3

7. Creating a Closed Shape

A closed vector path is created when the final point connects back to the starting point. When the Pen Tool is positioned over the starting point, Figma indicates that the path can be closed. Clicking the starting point closes the path.

        ●

       / \
      /   \
     ●─────●
 
Start Point
     ↑
Final Point connects here
     ↓
Closed Shape

Closed paths are especially useful when you need to create a filled custom shape.

8. Open Paths vs Closed Paths

9. Creating Curves With the Pen Tool

The Pen Tool can create curved paths by clicking and dragging while placing a point. Dragging creates Bézier handles that control the direction and curvature of the path.

Anchor Point

      ●
     / \
    /   \  Bézier Handle
   /     \
 Curve ─────────●

Basic Curve Workflow

1. Select the Pen Tool.
2. Click and hold at the location where the curve should begin.
3. Drag the cursor to create Bézier handles.
4. Release the mouse button.
5. Move to the next point.
6. Continue creating the desired curve.

10. Understanding Bézier Handles

Bézier handles control the direction, angle, and curvature around vector points. By changing the length and direction of the handles, designers can create smooth or sharp curves.

11. Bézier Curve Example

Start Point

     ●
      \
       \____
            \____
                 ●
              End Point

A smooth curve can be created by controlling the Bézier handles between the anchor points.

12. Types of Vector Points

Vector points can behave differently depending on how their handles are configured. Designers can create smooth curves, sharp corners, or combinations of both.

Common Point Behaviors

• Straight point
• Corner point
• Smooth point
• Mirrored curve point
• Independent-handle point

13. Corner Points

A corner point creates a sharp change in direction. Corner points are useful for geometric shapes, sharp icon details, corners of illustrations, and angular logos.

●

 \
  \
   ●
    \
     ●

The path changes direction sharply at the anchor point.

14. Smooth Points

Smooth points are useful when two path segments should transition smoothly from one curve to another. Bézier handles can be adjusted to create continuous curvature.

        _______

      /         \
    ●             ●
      \_________/

Smooth points are especially useful when creating organic illustrations and curved icons.

15. Vector Networks

Figma's vector system supports vector networks. A vector network is a vector structure made from paths that can branch and connect in different directions. This makes vector editing flexible for complex icons and illustrations.

          ●

         / \
        /   \
       ●     ●
        \   /
         \ /
          ●

The Pen Tool can be used to create vector networks from scratch, making it useful for complex custom vector artwork.

16. Pen Tool and Vector Networks

When the Pen Tool is used to place points and connect paths, Figma creates vector geometry that can later be edited through vector edit mode.

Pen Tool

   ↓
Anchor Points
   ↓
Vector Paths
   ↓
Vector Network
   ↓
Vector Edit Mode
   ↓
Refine Shape

17. Entering Vector Edit Mode

After creating or selecting a vector layer, pressing Enter opens vector edit mode. In this mode, designers can see and manipulate existing points and paths.

Vector Edit Mode Allows You To

• Select points
• Move points
• Add points
• Edit paths
• Create curves
• Adjust Bézier handles
• Cut vector paths
• Select points using Lasso
• Use Shape Builder where applicable
• Modify vector geometry

18. Moving Anchor Points

Anchor points can be repositioned after creating a vector. Select the point and drag it to a new location.

Before:

●────────●────────●
 
After:
●──────●
          \
           ●────●

Moving points allows designers to refine the geometry without recreating the entire shape.

19. Adding Additional Points

Additional vector points can be added to an existing vector path. In vector edit mode, use the Pen Tool to add points along an existing path.

Before:

●──────────────●
 
Add Point:
●──────●───────●
 
Result:
More Control Over Path

Additional points provide more control but should be used carefully because unnecessary points can make vector editing harder.

20. Deleting Anchor Points

Unnecessary anchor points can be removed during vector editing. Reducing unnecessary points can make a vector shape easier to maintain and can help produce cleaner curves.

Too Many Points:

●─●─●─●─●─●─●
 
Simplified:
●────────●────────●

21. Editing Bézier Handles

Bézier handles can be moved to change the curvature of a vector path. The length and angle of a handle influence how the path behaves around the associated point.

       Handle

          /
         /
        ●
         \
          \
        Handle

Careful handle manipulation is essential for creating smooth curves.

22. Bend Tool

The Bend Tool can be used during vector editing to create and adjust curves. It helps designers add or manipulate Bézier handles on vector points and paths.

Straight Path

●────────────●
 
      ↓ Bend
 
Curved Path
●──────╮
       ╰──────●

23. Handle Mirroring

Handle mirroring controls how Bézier handles behave relative to each other. These options can help create symmetrical and smooth curves.

24. Creating Custom Icons

The Pen Tool is frequently used to create custom icons when standard Shape Tools are not sufficient.

Example Workflow

Identify Icon

    ↓
Sketch Basic Structure
    ↓
Place Anchor Points
    ↓
Connect Paths
    ↓
Create Curves
    ↓
Edit Points
    ↓
Apply Fill / Stroke
    ↓
Finalize Icon

25. Creating Logos With the Pen Tool

The Pen Tool is useful for creating custom logos because it provides precise control over vector geometry. Designers can create unique paths, curves, and geometric combinations.

Logo Workflow

1. Analyze the logo structure.
2. Identify major geometric sections.
3. Create the main vector path.
4. Add anchor points only where necessary.
5. Create curves using Bézier handles.
6. Adjust proportions.
7. Apply fill and stroke.
8. Review the logo at different sizes.
9. Organize and rename the vector layer.

26. Creating Illustrations With the Pen Tool

The Pen Tool can be used to create detailed illustrations by constructing individual vector shapes and combining them into a complete composition.

Illustration

├── Main Shape
├── Secondary Shape
├── Details
├── Highlights
└── Decorative Elements

Different vector layers can be combined to build illustrations ranging from simple decorative graphics to complex UI artwork.

27. Pen Tool for Custom Shapes

When a required design cannot be created efficiently using Rectangle, Ellipse, Polygon, or Star tools, the Pen Tool can be used to create a custom vector shape.

28. Pen Tool With Fill

A closed vector path can be filled with a color or gradient. This makes the Pen Tool useful for creating solid custom shapes and illustrations.

Closed Vector Path

        ↓
Apply Fill
        ↓
Custom Colored Shape

Example

       /\

      /  \
     /    \
    /______\
 
       ↓
   Apply Fill
       ↓
  Colored Shape

29. Pen Tool With Stroke

Open and closed vector paths can be styled using strokes. Stroke properties can control the visual appearance of lines and vector outlines.

Common Stroke Properties

• Stroke color
• Stroke weight
• Stroke alignment where supported
• Stroke style
• Line caps
• Line joins
• Dash settings where applicable

30. Open Path Stroke Example

●──────────────●

      Stroke
 
Stroke Weight: 4px
Fill: None

Open vector paths are useful for lines, decorative curves, illustrations, diagrams, and other stroke-based elements.

31. Line Caps

Line caps determine the appearance of the endpoints of open vector paths. Depending on the selected path and stroke settings, designers can use different endpoint styles such as round, square, and arrow-style caps.

32. Line Joins

Line joins determine how connected vector segments appear where they meet. Join styles are particularly important when creating angular icons and illustrations.

• Miter-style joins
• Round joins
• Bevel-style joins

Choosing the appropriate join style can improve the appearance of vector icons and illustrations.

33. Creating Curved Icons

Many modern icons contain curved edges. The Pen Tool can create these curves through Bézier handles.

Basic Structure

●──────●
 \      /
  \____/
 
Adjust Handles
     ↓
 
Smooth Icon Curve

34. Creating Organic Shapes

Organic shapes are irregular shapes that do not follow strict geometric patterns. They are commonly used in illustrations, decorative backgrounds, landing pages, and creative UI designs.

      _______

   __/       \__
  /             \
  \__           _/
     \_________/
 
Organic Custom Shape

The Pen Tool is useful for creating these shapes because each point and curve can be individually controlled.

35. Pen Tool and Boolean Operations

Custom vector shapes created with the Pen Tool can be combined with other vector objects using Boolean operations. This allows designers to create complex icons and illustrations from simpler parts.

36. Pen Tool and Shape Builder

Figma's vector editing environment includes additional tools such as Shape Builder. These tools can be used to create and modify vector geometry after the initial shape or path has been created.

Pen Tool

   ↓
Create Vector Paths
   ↓
Vector Edit Mode
   ↓
Shape Builder / Other Vector Tools
   ↓
Refine Vector Design

37. Lasso Tool for Vector Editing

The Lasso Tool can be used in vector edit mode to select specific points and paths within a vector network. This is useful when only a portion of a complex vector needs to be modified.

Complex Vector

      ↓
Lasso Select
      ↓
Specific Points
      ↓
Move / Delete / Modify

38. Cut Tool for Vector Paths

The Cut Tool can divide vector paths at selected locations. It can be useful for splitting paths and removing unwanted portions of vector designs.

Original

●──────────────●
 
       ↓ Cut
 
●──────●    ●──────●
 
Separated Path Sections

39. Pen Tool and Variable Width

Variable Width can change the width of a stroke at different points along a path. This can be useful for expressive vector artwork and custom stroke treatments.

Uniform Stroke

──────────────
 
Variable Width
──────╲
       ╲____
            ╲───

Variable width is a vector editing feature rather than the basic process of drawing a path with the Pen Tool.

40. Pen Tool vs Shape Tools

41. Pen Tool vs Pencil Tool

42. Practical Example: Creating a Simple Leaf

A leaf is a useful beginner exercise for understanding straight points and Bézier curves.

Steps

1. Select the Pen Tool.
2. Click to create the bottom point of the leaf.
3. Click and drag to create one curved side.
4. Continue around the upper portion.
5. Create another curve for the opposite side.
6. Connect the final point to the starting point.
7. Apply a fill.
8. Adjust the Bézier handles.

        ●

      /   \
    /       \
   ●         ●
    \       /
      \   /
        ●
 
Closed Leaf Shape

43. Practical Example: Creating a Heart

The Pen Tool can be used to create a custom heart shape by combining anchor points and smooth Bézier curves.

     ●   ●

    / \ / \
   /   V   \
   \       /
    \     /
     \   /
      \ /
       ●

Workflow

1. Create the center bottom point.
2. Create the left side curve.
3. Create the left top point.
4. Create the center indentation.
5. Create the right top point.
6. Create the right side curve.
7. Connect back to the bottom point.
8. Adjust Bézier handles.
9. Apply fill and refine the shape.

44. Practical Example: Creating a Custom Arrow

A custom arrow can be created using an open or closed vector path depending on the desired design.

───────────────►

 
Custom Arrow Structure
Line + Arrow Head

For simple arrows, Figma's Arrow Tool may be faster. The Pen Tool becomes useful when a custom arrow shape or unique geometry is required.

45. Practical Example: Creating a Custom Icon

Design Requirement

      ↓
Sketch Icon
      ↓
Identify Anchor Points
      ↓
Create Paths
      ↓
Create Curves
      ↓
Close Shapes
      ↓
Apply Fill / Stroke
      ↓
Boolean Operations
      ↓
Final Icon

Keeping the number of points controlled and maintaining consistent curves helps create cleaner icons.

46. Practical Example: Creating a Logo Element

The Pen Tool is useful for constructing unique logo elements where exact control over curves and points is required.

Professional Workflow

1. Start with a rough reference or sketch.
2. Identify the primary silhouette.
3. Place anchor points at important changes in direction.
4. Create smooth curves where necessary.
5. Adjust Bézier handles.
6. Remove unnecessary points.
7. Check symmetry and proportions.
8. Apply the required fill or stroke.
9. Test the logo at different sizes.

47. Pen Tool Best Practices

• Use as few anchor points as possible while maintaining the desired shape.
• Place anchor points at important changes in direction.
• Use smooth curves instead of many small segments.
• Keep Bézier handles controlled and consistent.
• Zoom in when editing detailed vector artwork.
• Zoom out frequently to check the overall shape.
• Use symmetry when designing symmetrical icons.
• Keep related vector shapes organized.
• Rename important vector layers.
• Use Shape Tools when a predefined shape is sufficient.
• Use the Pen Tool when custom geometry is required.
• Review vectors at multiple sizes before finalizing them.

48. Common Pen Tool Mistakes

• Adding too many anchor points.
• Creating curves with unnecessary points.
• Using very short and inconsistent Bézier handles.
• Creating uneven curves.
• Forgetting to close a required vector path.
• Using the Pen Tool when a simple Shape Tool would be faster.
• Ignoring alignment and symmetry.
• Leaving unnecessary vector points in the final design.
• Editing complex vectors without organizing layers.
• Not checking the vector at different zoom levels.
• Using excessive stroke weight on small icons.

49. How to Create Clean Bézier Curves

Clean Bézier curves depend on thoughtful point placement and controlled handles. Instead of creating many points, place a small number of points at important locations and use handles to control the curvature.

Bad Curve

●─●─●─●─●─●─●
 
Better Curve
●────────────●
    Smooth Handle Control

Tips

• Place points at curve transitions.
• Avoid placing points in the middle of a smooth curve unless necessary.
• Use longer handles for broad curves.
• Use shorter handles for tighter curves.
• Maintain consistent handle direction for smooth transitions.

50. Pen Tool Workflow for Professional UI Design

Understand Requirement

        ↓
Choose Pen Tool
        ↓
Create Initial Points
        ↓
Build Vector Paths
        ↓
Create Curves
        ↓
Close Path if Required
        ↓
Enter Vector Edit Mode
        ↓
Refine Anchor Points
        ↓
Adjust Bézier Handles
        ↓
Apply Fill / Stroke
        ↓
Check Alignment
        ↓
Simplify Vector
        ↓
Rename Layer
        ↓
Use in Component or Design

51. Pen Tool and UI/UX Design

Although UI design often relies heavily on frames, Auto Layout, components, and predefined shapes, the Pen Tool remains valuable for custom visual assets. Designers can use it to create unique icons, logos, illustrations, decorative elements, and brand-specific graphics.

Typical UI/UX Applications

• Custom icons
• Brand graphics
• Illustrations
• Decorative backgrounds
• Custom arrows
• Unique badges
• Logo elements
• Custom vector illustrations

52. Pen Tool and Design Systems

Custom vector assets created with the Pen Tool can become part of a larger design system. Once finalized, frequently used vector assets can be organized and reused as components or library assets where appropriate.

Custom Vector

      ↓
Finalize Design
      ↓
Create Component
      ↓
Organize in Library
      ↓
Reuse Across Screens

53. Pen Tool and Export

Vector artwork created with the Pen Tool can be used as part of designs that are later exported into supported image or vector formats. Keeping vector paths clean and organized is useful for maintaining quality when designs are resized.

Before export, review the vector for unnecessary points, unwanted strokes, incorrect fills, open paths, and alignment issues.

54. Outline Stroke and Vector Paths

Figma provides an Outline Stroke operation that converts strokes into editable vector paths. This can be useful when a stroke needs to become an editable shape. However, outlining a stroke changes it from a stroke into vector geometry, so the original stroke properties are no longer available in the same form.

Stroke

  ↓
Outline Stroke
  ↓
Editable Vector Shape
  ↓
Vector Edit Mode
  ↓
Modify Points

55. Pen Tool Learning Exercise

A structured practice routine can help beginners become comfortable with the Pen Tool.

1. Create five straight-line paths.
2. Create five triangles.
3. Create five curved paths.
4. Create circles and organic curves using vector editing.
5. Create a leaf.
6. Create a heart.
7. Create a simple custom icon.
8. Create a simple logo shape.
9. Create a small illustration.
10. Recreate one simple geometric icon without tracing every tiny detail.

56. Pen Tool Practice Progression

Level 1

Straight Lines
   ↓
Level 2
Basic Shapes
   ↓
Level 3
Simple Curves
   ↓
Level 4
Bézier Handles
   ↓
Level 5
Custom Icons
   ↓
Level 6
Illustrations
   ↓
Level 7
Complex Vector Networks

57. Pen Tool vs Move Tool

58. Pen Tool vs Shape Tools vs Pencil Tool

59. Professional Tips for Pen Tool

• Do not place an anchor point every few pixels.
• Use anchor points at meaningful changes in direction.
• Practice Bézier handles separately before creating complex illustrations.
• Use the Shape Tool whenever a basic geometric shape is sufficient.
• Use the Pen Tool for custom geometry.
• Keep curves smooth and consistent.
• Use symmetry when appropriate.
• Check your vector at both high and low zoom levels.
• Keep vector layers clearly named.
• Remove unnecessary points before finalizing the artwork.

60. Pen Tool Checklist

• Understand what the Pen Tool does.
• Know the Pen Tool shortcut P.
• Know how to create an anchor point.
• Know how to create straight paths.
• Know how to create closed paths.
• Understand open versus closed paths.
• Understand Bézier curves.
• Understand Bézier handles.
• Know how to edit vector points.
• Know how to add additional points.
• Know how to remove unnecessary points.
• Practice the Bend Tool.
• Understand vector networks.
• Practice creating custom icons.
• Practice creating custom shapes.
• Practice creating illustrations.
• Understand fills and strokes.
• Understand line caps and joins.
• Practice Boolean operations.
• Maintain clean vector paths.

61. Pen Tool Interview Questions

Q1. What is the Pen Tool in Figma?

The Pen Tool is a vector creation tool used to create custom paths, vector networks, shapes, icons, illustrations, and other vector artwork.

Q2. What is the shortcut for the Pen Tool?

The Pen Tool shortcut is P.

Q3. What is an anchor point?

An anchor point is a point that defines the position and structure of a vector path.

Q4. What is a Bézier handle?

A Bézier handle controls the direction and curvature of a vector path around an anchor point.

Q5. What is the difference between an open and closed path?

An open path has separate start and end points, while a closed path connects its final point back to the starting point to form an enclosed vector area.

Q6. How do you close a path in Figma?

Position the Pen Tool over the starting point and click when Figma indicates that the path can be closed.

Q7. How do you stop creating an open path?

Press Escape to leave the path open and finish the current drawing operation.

Q8. What are vector networks?

Vector networks are vector structures made from paths that can branch and connect in multiple directions. They allow designers to create complex custom vector forms.

Q9. When should you use the Pen Tool?

The Pen Tool should be used when a custom vector shape, icon, curve, illustration, or logo element requires more control than predefined Shape Tools provide.

Q10. What is vector edit mode?

Vector edit mode is the editing environment where designers can select and modify the points and paths of vector layers.

Q11. How do you enter vector edit mode?

Select a vector layer and press Enter.

Q12. What is the Bend Tool used for?

The Bend Tool can add or adjust Bézier handles to vector points or paths so designers can create and refine curves.

Q13. Why should unnecessary anchor points be avoided?

Too many anchor points can make vector paths difficult to edit and can produce uneven or unnecessarily complicated curves.

62. Quick Revision

• The Pen Tool is used for custom vector creation.
• The shortcut for the Pen Tool is P.
• The Pen Tool creates vector paths and vector networks.
• Anchor points define the structure of vector paths.
• Clicking creates straight path segments.
• Clicking and dragging can create curves.
• Bézier handles control curve direction and curvature.
• Paths can remain open or be closed.
• Escape can finish an open path.
• Clicking the starting point can close a path.
• Enter opens vector edit mode on a selected vector layer.
• Vector edit mode allows points and paths to be modified.
• The Bend Tool can create and adjust Bézier handles.
• Vector networks can branch in multiple directions.
• Pen Tool is useful for custom icons and illustrations.
• Shape Tools are preferable for simple predefined geometry.
• Too many anchor points should be avoided.
• Clean Bézier curves require controlled handles.
• Custom vector artwork can be combined with other vector operations.
• Practice is essential for mastering the Pen Tool.

63. Conclusion

The Pen Tool is one of the most powerful vector design tools in Figma. It allows designers to create custom paths, curves, vector networks, icons, logos, illustrations, and unique shapes with precise control over anchor points and Bézier handles.

To master the Pen Tool, designers should understand anchor points, open and closed paths, Bézier curves, vector networks, vector edit mode, point manipulation, fills, strokes, line caps, Boolean operations, and vector refinement. Starting with simple lines and curves and gradually moving toward icons and illustrations is an effective way to build confidence.

For structured Figma and UI/UX learning, visit JustAcademy Figma Training and register for a course demonstration through Register for Figma Course Demo.