Pen tool for custom paths in Figma - Dashboard Guide

Dashboard Mode - Pen tool for custom paths

Goal

Understand how to use the Pen tool in Figma to create custom paths for precise shape design in dashboards and reports.

Sample Data

Point	X (px)	Y (px)
Start	50	50
Corner 1	150	50
Curve Control 1	200	100
Corner 2	150	150
End	50	150

Dashboard Components

• Custom Path Shape: Created using the Pen tool by connecting points Start -> Corner 1 -> Curve Control 1 (Bezier curve) -> Corner 2 -> End -> Start to form a closed shape.
• KPI Card: Displays the total number of points used (5 points).
• Path Length Display: Shows the total length of the custom path calculated by Figma's vector tool (approx. 480 px).

Dashboard Layout

+----------------------+------------------+
|      KPI Card        | Path Length Card |
|  (Total Points: 5)   |  (Length: 480px) |
+----------------------+------------------+
|                                      |
|          Custom Path Shape           |
|          (Pen Tool Vector)           |
|                                      |
+--------------------------------------+ 

Interactivity

Users can adjust points on the custom path by dragging anchor points or curve handles with the Pen tool. The KPI Card and Path Length Display update automatically to reflect changes in the number of points and path length.

Self Check

If you add a new anchor point to the custom path using the Pen tool, which components update?

• The KPI Card updates to show the new total number of points.
• The Path Length Display updates to show the new total path length.
• The Custom Path Shape visually updates to include the new point.

Key Result

Dashboard demonstrating use of Figma's Pen tool to create and analyze custom vector paths with dynamic KPI and path length displays.