Line and arrow tools in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a business analyst creating a sales performance dashboard.

📋 Request: Your manager wants you to visually connect related data points and highlight trends using lines and arrows in the dashboard design.

📊 Data: You have monthly sales data by region and product category, displayed in charts and tables on your dashboard.

🎯 Deliverable: Create a dashboard mockup in Figma that uses line and arrow tools to connect key data points and show sales trends clearly.

Sample Data

Month	Region	Product Category	Sales ($)
Jan	North	Electronics	12000
Jan	South	Furniture	8000
Feb	North	Electronics	15000
Feb	South	Furniture	7000
Mar	North	Electronics	17000
Mar	South	Furniture	9000
Apr	North	Electronics	16000
Apr	South	Furniture	8500

1

Step 1: Open your Figma dashboard file and select the Line tool from the toolbar.

Use the shortcut 'L' or click the Line icon to activate the Line tool.

Expected Result

You can draw straight lines by clicking and dragging on the canvas.

2

Step 2: Draw lines connecting the monthly sales data points for the Electronics category in the North region to show the sales trend over time.

Click on the first data point, drag to the next, and release to create a line segment. Repeat for all months.

Expected Result

A connected line graph visually showing the sales increase and decrease over months.

3

Step 3: Select the Arrow tool to add arrows at the end of lines to indicate direction of sales trend.

In the properties panel, enable 'Arrowheads' at the end of the line and choose a simple arrow style.

Expected Result

Lines now have arrows pointing forward, making the trend direction clear.

4

Step 4: Use the Line tool to draw arrows pointing from the Furniture sales in South region to Electronics sales in North region for the same month to highlight comparison.

Draw a line from the Furniture sales data point to the Electronics sales data point, then add an arrowhead at the end.

Expected Result

Visual arrows connecting related data points across regions for easy comparison.

5

Step 5: Adjust line colors and thickness to differentiate between trend lines and comparison arrows.

Select each line and set stroke color: blue for trend lines, green for comparison arrows; set stroke weight to 2px for visibility.

Expected Result

Clear visual distinction between different types of lines on the dashboard.

6

Step 6: Group all lines and arrows with their respective charts to keep the dashboard organized.

Select related lines and charts, right-click and choose 'Group' or press Ctrl+G (Cmd+G on Mac).

Expected Result

Dashboard elements are neatly grouped for easy editing and presentation.

Final Result

Dashboard Layout:

[Electronics Sales Chart - North Region]
  Jan ●──▶ Feb ●──▶ Mar ●──▶ Apr ●

[South Furniture Sales Chart]
  Jan ●    Feb ●    Mar ●    Apr ●
   \       |       /      
    \────▶ | ◀────/       

Legend:
- Blue lines with arrows: Electronics sales trend
- Green arrows: Cross-region sales comparison

✓Electronics sales in North region show a steady increase from January to March, then a slight dip in April.

✓Furniture sales in South region fluctuate slightly but remain lower than Electronics sales.

✓Arrows connecting Furniture to Electronics sales highlight months where Electronics outperform Furniture.

Bonus Challenge

Create interactive prototype links in Figma where clicking on an arrow highlights the connected data points and shows detailed sales info.

Show Hint

Use Figma's Prototype tab to add 'On Click' interactions and overlays for detailed data popups.