Bird
Raised Fist0
Figmabi_tool~5 mins

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

Choose your learning style10 modes available
LearnWhyDeepSheetTryChallengeScenarioRecallDash

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
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.

Practice

(1/5)
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