Text tool basics in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a business analyst creating a sales report dashboard in Figma.

📋 Request: Your manager wants you to add clear, readable text labels for titles, data values, and legends on the dashboard.

📊 Data: You have a dashboard layout with charts and tables but no text labels yet.

🎯 Deliverable: Add text labels using Figma's Text tool with proper font size, weight, and alignment to make the dashboard easy to understand.

Sample Data

Element	Position	Content
Title	Top center	Monthly Sales Report
Chart label	Above bar chart	Sales by Region
Legend	Right side of chart	East, West, North, South
Data value	On bars	Sales numbers like 1200, 900, 1500

1

Step 1: Select the Text tool from the toolbar in Figma.

Click the 'T' icon or press 'T' on your keyboard to activate the Text tool.

Expected Result

The cursor changes to a text insertion point, ready to type.

2

Step 2: Add the main title text at the top center of the dashboard.

Click on the top center area and type 'Monthly Sales Report'. Set font size to 24pt, font weight to Bold, and center align the text.

Expected Result

The title 'Monthly Sales Report' appears clearly at the top center, large and bold.

3

Step 3: Add the chart label above the bar chart.

Click above the bar chart area and type 'Sales by Region'. Set font size to 18pt, font weight to Semi Bold, and left align the text.

Expected Result

The label 'Sales by Region' appears above the chart, easy to read and aligned left.

4

Step 4: Add the legend text on the right side of the chart.

Click on the right side of the chart and type 'East, West, North, South'. Set font size to 14pt, font weight to Regular, and left align the text.

Expected Result

The legend text appears clearly on the right side, listing the regions.

5

Step 5: Add data value labels on each bar in the chart.

Click on each bar and type the sales number (e.g., '1200'). Set font size to 12pt, font weight to Regular, and center align the text on the bar.

Expected Result

Each bar shows its sales number clearly centered on top.

6

Step 6: Check text readability and alignment across the dashboard.

Ensure all text uses consistent fonts and sizes appropriate for their importance. Adjust spacing if needed.

Expected Result

The dashboard text is clear, consistent, and easy to read.

Final Result

-----------------------------------------
|           Monthly Sales Report         |
|---------------------------------------|
| Sales by Region                       |
|  | 1200 |  900  | 1500 | 1100 |       |
|  | East | West  | North| South|       |
|                                       |
| Legend: East, West, North, South       |
-----------------------------------------

✓The title clearly shows the report purpose.

✓Chart label helps understand the data shown.

✓Legend identifies regions by color.

✓Data values on bars make numbers easy to see.

Bonus Challenge

Use Figma's Text Styles to create reusable text styles for titles, labels, and data values.

Show Hint

Create text styles for each text type and apply them to all text elements to keep consistency and make future edits easier.