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.

Practice

1. What is the main purpose of using arrows in Figma designs?

easy

A. To show direction and flow clearly

B. To add color to the design

C. To create text labels

D. To change font styles

Solution

1. Step 1: Understand the role of arrows

   Arrows are used to indicate direction or flow in a design, helping viewers understand movement or sequence.

2. Step 2: Compare with other options

   Options A, C, and D relate to color, text, and fonts, which are not the main purpose of arrows.

3. Final Answer:

   To show direction and flow clearly -> Option A

4. Quick Check:

   Arrows = Direction and flow [OK]

Hint: Arrows always point the way or flow [OK]

Common Mistakes:

• Confusing arrows with color tools
• Thinking arrows add text
• Mixing arrows with font styles

2. Which key should you hold to draw a perfectly straight line using the Line tool in Figma?

easy

A. Ctrl

B. Shift

C. Alt

D. Tab

Solution

1. Step 1: Recall the shortcut for straight lines

   Holding the Shift key while drawing a line in Figma locks the angle, making the line perfectly straight.

2. Step 2: Verify other keys' functions

   Ctrl, Alt, and Tab do not lock line angles in Figma.

3. Final Answer:

   Shift -> Option B

4. Quick Check:

   Shift = Straight line [OK]

Hint: Hold Shift to keep lines straight [OK]

Common Mistakes:

• Using Ctrl instead of Shift
• Trying Alt for straight lines
• Pressing Tab key mistakenly

3. Consider you draw a line in Figma and then add an arrowhead at the end. What will this arrow visually represent in your design?

medium

A. A decorative shape with no meaning

B. A connection without direction

C. A directional flow from start to end

D. A text label for the line

Solution

1. Step 1: Understand arrowhead meaning

   Adding an arrowhead to a line shows direction, indicating flow from the line's start point to its end.

2. Step 2: Eliminate incorrect options

   A connection without direction lacks direction, C is decorative which is incorrect, and D is unrelated to text labels.

3. Final Answer:

   A directional flow from start to end -> Option C

4. Quick Check:

   Arrowhead = Directional flow [OK]

Hint: Arrowhead means flow direction [OK]

Common Mistakes:

• Thinking arrowheads are just decoration
• Ignoring direction in arrows
• Confusing arrows with labels

4. You tried to draw a straight arrow line in Figma but it appears crooked. What is the most likely reason?

medium

A. You did not hold the Shift key while drawing

B. You used the wrong color for the line

C. You added multiple arrowheads

D. You drew the line outside the canvas

Solution

1. Step 1: Identify the cause of crooked lines

   Not holding Shift while drawing allows free angle movement, causing crooked lines.

2. Step 2: Check other options

   Color, multiple arrowheads, or canvas position do not affect line straightness.

3. Final Answer:

   You did not hold the Shift key while drawing -> Option A

4. Quick Check:

   No Shift = Crooked line [OK]

Hint: Hold Shift to avoid crooked lines [OK]

Common Mistakes:

• Blaming color for crooked lines
• Thinking arrowheads cause crookedness
• Ignoring Shift key usage

5. You want to create a flowchart in Figma showing steps from start to finish with clear direction. Which combination of tools and techniques is best?

hard

A. Draw freehand lines without arrowheads

B. Use only the Text tool to write step names

C. Use shapes without connecting lines

D. Use Line tool with arrowheads and hold Shift to draw straight connectors

Solution

1. Step 1: Identify flowchart needs

   A flowchart needs clear connections with direction, so lines with arrowheads are essential.

2. Step 2: Use Shift key for neat lines

   Holding Shift ensures straight connectors, making the flowchart clean and easy to follow.

3. Step 3: Evaluate other options

   Text alone, freehand lines, or shapes without connectors do not show clear flow or direction.

4. Final Answer:

   Use Line tool with arrowheads and hold Shift to draw straight connectors -> Option D

5. Quick Check:

   Lines + arrowheads + Shift = Clear flowchart [OK]

Hint: Combine lines, arrows, and Shift for clear flowcharts [OK]

Common Mistakes:

• Skipping arrowheads
• Not holding Shift for straight lines
• Using only text or shapes without connectors