Text decoration and case in Figma - Dashboard Guide

Dashboard Mode - Text decoration and case

Dashboard Goal

This dashboard helps you see how text decoration and case styles affect the readability and emphasis of business report titles and labels.

Sample Data

Text Sample	Decoration	Case Style	Example Text
Title 1	None	Sentence case	Quarterly sales report
Title 2	Underline	Uppercase	ANNUAL REVENUE
Title 3	Line-through	Lowercase	customer feedback
Title 4	Overline	Capitalize	Monthly expenses
Title 5	None	Title Case	Employee Performance

Dashboard Components

• KPI Card: Text Decoration Preview - Shows each text sample with its decoration style applied (none, underline, line-through, overline).
• KPI Card: Case Style Preview - Shows each text sample with its case style applied (sentence case, uppercase, lowercase, capitalize, title case).
• Table: Text Samples Table - Displays the sample data with columns for text, decoration, case style, and example text.

Dashboard Layout

+----------------------+----------------------+
| Text Decoration      | Case Style           |
| Preview (KPI Card)   | Preview (KPI Card)   |
+----------------------+----------------------+
|          Text Samples Table             |
|                (Full Width)             |
+----------------------------------------+

Interactivity

When you select a text sample in the table, the Text Decoration Preview and Case Style Preview update to show that sample's styles applied. This helps you compare how different decorations and cases look on the same text.

Self Check

If you filter the table to show only rows with Underline decoration, which components update and how?

• The Text Decoration Preview updates to show only the underlined text samples.
• The Case Style Preview updates to show the case styles of those filtered samples.
• The table shows only the filtered rows with underline decoration.

Key Result

Dashboard showing how different text decorations and case styles affect report titles and labels.