Text decoration and case in Figma - Deep Dive

Overview - Text decoration and case

What is it?

Text decoration and case in Figma are ways to change how text looks without changing the actual words. Text decoration adds styles like underlines or strikethroughs to text. Changing case means switching letters to uppercase, lowercase, or capitalized forms. These help make text clearer and more attractive in designs.

Why it matters

Without text decoration and case controls, designs can look plain or confusing. They help highlight important information, show links, or create a professional look. This makes reports and dashboards easier to read and understand, improving decision-making. Without these, users might miss key details or find reports hard to follow.

Where it fits

Before learning text decoration and case, you should know basic text editing and font selection in Figma. After mastering these, you can explore advanced typography, color use, and layout design to create polished BI dashboards and reports.

Mental Model

Core Idea

Text decoration and case change how text appears to guide readers’ attention and improve clarity without altering the text’s meaning.

Think of it like...

It's like dressing up a plain cake with icing and decorations to make it more appealing and easier to understand what flavor it is.

┌─────────────────────────────┐
│        Text Content          │
├─────────────┬───────────────┤
│ Decoration  │ Case Change   │
│ (underline, │ (uppercase,   │
│  strikethrough)│ lowercase) │
└─────────────┴───────────────┘

Build-Up - 6 Steps

1

Foundation

Basic Text Decoration Types

Concept: Introduce underline, strikethrough, and none as text decoration options.

In Figma, you can add underline or strikethrough to text to emphasize or mark it. Underline is often used for links or important points. Strikethrough shows something is removed or outdated. 'None' means no decoration.

Result

Text with underline appears with a line below; strikethrough has a line through the middle.

Knowing these basic decorations helps you signal meaning visually without extra words.

2

Foundation

Changing Text Case Options

Concept: Learn how to switch text to uppercase, lowercase, or capitalize each word.

Figma lets you change text case easily: uppercase makes all letters big, lowercase makes all small, and capitalize makes the first letter of each word big. This changes how text looks but not what it says.

Result

Text changes visually to the selected case style instantly.

Changing case helps create consistent styles and can highlight or soften text impact.

3

Intermediate

Combining Decoration and Case

🤔Before reading on: do you think text decoration and case changes affect the actual text data or just appearance? Commit to your answer.

Concept: Understand that decoration and case only change appearance, not the underlying text data.

When you apply underline or uppercase in Figma, the text content stays the same. This means copying or exporting text keeps the original letters and case. Decoration and case are visual styles only.

Result

Text looks different but copying it pastes the original text.

Knowing this prevents confusion when sharing or exporting text from designs.

4

Intermediate

Using Decoration and Case for BI Clarity

Concept: Learn how to use these styles to improve readability and highlight key data in BI reports.

Use underline to show clickable links or important notes. Use uppercase for headers or totals to stand out. Strikethrough can mark outdated or corrected data. Capitalize for names or titles to keep a professional look.

Result

Reports become easier to scan and understand at a glance.

Applying styles thoughtfully guides users’ eyes to the most important information.

5

Advanced

Accessibility and Consistency Considerations

🤔Before reading on: do you think overusing text decoration improves or harms report accessibility? Commit to your answer.

Concept: Explore how decoration and case affect accessibility and why consistent use matters.

Too many underlines or strikethroughs can confuse users, especially those with visual impairments. Consistent case use helps screen readers and keeps a clean look. Figma allows checking contrast and style consistency to support accessibility.

Result

Reports are both attractive and usable by all audiences.

Understanding accessibility ensures your designs communicate clearly to everyone.

6

Expert

Advanced Styling with Text Decoration and Case

🤔Before reading on: do you think Figma supports custom text decorations beyond underline and strikethrough? Commit to your answer.

Concept: Learn about Figma’s limitations and workarounds for advanced text decoration and case styling.

Figma natively supports only underline and strikethrough for decoration. For more styles like wavy underlines or mixed case, designers use layered shapes or plugins. Case changes are limited to all uppercase, lowercase, or capitalize; mixed case requires manual editing or plugins.

Result

Designers can create complex text styles but need extra steps beyond built-in tools.

Knowing these limits helps plan realistic designs and when to use plugins or manual fixes.

Under the Hood

Figma stores text as characters with style properties layered on top. Text decoration and case are visual style flags applied during rendering, not changes to the text data itself. When you change case, Figma renders letters differently but keeps the original text unchanged internally.

Why designed this way?

Separating text content from visual style allows easy editing, copying, and exporting without losing meaning. It also keeps file sizes smaller and supports consistent styling across multiple text elements.

┌───────────────┐
│ Text Content  │
│ (unchanged)  │
└──────┬────────┘
       │
┌──────▼────────┐
│ Style Layer   │
│ (decoration,  │
│  case flags)  │
└──────┬────────┘
       │
┌──────▼────────┐
│ Render Engine │
│ (draws styled │
│  text on screen)│
└───────────────┘

Myth Busters - 3 Common Misconceptions

Quick: Does changing text case in Figma alter the actual text content? Commit to yes or no.

Common Belief: Changing text case in Figma changes the actual letters in the text.

Reality: Text case changes only affect how text looks on screen; the underlying text remains the same.

Why it matters: If you think the text changes, you might worry about data accuracy or exporting issues unnecessarily.

Quick: Does applying underline always mean the text is a clickable link? Commit to yes or no.

Common Belief: Underlined text in Figma always indicates a clickable link.

Reality: Underline is just a style and can be used for emphasis or decoration, not only links.

Why it matters: Assuming underline means link can confuse users or lead to inconsistent design.

Quick: Can Figma create wavy or dotted underlines natively? Commit to yes or no.

Common Belief: Figma supports all kinds of text decorations like wavy or dotted underlines out of the box.

Reality: Figma only supports solid underline and strikethrough natively; other styles require workarounds.

Why it matters: Expecting unsupported decorations wastes time and causes frustration.

Expert Zone

1

Text decoration and case styles do not affect text search or accessibility APIs directly; designers must ensure semantic meaning elsewhere.

2

Changing case visually can cause confusion if users copy text expecting the styled case; understanding this helps avoid UX issues.

3

Plugins can automate consistent case and decoration styles across large BI reports, saving time and reducing errors.

When NOT to use

Avoid overusing text decoration and case changes when clarity is more important than style. For example, in raw data tables, keep text plain for easy scanning. Use color or layout instead for emphasis. When needing complex text effects, consider exporting to specialized tools like Adobe Illustrator.

Production Patterns

In BI dashboards, experts use uppercase for headers, underline for links, and strikethrough for deprecated data. They combine these with color coding and tooltips for clarity. Consistent style guides ensure all reports follow the same rules, improving user trust and comprehension.

Connections

Typography

Text decoration and case are fundamental parts of typography.

Understanding decoration and case deepens knowledge of how typography guides reader attention and meaning.

User Experience Design

Decoration and case influence how users perceive and interact with text elements.

Knowing these styles helps UX designers create clearer, more accessible interfaces.

Linguistics

Case changes relate to grammar rules and meaning in language.

Recognizing how case affects meaning in language helps avoid miscommunication in BI reports.

Common Pitfalls

#1 Applying underline to all important text, causing visual clutter.

Wrong approach:

TextDecoration: underline applied to every label and number in the report.

Correct approach:

TextDecoration: underline applied only to clickable links or key notes.

Root cause:

Misunderstanding that underline should highlight only specific elements, not everything.

#2 Changing text to uppercase manually by retyping instead of using case styles.

Wrong approach:

Manually retyping all headers in uppercase letters.

Correct approach:

Using Figma’s uppercase case style to change appearance without altering text data.

Root cause:

Not knowing Figma’s case style feature leads to extra work and inconsistent text.

#3 Expecting strikethrough to remove text from exports or data.

Wrong approach:

Using strikethrough to hide outdated data, assuming it won’t appear in exports.

Correct approach:

Mark outdated data with strikethrough but remove or filter it in data sources for exports.

Root cause:

Confusing visual style with data filtering or deletion.

Key Takeaways

Text decoration and case in Figma change how text looks without changing the actual text content.

Using underline, strikethrough, and case changes thoughtfully improves report clarity and user focus.

Decoration and case styles are visual only; copying or exporting text keeps the original letters.

Overusing decoration can harm readability and accessibility; consistency and moderation are key.

Figma supports basic decorations and case changes natively; advanced styles require plugins or manual work.

Practice

1. Which text decoration in Figma adds a line below the text to emphasize it?

easy

A. Shadow

B. Strikethrough

C. Overline

D. Underline

Solution

1. Step 1: Understand text decoration types

   Underline adds a line below text, strikethrough adds a line through the middle, overline adds a line above.

2. Step 2: Identify the decoration that adds a line below

   Underline is the decoration that places a line below the text to emphasize it.

3. Final Answer:

   Underline -> Option D

4. Quick Check:

   Underline = line below text [OK]

Hint: Underline means line below text, easy to remember [OK]

Common Mistakes:

• Confusing underline with strikethrough
• Thinking shadow is a line
• Mixing overline with underline

2. Which of the following is the correct way to set text to uppercase in Figma's text properties panel?

easy

A. Select text, then choose 'lowercase' option

B. Select text, then choose 'uppercase' option

C. Select text, then choose 'capitalize' option

D. Select text, then choose 'strikethrough' option

Solution

1. Step 1: Review text case options in Figma

   Figma offers lowercase, uppercase, and capitalize options to change text case.

2. Step 2: Identify the option that converts text to all uppercase letters

   The 'uppercase' option changes all letters to capital letters.

3. Final Answer:

   Select text, then choose 'uppercase' option -> Option B

4. Quick Check:

   Uppercase option = all capital letters [OK]

Hint: Uppercase means all letters capitalized [OK]

Common Mistakes:

• Choosing lowercase instead of uppercase
• Confusing capitalize with uppercase
• Selecting strikethrough by mistake

3. Given a text layer in Figma with the text "hello world" and the text case set to 'capitalize', what will be the displayed text?

medium

A. Hello World

B. HELLO WORLD

C. hello world

D. HeLLo WoRLD

Solution

1. Step 1: Understand the 'capitalize' text case effect

   Capitalize changes the first letter of each word to uppercase and the rest to lowercase.

2. Step 2: Apply capitalize to 'hello world'

   Each word's first letter becomes uppercase: 'Hello World'.

3. Final Answer:

   Hello World -> Option A

4. Quick Check:

   Capitalize = first letter uppercase [OK]

Hint: Capitalize means first letter uppercase in each word [OK]

Common Mistakes:

• Confusing capitalize with uppercase
• Expecting all lowercase
• Mixing random letter cases

4. You applied strikethrough to a text layer in Figma, but the line does not appear. What is the most likely reason?

medium

A. You need to select underline instead of strikethrough

B. Strikethrough is not supported in Figma

C. The text color is the same as the background color

D. The font size is too large

Solution

1. Step 1: Check if strikethrough is supported in Figma

   Figma supports strikethrough, so Strikethrough is not supported in Figma is incorrect.

2. Step 2: Consider visibility issues

   If the text color matches the background, the strikethrough line won't be visible.

3. Final Answer:

   The text color is the same as the background color -> Option C

4. Quick Check:

   Invisible line = color matches background [OK]

Hint: Check color contrast if decoration is invisible [OK]

Common Mistakes:

• Thinking strikethrough is unsupported
• Confusing underline with strikethrough
• Blaming font size for missing line

5. You want to create a report title in Figma that is all uppercase, underlined, and visually clear on both light and dark backgrounds. Which combination of settings is best?

hard

A. Set text case to uppercase, apply underline, use a high-contrast color like white on dark or black on light

B. Set text case to lowercase, apply strikethrough, use gray color

C. Set text case to capitalize, no decoration, use pastel colors

D. Set text case to uppercase, apply overline, use same color as background

Solution

1. Step 1: Identify text case for all uppercase

   Use uppercase setting to make all letters capital.

2. Step 2: Choose underline for emphasis

   Underline adds a clear line below the title for emphasis.

3. Step 3: Select high-contrast colors for visibility

   White on dark or black on light ensures text is visible on both backgrounds.

4. Final Answer:

   Set text case to uppercase, apply underline, use a high-contrast color like white on dark or black on light -> Option A

5. Quick Check:

   Uppercase + underline + high contrast = clear title [OK]

Hint: Use uppercase + underline + high contrast for clear titles [OK]

Common Mistakes:

• Using lowercase or capitalize instead of uppercase
• Choosing strikethrough instead of underline
• Using low contrast colors