Text decoration and case in Figma - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ visualization

intermediate

Identify the correct text decoration for a report title

You want the report title to have a line below it to separate it visually from the content. Which text decoration should you apply in Figma?

A Underline

B Strikethrough

C Overline

D No decoration

💡 Hint

Think about a line below the text, not through or above it.

Underline adds a line below the text, which is commonly used to highlight titles or links.

🧠 Conceptual

intermediate

Understanding text case options in Figma

Which text case option in Figma changes all letters to uppercase regardless of how you typed them?

A Sentence Case

B Uppercase

C Lowercase

D Title Case

💡 Hint

Think about making all letters capital.

Uppercase converts all letters to capital letters.

🔧 Formula Fix

advanced

Fix the text decoration issue in a dashboard label

You applied strikethrough to a dashboard label in Figma, but it does not show. What is the most likely reason?

A The text color is the same as the background

B The text layer is locked

C Strikethrough is not supported on text layers in Figma

D The font does not support strikethrough decoration

💡 Hint

Check if the strikethrough line is visible against the background.

If the text color matches the background, the strikethrough line will not be visible even if applied.

🎯 Scenario

advanced

Choosing text case for a KPI value in a dashboard

You want to display a KPI value label in lowercase letters to create a casual tone. Which Figma text case option should you use?

A Uppercase

B Title Case

C Lowercase

D Sentence Case

💡 Hint

Think about making all letters small.

Lowercase converts all letters to small letters, which fits a casual tone.

❓ dax_lod_result

expert

Calculate the number of uppercase words in a text column

In Power BI, you have a column 'ProductName' and want to create a measure that counts how many words in each product name are fully uppercase. Which DAX expression correctly calculates this count?

Figma

CountUppercaseWords =
VAR Words = SUBSTITUTE([ProductName]," ","|")
RETURN
COUNTROWS(
    FILTER(
        GENERATESERIES(1, PATHLENGTH(Words)),
        PATHITEM(Words, [Value]) = UPPER(PATHITEM(Words, [Value]))
    )
)

A

CountUppercaseWords =
VAR Words = SUBSTITUTE([ProductName]," ","|")
RETURN
SUMX(
    GENERATESERIES(1, PATHLENGTH(Words)),
    IF(PATHITEM(Words, [Value]) = PROPER(PATHITEM(Words, [Value])), 1, 0)
)

B

CountUppercaseWords =
VAR Words = SUBSTITUTE([ProductName]," ","|")
RETURN
SUMX(
    GENERATESERIES(1, PATHLENGTH(Words)),
    IF(PATHITEM(Words, [Value]) = UPPER(PATHITEM(Words, [Value])), 1, 0)
)

C

CountUppercaseWords =
VAR Words = SUBSTITUTE([ProductName]," ","|")
RETURN
COUNTROWS(
    FILTER(
        GENERATESERIES(1, PATHLENGTH(Words)),
        PATHITEM(Words, [Value]) = LOWER(PATHITEM(Words, [Value]))
    )
)

D

CountUppercaseWords =
VAR Words = SUBSTITUTE([ProductName]," ","|")
RETURN
COUNTROWS(
    FILTER(
        GENERATESERIES(1, PATHLENGTH(Words)),
        PATHITEM(Words, [Value]) = UPPER(PATHITEM(Words, [Value]))
    )
)

💡 Hint

Check which option counts words fully uppercase correctly.

Option D counts words where the word equals its uppercase version, correctly identifying fully uppercase words.

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