Line and arrow tools in Figma - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Line Tool Usage

Which of the following best describes the primary use of the Line tool in Figma when creating dashboards?

A To import external images into the dashboard.

B To fill areas with color gradients.

C To add text labels to charts.

D To create straight connectors between visual elements for clarity.

💡 Hint

Think about how lines help organize information visually.

The Line tool is mainly used to draw straight lines that connect or separate elements, improving readability and flow in dashboards.

❓ visualization

intermediate

Arrow Tool Direction Impact

In a dashboard flowchart, what does an arrow drawn from a sales chart to a profit chart typically indicate?

A The sales chart is unrelated to the profit chart.

B The profit chart data is input data for the sales chart.

C The profit chart data is derived from the sales chart data.

D The arrow is decorative and has no meaning.

💡 Hint

Consider what direction arrows usually show in data flows.

Arrows typically show direction of flow or dependency. Here, profit depends on sales, so the arrow points from sales to profit.

❓ dax_lod_result

advanced

DAX Measure with Line and Arrow Visuals

You have a DAX measure that calculates total sales. You want to create a line visual showing sales trend and use arrows to indicate increase or decrease compared to previous month. Which DAX expression correctly calculates the monthly sales difference?

Figma

MonthlySalesDiff = SUM(Sales[Amount]) - CALCULATE(SUM(Sales[Amount]), PREVIOUSMONTH(Calendar[Date]))

A MonthlySalesDiff = SUM(Sales[Amount]) - CALCULATE(SUM(Sales[Amount]), PREVIOUSMONTH(Calendar[Date]))

B MonthlySalesDiff = SUM(Sales[Amount]) + CALCULATE(SUM(Sales[Amount]), NEXTMONTH(Calendar[Date]))

C MonthlySalesDiff = SUM(Sales[Amount]) * CALCULATE(SUM(Sales[Amount]), PREVIOUSMONTH(Calendar[Date]))

D MonthlySalesDiff = CALCULATE(SUM(Sales[Amount]), NEXTMONTH(Calendar[Date])) - SUM(Sales[Amount])

💡 Hint

Think about how to subtract previous month's sales from current month.

Option A correctly subtracts previous month's sales from current month's sales to find the difference.

❓ data_modeling

advanced

Modeling Relationships for Arrow Visuals

To create arrow visuals showing data flow between tables in a Power BI dashboard, which data modeling practice is essential?

A Establishing one-to-many relationships with correct directionality between tables.

B Creating duplicate tables for each arrow visual.

C Using only disconnected tables to avoid confusion.

D Avoiding relationships and using only calculated columns.

💡 Hint

Think about how data flows between tables in BI models.

Correct relationships with directionality allow arrow visuals to represent data flow accurately.

🔧 Formula Fix

expert

Debugging Arrow Direction in Dashboard

You created arrows between visuals to show data flow, but some arrows point backward, confusing users. What is the most likely cause?

A The arrow colors are too light to see direction.

B The data model relationships have incorrect cross-filter direction causing reversed flow.

C The visuals are not aligned properly on the canvas.

D The dashboard theme does not support arrows.

💡 Hint

Consider what controls data flow direction in BI tools.

Incorrect cross-filter direction in relationships can cause arrows to show reversed data flow, confusing users.

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