Auto-width vs auto-height text in Figma - Formula Comparison Trace

Concept Flow

Auto-width text box: width adjusts to fit text in one line, height fixed.
Auto-height text box: width fixed, height adjusts to fit wrapped text.

This concept explains the difference between auto-width and auto-height text boxes in Figma. Auto-width boxes grow horizontally to fit text in a single line, keeping height constant. Auto-height boxes keep width fixed and grow vertically to fit text wrapped in multiple lines.

Formula

Text length = 50 characters Fixed width = 100 px Average character width = 5 px Characters per line = 100 / 5 = 20 Number of lines = ceil(50 / 20) = 3 Line height = 14 px Total height = 3 * 14 = 42 px

Step-by-step calculation of the height for an auto-height text box with fixed width 100px and text length 50 characters.

Step-by-Step Trace

Step	Expression	Evaluates To	Explanation
1	Text length = 50 characters	50	Count the number of characters in the text.
2	Fixed width = 100 px	100	Width of the auto-height text box is fixed.
3	Characters per line = 100 / 5	20	Estimate characters fitting in one line.
4	Number of lines = ceil(50 / 20)	3	Calculate how many lines the text wraps into.
5	Line height = 14 px	14	Height of each line of text.
6	Total height = 3 * 14	42	Total height needed to fit all lines.

The auto-height text box height is 42 px to fit wrapped text within fixed width 100 px.

Variable Tracker

Variable	Value
Text length	50 characters
Fixed width	100 px
Average character width	5 px
Characters per line	20
Number of lines	3
Line height	14 px
Total height	42 px

Key Moments

What determines the width of an auto-width text box?

How is the height of an auto-height text box calculated?

Why does the auto-height text box height increase?

Sheet Trace Quiz - 3 Questions

What happens to the width of an auto-width text box when text length increases?

A Both width and height stay fixed

B Width increases to fit text in one line

C Width stays fixed and height increases

D Width decreases to fit text

Key Result

Auto-width text boxes adjust width to fit text in one line, keeping height fixed. Auto-height text boxes keep width fixed and adjust height to fit wrapped text lines.

Transcript

In Figma, auto-width text boxes grow horizontally to fit the entire text in a single line, so their width changes but height stays the same. Auto-height text boxes keep their width fixed and grow vertically to fit the text wrapped in multiple lines. We calculate the height by dividing the text length by how many characters fit per line, then multiplying by the line height. This helps designers control text layout effectively.