Text decoration and case in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a UI/UX designer working on a sales dashboard for your company's marketing team.

📋 Request: Your manager wants the dashboard text to be clear and visually appealing. They ask you to apply text decorations and adjust text case to improve readability and highlight important information.

📊 Data: You have a dashboard prototype with various text elements such as titles, labels, and data values.

🎯 Deliverable: You need to create a Figma design file where text decorations (underline, strikethrough, overline) and text case (uppercase, lowercase, capitalize) are applied appropriately to different text elements.

Sample Data

Text Element	Current Text	Purpose
Title	monthly sales report	Main heading
Section Label	total revenue	Section heading
Data Value	$150,000	Key metric
Note	data is preliminary	Additional info
Link	view details	Clickable link

1

Step 1: Select the Title text element and change its text case to uppercase.

In Figma, select the Title text layer, then in the Text panel, choose 'Uppercase' from the text case dropdown.

Expected Result

Title text changes from 'monthly sales report' to 'MONTHLY SALES REPORT'.

2

Step 2: Select the Section Label text element and apply capitalization to each word.

Select the Section Label text layer, then choose 'Title Case' or 'Capitalize' in the text case options.

Expected Result

Section Label text changes from 'total revenue' to 'Total Revenue'.

3

Step 3: Select the Data Value text element and apply underline decoration to highlight it.

Select the Data Value text layer, then enable 'Underline' in the text decoration options.

Expected Result

Data Value text '$150,000' is underlined.

4

Step 4: Select the Note text element and apply italic style and strikethrough decoration to indicate preliminary status.

Select the Note text layer, enable 'Italic' style and 'Strikethrough' decoration in the text panel.

Expected Result

Note text 'data is preliminary' is italicized and has a strikethrough line.

5

Step 5: Select the Link text element and apply underline decoration and lowercase text case for consistent link style.

Select the Link text layer, enable 'Underline' decoration and set text case to 'lowercase'.

Expected Result

Link text changes from 'view details' to 'view details' with underline.

Final Result

-----------------------------------------
| MONTHLY SALES REPORT                   |
|                                       |
| Total Revenue                         |
| $150,000                             |
|                                       |
| *data is preliminary* (strikethrough) |
|                                       |
| view details (underlined link)        |
-----------------------------------------

✓Uppercase text for main titles improves visibility and emphasis.

✓Capitalized section labels enhance readability and professionalism.

✓Underlining key data values draws attention to important metrics.

✓Italic and strikethrough on notes clearly indicate preliminary or tentative information.

✓Consistent underline and lowercase style for links improves user recognition.

Bonus Challenge

Create a Figma prototype where hovering over the link changes its text decoration from underline to overline and changes text case to uppercase.

Show Hint

Use Figma's interactive components feature to create hover states with different text decoration and case styles.