Text alignment and vertical alignment in Figma - Real Business Scenario

Scenario Mode

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

📋 Request: Your manager wants the dashboard text to be clear and easy to read. They ask you to properly align all text labels and numbers both horizontally and vertically in the dashboard components.

📊 Data: You have a dashboard with sales data displayed in tables and charts. The text includes headers, labels, and numeric values that need alignment adjustments.

🎯 Deliverable: A dashboard design in Figma with all text elements aligned horizontally (left, center, right) and vertically (top, middle, bottom) according to best readability practices.

Sample Data

Component	Text Element	Current Alignment
Sales Table	Header: "Region"	Left aligned, top vertical
Sales Table	Data: "North"	Left aligned, top vertical
Sales Table	Data: "1500"	Left aligned, top vertical
Bar Chart	Title: "Monthly Sales"	Center aligned, top vertical
Bar Chart	Axis Labels	Left aligned, bottom vertical
Summary Card	Number: "$25,000"	Center aligned, middle vertical
Summary Card	Label: "Total Revenue"	Center aligned, middle vertical

1

Step 1: Select the Sales Table headers and set horizontal text alignment to center and vertical alignment to middle.

In Figma, select header text layers > Text alignment > Center horizontally > Align vertically middle

Expected Result

Headers like "Region" appear centered horizontally and vertically in their cells.

2

Step 2: Align Sales Table data text: set horizontal alignment to left and vertical alignment to middle for region names and numbers.

Select data text layers > Text alignment > Left horizontally > Align vertically middle

Expected Result

Data such as "North" and "1500" are left aligned horizontally and vertically centered in their cells.

3

Step 3: For the Bar Chart title, keep horizontal center alignment and vertical top alignment for clear visibility.

Select title text layer > Text alignment > Center horizontally > Align vertically top

Expected Result

"Monthly Sales" title is centered horizontally and aligned to the top vertically.

4

Step 4: Set axis labels on the Bar Chart to left horizontal alignment and bottom vertical alignment for easy reading.

Select axis label text layers > Text alignment > Left horizontally > Align vertically bottom

Expected Result

Axis labels are aligned left horizontally and bottom vertically.

5

Step 5: In the Summary Card, center align both the number and label horizontally and vertically for balanced appearance.

Select number and label text layers > Text alignment > Center horizontally > Align vertically middle

Expected Result

Summary card text "$25,000" and "Total Revenue" are centered horizontally and vertically.

Final Result

-----------------------------------
|          Monthly Sales           |
|---------------------------------|
| Region    | Sales               |
|---------------------------------|
| North     | 1500                |
| South     | 1200                |
| East      | 1800                |
| West      | 1100                |
|---------------------------------|
|        Total Revenue             |
|            $25,000              |
-----------------------------------

✓Centering headers improves readability and visual balance.

✓Left aligning data text with vertical centering makes numbers and labels easy to scan.

✓Chart titles are more prominent when centered horizontally and aligned top vertically.

✓Axis labels aligned left and bottom help users quickly understand chart scales.

✓Summary cards look clean and balanced with centered text both horizontally and vertically.

Bonus Challenge

Create a Figma prototype that allows toggling text alignment styles dynamically to see how different alignments affect readability.

Show Hint

Use Figma Variants and interactive components to switch between alignment states for text elements.