Auto-width vs auto-height text in Figma - Dashboard Approaches Compared

Dashboard Mode - Auto-width vs auto-height text

Goal

Understand how auto-width and auto-height text boxes behave in Figma to create clear dashboard labels and descriptions.

Sample Data

Text Box Type	Initial Text	Behavior on Text Change
Auto-width	Sales	Width adjusts to text length; height stays fixed
Auto-height	Monthly Revenue	Height adjusts to text length; width stays fixed
Auto-width	Profit Margin	Width adjusts; height fixed
Auto-height	Customer Feedback Summary	Height adjusts; width fixed
Auto-width	Q1	Width adjusts; height fixed

Dashboard Components

• KPI Card: Label uses auto-width text box so label width fits text exactly, keeping card compact.
• Description Box: Uses auto-height text box with fixed width to allow multi-line text wrapping for longer explanations.
• Filter Label: Auto-width text box to keep filter label short and neat.
• Notes Section: Auto-height text box with fixed width to show detailed notes without horizontal scrolling.

Dashboard Layout

+----------------------+----------------------+
| KPI Card (auto-width) | Filter Label (auto-width) |
+----------------------+----------------------+
| Description Box (auto-height, fixed width)          |
|                                                    |
+----------------------------------------------------+
| Notes Section (auto-height, fixed width)            |
|                                                    |
+----------------------------------------------------+

Interactivity

When filter selections change, the KPI card label text may update, resizing its width automatically. Description and notes boxes adjust height if their text content changes, keeping width fixed for consistent layout.

Self Check

If you change the KPI label text to a longer word, which component changes size? Answer: The KPI Card label's width changes because it is auto-width.

If you add more lines to the Notes Section text, what happens? Answer: The Notes Section height increases because it is auto-height with fixed width.

Key Result

Shows how auto-width and auto-height text boxes affect dashboard label and description sizing in Figma.