Line and arrow tools in Figma - Dashboard Guide

Dashboard Mode - Line and arrow tools

Goal

Understand how to use line and arrow tools in Figma to create clear connections and flow in BI dashboards.

Sample Data

Step	Action	Duration (days)
1	Data Collection	5
2	Data Cleaning	3
3	Data Analysis	7
4	Dashboard Design	4
5	Review & Feedback	2

Dashboard Components

• Step Boxes: Rectangles labeled with each step name and duration.
• Lines: Straight lines connecting each step box in order.
• Arrows: Arrowheads at the end of lines to show process flow direction.
• Annotations: Text labels near arrows explaining transitions.

Dashboard Layout

+----------------+     +----------------+     +----------------+     +----------------+     +----------------+
| Data Collection|---->| Data Cleaning  |---->| Data Analysis  |---->| Dashboard Design|---->| Review & Feedback|
| Duration: 5d   |     | Duration: 3d   |     | Duration: 7d   |     | Duration: 4d    |     | Duration: 2d    |
+----------------+     +----------------+     +----------------+     +----------------+     +----------------+

Lines with arrowheads connect each box from left to right showing the process flow.

Interactivity

Users can click on each step box to highlight the line and arrow leading to the next step, helping to focus on the current process stage.

Hovering over arrows shows annotations explaining the transition between steps.

Self Check

If you add a filter to highlight steps with duration longer than 4 days, which step boxes and connecting arrows will be highlighted?

Answer: "Data Collection" (5 days) and "Data Analysis" (7 days) boxes and the arrows leading from these steps will be highlighted.

Key Result

A process flow dashboard showing steps connected by lines and arrows to visualize BI project stages.