Bird
Raised Fist0
Figmabi_tool~15 mins

Auto-width vs auto-height text in Figma - Business Scenario Comparison

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
Scenario Mode
👤 Your Role: You are a UI/UX designer working with a product team.
📋 Request: Your manager wants you to create a dashboard mockup in Figma that clearly shows the difference between auto-width and auto-height text boxes for BI report titles and descriptions.
📊 Data: You have sample text strings of varying lengths to use as titles and descriptions for dashboard cards.
🎯 Deliverable: A Figma file with two dashboard card examples: one using auto-width text boxes and one using auto-height text boxes, each clearly labeled.
Progress0 / 8 steps
Sample Data
Text TypeSample Text
TitleMonthly Sales Report
DescriptionThis report shows the sales trends for the last 12 months across all regions.
TitleCustomer Feedback Summary
DescriptionSummary of customer feedback collected through surveys and support tickets.
1
Step 1: Create a new Figma frame sized 400x200 pixels to represent a dashboard card.
Use the Frame tool and set width=400px, height=200px.
Expected Result
A blank dashboard card frame appears with the specified size.
2
Step 2: Add a text box inside the frame for the title using auto-width setting.
Select Text tool, type 'Monthly Sales Report', set text box to auto-width (default), position at top-left with 20px margin.
Expected Result
Title text fits in one line, width adjusts to text length, height remains fixed.
3
Step 3: Add a text box below the title for description using auto-height setting.
Select Text tool, type 'This report shows the sales trends for the last 12 months across all regions.', set text box width fixed at 360px, height auto adjusts to fit text, position 10px below title.
Expected Result
Description text wraps within fixed width, height expands to show all lines.
4
Step 4: Duplicate the frame to create a second dashboard card example.
Copy the first frame and paste it below with 40px vertical spacing.
Expected Result
Two identical frames stacked vertically.
5
Step 5: In the second frame, set the title text box to auto-height with fixed width.
Select title text box, set width fixed at 360px, height auto adjusts, text wraps if needed.
Expected Result
Title text wraps into multiple lines if too long, height changes accordingly.
6
Step 6: In the second frame, set the description text box to auto-width with fixed height.
Select description text box, set height fixed at 60px, width auto adjusts to text length, no wrapping.
Expected Result
Description text stays in one line, width changes to fit text, text may overflow frame horizontally if too long.
7
Step 7: Add labels above each frame to indicate 'Auto-width Title & Auto-height Description' and 'Auto-height Title & Auto-width Description'.
Use Text tool, type labels, position above each frame with 10px margin.
Expected Result
Clear labels appear above each dashboard card example.
8
Step 8: Review the layout to ensure spacing and alignment are consistent and visually clear.
Use alignment tools and spacing guides in Figma.
Expected Result
Dashboard cards and labels are neatly aligned and spaced for easy comparison.
Final Result
Auto-width Title & Auto-height Description
↓
Auto-height Title & Auto-width Description
✓Auto-width text boxes adjust width to fit text on one line, keeping height fixed.
✓Auto-height text boxes have fixed width and adjust height to wrap text into multiple lines.
✓Using auto-width for titles keeps them in one line but may cause layout overflow if text is too long.
✓Using auto-height for descriptions allows text to wrap neatly within fixed width, improving readability.
✓Choosing between auto-width and auto-height depends on the design goal: single-line titles or multi-line descriptions.
Bonus Challenge

Create a responsive dashboard card in Figma that switches between auto-width and auto-height text boxes based on frame size.

Show Hint
Use Figma's Auto Layout and Constraints features to make text boxes adapt when resizing the frame.

Practice

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