Text alignment and vertical alignment in Figma - Dashboard Guide

Dashboard Mode - Text alignment and vertical alignment

Dashboard Goal

This dashboard helps you see how text alignment and vertical alignment affect the look of text in your BI reports and dashboards. It answers: How does changing text alignment improve readability and presentation?

Sample Data

Text Sample	Horizontal Alignment	Vertical Alignment
Sales Report	Left	Top
Profit Margin	Center	Middle
Customer Count	Right	Bottom
Revenue Growth	Left	Middle
Expenses	Center	Top
Net Income	Right	Middle

Dashboard Components

• KPI Cards: Six cards showing each text sample with the specified horizontal and vertical alignment. Each card uses Figma text alignment settings to position the text inside a box of fixed size (200px width, 80px height).
• Alignment Labels: Below each card, labels show the horizontal and vertical alignment used.
• Explanation Panel: A text box explaining how horizontal alignment (left, center, right) and vertical alignment (top, middle, bottom) affect text placement and readability.

Dashboard Layout

+----------------------+----------------------+----------------------+
|      KPI Card 1      |      KPI Card 2      |      KPI Card 3      |
|  (Left, Top)         |  (Center, Middle)    |  (Right, Bottom)     |
+----------------------+----------------------+----------------------+
|      KPI Card 4      |      KPI Card 5      |      KPI Card 6      |
|  (Left, Middle)      |  (Center, Top)       |  (Right, Middle)     |
+----------------------+----------------------+----------------------+
|                      Explanation Panel                      |
+-------------------------------------------------------------+

Interactivity

You can select a KPI card to highlight it and see the exact alignment settings in the explanation panel. Changing alignment settings in the panel updates the selected card's text position live. This helps you understand how alignment changes affect text layout.

Self Check

If you change the horizontal alignment of the "Sales Report" card from Left to Center, which components update?

• The "Sales Report" KPI card text moves to center horizontally.
• The explanation panel updates to show the new alignment settings.
• Other KPI cards remain unchanged.

Key Result

A dashboard demonstrating how horizontal and vertical text alignment affect text placement in BI visuals.