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

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.

Sample Data

Text Type	Sample Text
Title	Monthly Sales Report
Description	This report shows the sales trends for the last 12 months across all regions.
Title	Customer Feedback Summary
Description	Summary 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.