Responsive text behavior in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the text resizing mode to fit the container width.

Figma

text.resizeMode = "[1]"

Drag options to blanks, or click blank then click option'

Afixed

BautoWidth

CautoHeight

DfitWidth

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'fixed' which does not resize text.

Confusing 'autoHeight' with width resizing.

Setting resizeMode to fitWidth makes the text adjust its size to fit the container's width.

2fill in blank

medium

Complete the code to enable text truncation with an ellipsis when it overflows.

Figma

text.overflowBehavior = "[1]"

Drag options to blanks, or click blank then click option'

Aellipsis

Bscroll

Cvisible

Dclip

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'clip' which cuts text abruptly.

Using 'visible' which shows overflow without truncation.

Setting overflowBehavior to ellipsis adds '...' when text is too long.

3fill in blank

hard

Fix the error in the code to make the text auto-resize within its container height.

Figma

text.resizeMode = "[1]"

Drag options to blanks, or click blank then click option'

Afixed

BfitWidth

CautoHeight

DautoWidth

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing 'fitWidth' which only adjusts width.

Using 'fixed' which disables resizing.

Using autoHeight allows text to resize based on container height.

4fill in blank

hard

Fill both blanks to set text to resize automatically and truncate overflow with ellipsis.

Figma

text.resizeMode = "[1]"
text.overflowBehavior = "[2]"

Drag options to blanks, or click blank then click option'

AautoWidth

Bellipsis

Cclip

Dfixed

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing 'clip' with resizing which hides overflow abruptly.

Using 'fixed' disables resizing.

Setting resizeMode to autoWidth resizes text horizontally, and overflowBehavior to ellipsis truncates overflow with dots.

5fill in blank

hard

Fill all three blanks to set text to auto resize height, clip overflow, and set minimum font size to 12.

Figma

text.resizeMode = "[1]"
text.overflowBehavior = "[2]"
text.minFontSize = [3]

Drag options to blanks, or click blank then click option'

AautoHeight

Bclip

C12

Dellipsis

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'ellipsis' instead of 'clip' for overflow.

Setting minFontSize as a string instead of a number.

Using autoHeight resizes text vertically, clip hides overflow without dots, and setting minFontSize to 12 ensures text doesn't get too small.