0
0
Figmabi_tool~5 mins

Text decoration and case in Figma - Step-by-Step Guide

Choose your learning style9 modes available
Introduction
Text decoration and case features in Figma help you change how text looks by adding styles like underline or changing letters to uppercase. This makes your reports and dashboards clearer and more attractive.
When you want to highlight important numbers by underlining them in a report
When you need all titles in your dashboard to be uppercase for consistency
When you want to add a strikethrough to show outdated data in a table
When you want to make labels easier to read by capitalizing the first letter of each word
When you want to remove all text decorations to keep the design clean
Steps
Step 1: Select the text layer
- Layers panel or directly on the canvas
The text layer is highlighted and ready for editing
Step 2: Open the Text section
- Right sidebar under the Design tab
Text properties like font, size, and decoration options appear
Step 3: Click the 'Text Decoration' dropdown
- Text section in the right sidebar
Options like None, Underline, and Strikethrough are shown
Step 4: Select the desired text decoration (e.g., Underline)
- Text Decoration dropdown
The selected text shows the chosen decoration style immediately
Step 5: Click the 'Case' dropdown
- Text section in the right sidebar
Options like Original, Uppercase, Lowercase, and Title Case appear
Step 6: Select the desired case style (e.g., Uppercase)
- Case dropdown
The text changes to the selected case style instantly
Before vs After
Before
Text reads 'Sales Report 2024' with no decoration and mixed case
After
Text reads 'SALES REPORT 2024' with uppercase letters and underlined
Settings Reference
Text Decoration
📍 Right sidebar > Design tab > Text section
Adds or removes lines under or through the text to emphasize or mark it
Default: None
Case
📍 Right sidebar > Design tab > Text section
Changes the letter case of the selected text for style or clarity
Default: Original
Common Mistakes
Trying to apply text decoration or case without selecting a text layer
Figma cannot apply text styles if no text is selected
Always select the text layer first before changing decoration or case
Expecting text case changes to affect the original text content permanently
Case changes in Figma only affect appearance, not the actual text data
Use case changes for visual styling only; edit text content separately if needed
Summary
Text decoration adds underline or strikethrough styles to text for emphasis.
Case options change text to uppercase, lowercase, or title case for consistency.
Always select the text layer before applying these styles to see immediate changes.