Bird
Raised Fist0
Figmabi_tool~5 mins

Text decoration and case in Figma - Cheat Sheet & Quick Revision

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
Recall & Review
beginner
What does text decoration mean in Figma?
Text decoration refers to styles added to text like underline, strikethrough, or overline to make it stand out or show meaning.
Click to reveal answer
beginner
How can you change the case of text in Figma?
You can change text case to uppercase, lowercase, or title case using the text properties panel in Figma.
Click to reveal answer
beginner
Name three common text decorations you can apply in Figma.
Underline, strikethrough, and overline are common text decorations in Figma.
Click to reveal answer
intermediate
Why is using text case transformations helpful in design?
Changing text case helps create hierarchy, improve readability, and keep consistent style without retyping text.
Click to reveal answer
beginner
What is the difference between strikethrough and underline in text decoration?
Underline adds a line below the text, often for links. Strikethrough adds a line through the middle, usually to show deletion or change.
Click to reveal answer
Which text decoration adds a line through the middle of the text?
AStrikethrough
BOverline
CUnderline
DShadow
How do you change text to uppercase in Figma?
AManually retype all letters in uppercase
BUse the text case option in the text properties panel
CApply a text decoration
DUse the color picker
Which of these is NOT a text decoration option in Figma?
AOverline
BStrikethrough
CUnderline
DBold
Why might a designer use title case on text?
ATo capitalize the first letter of each word for readability
BTo change font size
CTo add underline decoration
DTo make all letters lowercase
What does the overline text decoration do?
AAdds a line below the text
BAdds a line through the middle of the text
CAdds a line above the text
DChanges text color
Explain how you would apply and change text decoration styles in Figma.
Think about the panel where you edit text and the options you see for lines on text.
You got /5 concepts.
    Describe the benefits of using text case transformations in your design projects.
    Consider why changing text case without retyping saves time and helps design.
    You got /4 concepts.

      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