Pen tool for custom paths in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a BI designer creating interactive dashboards.

📋 Request: Your manager wants a custom shape to highlight key data areas on a sales dashboard using the Pen tool in Figma.

📊 Data: You have a sales dashboard mockup in Figma with charts and tables. You need to draw a custom path shape to emphasize a trend area.

🎯 Deliverable: Create a custom path shape using the Pen tool in Figma that outlines the sales trend area clearly and can be used as a visual highlight on the dashboard.

Sample Data

Month	Sales
Jan	1000
Feb	1200
Mar	1500
Apr	1300
May	1700
Jun	1600

1

Step 1: Open the sales dashboard file in Figma.

Locate the chart area showing monthly sales data.

Expected Result

You see the sales chart with months on the x-axis and sales values on the y-axis.

2

Step 2: Select the Pen tool from the toolbar or press 'P' on your keyboard.

Pen tool is now active and ready to draw custom paths.

Expected Result

Cursor changes to Pen icon indicating you can start drawing.

3

Step 3: Click on the chart to create the first anchor point at the start of the sales trend area (e.g., January sales point).

Click at the coordinate corresponding to January sales on the chart.

Expected Result

First anchor point is placed on the canvas.

4

Step 4: Click on subsequent points along the sales trend line (February, March, April, May, June) to create a path following the sales data.

Click at each month's sales point in order to create connected anchor points.

Expected Result

A path is formed that follows the sales trend line across months.

5

Step 5: Close the path by clicking back on the first anchor point to create a closed shape.

Click the first anchor point to close the path.

Expected Result

The path becomes a closed shape that can be filled with color.

6

Step 6: Adjust the curve handles by clicking and dragging anchor points to smooth the path if needed.

Use the Pen tool handles to create smooth curves along the sales trend.

Expected Result

The path smoothly follows the sales trend line with curved edges.

7

Step 7: Fill the closed path with a semi-transparent color to highlight the sales trend area.

Select the shape and apply a fill color with opacity around 30%.

Expected Result

The sales trend area is visually highlighted on the dashboard.

8

Step 8: Place the custom path shape layer above the chart layers to ensure visibility.

Drag the shape layer above the chart layers in the layers panel.

Expected Result

The highlight shape is clearly visible on top of the sales chart.

Final Result

Sales Dashboard

+--------------------------------+
|                                |
|   [Line Chart with Sales Trend]|
|    /\                         /|
|   /  \  <--- Highlight Shape  / |
|  /    \                   /    |
| /      \                 /     |
|/        \_______________/      |
|                                |
+--------------------------------+

✓The custom path shape clearly highlights the sales trend area from January to June.

✓Using the Pen tool allows precise control to follow irregular data shapes.

✓The semi-transparent fill helps focus attention without hiding the chart details.

Bonus Challenge

Create multiple custom path shapes to highlight different sales regions or product categories on the dashboard.

Show Hint

Use the Pen tool to draw separate closed paths for each region or category and apply distinct fill colors with transparency.

Practice

1. What does the Pen tool in Figma primarily allow you to do?

easy

A. Draw custom shapes by placing points and curves

B. Automatically generate charts from data

C. Import images into your design

D. Create text layers with different fonts

Solution

1. Step 1: Identify the Pen tool's primary function

   The Pen tool is used to create custom shapes by placing points and curves. Options B, C, and D describe other Figma features unrelated to the Pen tool.

2. Final Answer:

   Draw custom shapes by placing points and curves -> Option A

3. Quick Check:

   Pen tool = Draw shapes [OK]

Hint: Pen tool = points + curves for shapes [OK]

Common Mistakes:

• Confusing Pen tool with text or image tools
• Thinking Pen tool auto-generates charts
• Assuming Pen tool only draws straight lines

2. Which action creates a curved point when using the Pen tool in Figma?

easy

A. Click once on the canvas

B. Right-click on the canvas

C. Click and drag on the canvas

D. Double-click on the canvas

Solution

1. Step 1: Determine how to create curved points with the Pen tool

   Clicking once places a straight point; clicking and dragging creates a curved point. Double-click and right-click do not create curves with the Pen tool.

2. Final Answer:

   Click and drag on the canvas -> Option C

3. Quick Check:

   Click+drag = curve point [OK]

Hint: Drag while clicking to curve points [OK]

Common Mistakes:

• Clicking once expecting a curve
• Using double-click instead of drag
• Right-clicking to create points

3. What will happen if you use the Pen tool to place points at (0,0), (100,0), (100,100), and then close the path back to (0,0)?

medium

A. A square shape will be created

B. A triangle shape will be created

C. An open line will be drawn

D. A circle shape will be created

Solution

1. Step 1: Plot the points to determine the closed shape

   The points form corners at (0,0), (100,0), (100,100), and back to (0,0). This is three points forming a closed triangle shape, not a square.

2. Final Answer:

   A triangle shape will be created -> Option B

3. Quick Check:

   Closed path with three points = triangle [OK]

Hint: Close path with three points = triangle [OK]

Common Mistakes:

• Thinking three points make a square
• Assuming open path creates a shape
• Confusing square with triangle

4. You tried to create a curved path with the Pen tool but the curve looks sharp and not smooth. What is the most likely mistake?

medium

A. You closed the path before adding curves

B. You placed points too far apart

C. You used the wrong color for the path

D. You clicked instead of clicking and dragging to create curve handles

Solution

1. Step 1: Diagnose the cause of sharp curves

   Curves require clicking and dragging to create handles; clicking alone makes sharp corners. Closing path, color choice, or point distance do not affect curve smoothness directly.

2. Final Answer:

   You clicked instead of clicking and dragging to create curve handles -> Option D

3. Quick Check:

   Click vs drag for curves = smoothness [OK]

Hint: Drag to curve, click only = sharp corner [OK]

Common Mistakes:

• Ignoring drag for curves
• Blaming color or path closure
• Thinking point distance affects curve shape

5. You want to create a custom star shape using the Pen tool with smooth curves on each point. Which sequence of actions is best?

hard

A. Click to place each star point, then click and drag to curve each segment, finally close the path

B. Click and drag to place all points, then leave the path open

C. Click to place points and leave the path open for a star shape

D. Use the rectangle tool and then convert it to a star

Solution

1. Step 1: Outline the correct sequence for a smooth curved star

   Click to place each star point, then click and drag to curve each segment smoothly, finally close the path to complete the shape.

2. Final Answer:

   Click to place each star point, then click and drag to curve each segment, finally close the path -> Option A

3. Quick Check:

   Click + drag + close path = smooth star [OK]

Hint: Click points, drag curves, close path for shapes [OK]

Common Mistakes:

• Leaving path open for closed shapes
• Not dragging to create curves
• Using wrong tools for star shape