Responsive text behavior in Figma - Cell-by-Cell Formula Trace

Sample Data

This data represents a simple sales dashboard with regions and their sales figures.

Cell	Value
A1	Dashboard Title
A2	Sales Overview
A3	Total Sales
B3	120000
A4	Region
B4	Sales
A5	North
B5	40000
A6	South
B6	30000
A7	East
B7	25000
A8	West
B8	25000

Formula Trace

Responsive text behavior in Figma adjusts text size and wrapping based on container width and constraints.

Step 1: Text container width = 300px

Step 2: Text content length = 'Dashboard Title' (15 characters)

Step 3: Font size = 24px, line height = 28px

Step 4: Check if text fits in container width

Step 5: If container width reduces to 150px

Step 6: Text wrapping enabled

Step 7: Font size auto scales down to 18px

Step 8: Final text block height increases due to wrapping

Cell Reference Map

   A               B
1| Dashboard Title   
2| Sales Overview   
3| Total Sales    120000
4| Region         Sales
5| North          40000
6| South          30000
7| East           25000
8| West           25000

Arrows: Text container width affects how 'Dashboard Title' fits in A1.

Cells A1 to B8 contain sales data and titles. The text in A1 is the focus for responsive behavior based on container width.

Result

Container width: 300px
+----------------------------+
| Dashboard Title            |
+----------------------------+

Container width: 150px
+------------------+
| Dashboard        |
| Title            |
+------------------+

At 300px width, the title fits in one line. At 150px width, the title wraps into two lines and font size reduces for readability.

Sheet Trace Quiz - 3 Questions

What happens to the text when the container width reduces from 300px to 150px?

A Text wraps into multiple lines and font size reduces

B Text stays on one line and font size increases

C Text disappears

D Text becomes bold but size stays the same

Key Result

Responsive text behavior adjusts font size and wrapping based on container width constraints.