Auto-width vs auto-height text in Figma - Practice Questions

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Auto-width Text Behavior

In Figma, what happens when you set a text box to auto-width?

Choose the correct description of its behavior.

A The text box width adjusts to fit the text content, height remains fixed.

B The text box height adjusts to fit the text content, width remains fixed.

C Both width and height adjust automatically to fit the text content.

D The text box size remains fixed regardless of text content changes.

💡 Hint

Think about which dimension changes to fit the text when auto-width is enabled.

Auto-width means the width changes to fit the text, while height stays fixed.

🧠 Conceptual

intermediate

Understanding Auto-height Text Behavior

What is the behavior of a text box set to auto-height in Figma?

Select the correct statement.

A The text box width adjusts to fit the text content, height remains fixed.

B The text box height adjusts to fit the text content, width remains fixed.

C Both width and height adjust automatically to fit the text content.

D The text box size remains fixed regardless of text content changes.

💡 Hint

Consider which dimension changes to fit the text when auto-height is enabled.

Auto-height means the height changes to fit the text, while width stays fixed.

❓ visualization

advanced

Choosing Text Box Settings for Responsive Design

You want a text box that expands vertically as the user types more lines but keeps a fixed width for layout consistency. Which setting should you use?

A Set the text box to auto-height.

B Set the text box to auto-width.

C Set the text box to fixed size.

D Set the text box to auto-width and auto-height.

💡 Hint

Think about which dimension should grow to accommodate multiple lines.

Auto-height allows the text box to grow vertically with more lines, while width stays fixed.

🎯 Scenario

advanced

Fixing Text Overflow in a Dashboard Widget

You have a dashboard widget with a fixed width text box. When the text is too long, it overflows and is cut off. Which setting change will fix this issue without changing the widget width?

A Change the text box to auto-width to fit the text.

B Set the text box to fixed size and reduce font size.

C Enable text truncation with ellipsis.

D Change the text box to auto-height to allow vertical expansion.

💡 Hint

Consider how to keep width fixed but avoid cutting off text.

Auto-height lets the text box grow vertically to show all text without changing width.

🔧 Formula Fix

expert

Diagnosing Unexpected Text Box Behavior

A designer sets a text box to auto-width but notices the text is wrapping to multiple lines unexpectedly. What is the most likely cause?

A The text box has a fixed height that forces wrapping.

B The text box is set to auto-height instead of auto-width.

C The text box has a max width set that limits expansion.

D The font size is too large for the text box width.

💡 Hint

Think about what limits the width even when auto-width is set.

A max width constraint can limit the width expansion, causing text to wrap despite auto-width.

Practice

1. What happens to an auto-width text box in Figma when you add more text on a single line?

easy

A. The text box gets wider but the height stays the same.

B. The text box gets taller but the width stays the same.

C. The text box stays the same size.

D. The text box gets both wider and taller.

Solution

1. Step 1: Understand auto-width behavior

   An auto-width text box expands horizontally as more text is added on the same line.

2. Step 2: Check height behavior

   The height remains fixed because the text does not wrap to a new line.

3. Final Answer:

   The text box gets wider but the height stays the same. -> Option A

4. Quick Check:

   Auto-width means width changes, height fixed [OK]

Hint: Auto-width grows sideways, height stays fixed [OK]

Common Mistakes:

• Thinking height changes with more text on one line
• Confusing auto-width with auto-height behavior
• Assuming box size stays fixed always

2. Which of the following is the correct way to set a text box to auto-height in Figma?

easy

A. Select the text box and choose 'Fixed Size' in the properties panel.

B. Select the text box and choose 'Auto Width' in the properties panel.

C. Select the text box and manually drag the height to fit text.

D. Select the text box and choose 'Auto Height' in the properties panel.

Solution

1. Step 1: Identify the property for auto-height

   In Figma, setting a text box to auto-height is done by selecting 'Auto Height' in the properties panel.

2. Step 2: Eliminate other options

   'Fixed Size' locks dimensions, 'Auto Width' changes width, and manual dragging is not automatic resizing.

3. Final Answer:

   Select the text box and choose 'Auto Height' in the properties panel. -> Option D

4. Quick Check:

   Auto-height is set by choosing 'Auto Height' [OK]

Hint: Pick 'Auto Height' option to grow height automatically [OK]

Common Mistakes:

• Choosing 'Auto Width' instead of 'Auto Height'
• Thinking manual drag sets auto-height
• Confusing 'Fixed Size' with auto resizing

3. Given an auto-height text box with a fixed width of 200px, what will happen if you paste a paragraph of text that wraps into 5 lines?

medium

A. The text box height will increase to fit the 5 lines.

B. The text box will shrink to fit the text.

C. The text box size will stay fixed and text will overflow.

D. The text box width will increase to fit the text.

Solution

1. Step 1: Understand auto-height with fixed width

   Auto-height text boxes keep width fixed but grow taller as text wraps to new lines.

2. Step 2: Apply to 5-line paragraph

   Since the paragraph wraps into 5 lines, the height will increase to fit all lines without cutting off text.

3. Final Answer:

   The text box height will increase to fit the 5 lines. -> Option A

4. Quick Check:

   Auto-height means height grows, width fixed [OK]

Hint: Auto-height grows down with wrapped lines [OK]

Common Mistakes:

• Assuming width changes with auto-height
• Thinking text overflows instead of box growing
• Confusing auto-width behavior here

4. You set a text box to auto-width but notice the height changes unexpectedly when you add text. What is the most likely cause?

medium

A. The font size is too small to affect height.

B. The text box has a fixed width and height.

C. The text box is actually set to auto-height, not auto-width.

D. The text box is locked and cannot resize.

Solution

1. Step 1: Analyze unexpected height change

   If height changes when adding text, the box is likely set to auto-height, which grows vertically.

2. Step 2: Confirm setting mismatch

   Since auto-width should keep height fixed, the unexpected height change means the setting is not auto-width.

3. Final Answer:

   The text box is actually set to auto-height, not auto-width. -> Option C

4. Quick Check:

   Height changes mean auto-height setting [OK]

Hint: Height changes? Check if auto-height is set instead [OK]

Common Mistakes:

• Assuming fixed size allows height change
• Ignoring the actual text box setting
• Thinking font size affects resizing mode

5. You want a text box that keeps a fixed width of 300px but automatically adjusts height as the user types multiple lines. Which setting should you choose and why?

hard

A. Auto-width, because it grows width with text.

B. Auto-height, because it grows height with wrapped lines.

C. Fixed size, because it keeps both width and height fixed.

D. Manual resize, because auto settings don't allow height changes.

Solution

1. Step 1: Identify requirement for fixed width and variable height

   The text box must keep width fixed at 300px but grow taller as lines increase.

2. Step 2: Match setting to requirement

   Auto-height keeps width fixed and adjusts height automatically with wrapped lines, fitting the need.

3. Step 3: Eliminate other options

   Auto-width changes width, fixed size locks both dimensions, manual resize is not automatic.

4. Final Answer:

   Auto-height, because it grows height with wrapped lines. -> Option B

5. Quick Check:

   Fixed width + growing height = Auto-height [OK]

Hint: Fixed width + variable height? Choose auto-height [OK]

Common Mistakes:

• Choosing auto-width which changes width
• Thinking fixed size allows auto height
• Believing manual resize is automatic