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.