Bird
Raised Fist0
Figmabi_tool~15 mins

Responsive text behavior in Figma - Real Business Scenario

Choose your learning style10 modes available
LearnWhyDeepSheetTryChallengeScenarioRecallDash

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Scenario Mode
👤 Your Role: You are a UI/UX designer working on a sales dashboard in Figma.
📋 Request: Your manager wants the dashboard text to adjust automatically for different screen sizes, so users can read it easily on phones, tablets, and desktops.
📊 Data: You have a dashboard design with text elements like titles, labels, and data values. The text currently has fixed font sizes.
🎯 Deliverable: Create a Figma design where text sizes respond smoothly to screen width changes, maintaining readability and layout balance.
Progress0 / 5 steps
Sample Data
ElementCurrent Font Size (px)Screen Size
Dashboard Title24Desktop (1200px width)
Section Header18Desktop (1200px width)
Data Label14Desktop (1200px width)
Dashboard Title16Mobile (375px width)
Section Header12Mobile (375px width)
Data Label10Mobile (375px width)
1
Step 1: Select the Dashboard Title text element in Figma.
Apply a 'Text Auto Layout' with font size set to 'clamp(16px, 2vw, 24px)' to make the font size responsive between 16px and 24px depending on viewport width.
Expected Result
Dashboard Title font size adjusts smoothly between 16px on small screens and 24px on large screens.
2
Step 2: Select the Section Header text element.
Set font size to 'clamp(12px, 1.5vw, 18px)' using Figma's responsive text settings.
Expected Result
Section Header font size scales between 12px and 18px based on screen width.
3
Step 3: Select the Data Label text elements.
Set font size to 'clamp(10px, 1vw, 14px)' for responsive scaling.
Expected Result
Data Label font size changes smoothly from 10px on small screens to 14px on large screens.
4
Step 4: Preview the dashboard design in Figma's responsive mode.
Resize the frame width from 375px to 1200px and observe text resizing.
Expected Result
All text elements resize smoothly and remain readable without layout breaking.
5
Step 5: Check color contrast and accessibility for all text sizes.
Use Figma's accessibility plugin to verify contrast ratios meet WCAG AA standards.
Expected Result
Text colors have sufficient contrast on all screen sizes for readability.
Final Result
Responsive Text Dashboard

+---------------------------------------+
| Dashboard Title (16px - 24px)         |
|---------------------------------------|
| Section Header (12px - 18px)          |
| Data Label 1 (10px - 14px)            |
| Data Label 2 (10px - 14px)            |
+---------------------------------------+

Resize frame width to see text sizes adjust smoothly.
✓Responsive font sizes improve readability on all devices.
✓Using clamp() ensures text does not get too small or too large.
✓Maintaining color contrast is essential for accessibility.
✓Figma's responsive text settings help create flexible UI designs.
Bonus Challenge

Add responsive line height and letter spacing to text elements for better readability on different screen sizes.

Show Hint
Use clamp() for line height and letter spacing values similar to font size to keep proportions consistent.

Practice

(1/5)
1. What does Auto Width do for text in Figma when designing responsive dashboards?
easy
A. It hides the text on smaller screens.
B. It fixes the text box width regardless of text length.
C. It adjusts the text box width to fit the text on a single line.
D. It wraps the text into multiple lines automatically.

Solution

  1. Step 1: Understand Auto Width behavior

    Auto Width resizes the text box width to fit the text content on one line without wrapping.

  2. Step 2: Compare with other options

    Unlike fixed width or Auto Height, Auto Width keeps text in a single line by adjusting box width.

  3. Final Answer:

    It adjusts the text box width to fit the text on a single line. -> Option C

  4. Quick Check:

    Auto Width = fits text in one line [OK]
Hint: Auto Width means text box grows horizontally to fit text [OK]
Common Mistakes:
  • Confusing Auto Width with Auto Height
  • Thinking Auto Width wraps text
  • Assuming Auto Width fixes box size
2. Which of the following is the correct way to set text resizing in Figma for a paragraph that should wrap and adjust height automatically?
easy
A. Set resizing to Auto Height
B. Set resizing to Auto Width
C. Set resizing to Fixed Size
D. Set resizing to Fixed Height

Solution

  1. Step 1: Identify wrapping text needs

    Paragraph text that wraps requires the height to adjust automatically as lines increase.

  2. Step 2: Choose resizing option

    Auto Height allows the text box height to grow with wrapped lines, keeping width fixed.

  3. Final Answer:

    Set resizing to Auto Height -> Option A

  4. Quick Check:

    Auto Height = height adjusts for wrapped text [OK]
Hint: Use Auto Height for wrapped paragraphs to grow vertically [OK]
Common Mistakes:
  • Using Auto Width for wrapped text
  • Choosing Fixed Size which cuts off text
  • Confusing Fixed Height with Auto Height
3. Given a text box with width fixed at 200px and resizing set to Auto Height, what happens when the text content doubles in length?
medium
A. The text box shrinks to fit the original height.
B. The text box width increases to fit the text on one line.
C. The text overflows outside the box without resizing.
D. The text wraps and the height of the box increases to fit the new lines.

Solution

  1. Step 1: Analyze fixed width with Auto Height

    Fixed width means the box width stays at 200px, no horizontal resizing.

  2. Step 2: Effect of Auto Height on longer text

    Auto Height allows the box height to grow to fit wrapped text lines as content increases.

  3. Final Answer:

    The text wraps and the height of the box increases to fit the new lines. -> Option D

  4. Quick Check:

    Fixed width + Auto Height = wrap text, grow height [OK]
Hint: Fixed width + Auto Height means height grows with wrapped text [OK]
Common Mistakes:
  • Thinking width changes with Auto Height
  • Assuming text overflows without resizing
  • Confusing Auto Width with Auto Height
4. You set a text box to Auto Width but notice the text is wrapping unexpectedly. What is the most likely cause?
medium
A. The text box has a fixed width constraint limiting expansion.
B. Auto Width always wraps text by default.
C. The font size is too small to fit on one line.
D. The text box height is fixed, causing wrapping.

Solution

  1. Step 1: Understand Auto Width behavior

    Auto Width should expand the box width to fit text on one line without wrapping.

  2. Step 2: Identify constraints impact

    If a fixed width constraint is applied, it limits the box width, forcing text to wrap despite Auto Width setting.

  3. Final Answer:

    The text box has a fixed width constraint limiting expansion. -> Option A

  4. Quick Check:

    Fixed width constraint blocks Auto Width expansion [OK]
Hint: Check constraints if Auto Width text wraps unexpectedly [OK]
Common Mistakes:
  • Believing Auto Width wraps text by design
  • Ignoring width constraints on the box
  • Confusing font size effects with wrapping
5. You are designing a dashboard in Figma that must display a title and a description. The title should always be on one line and the description should wrap and adjust height. Which combination of resizing settings and constraints should you use?
hard
A. Title: Fixed Width with Auto Height; Description: Auto Width with Fixed Height
B. Title: Auto Width with no width constraint; Description: Fixed Width with Auto Height
C. Title: Auto Height with Fixed Width; Description: Auto Width with no constraints
D. Title: Fixed Width with Fixed Height; Description: Fixed Width with Fixed Height

Solution

  1. Step 1: Set title for single line

    Title needs to stay on one line, so Auto Width with no width constraint lets it expand horizontally as needed.

  2. Step 2: Set description for wrapped text

    Description should wrap and grow vertically, so Fixed Width with Auto Height keeps width fixed and height adjusts to content.

  3. Final Answer:

    Title: Auto Width with no width constraint; Description: Fixed Width with Auto Height -> Option B

  4. Quick Check:

    Title single line + Description wrapped = Auto Width + Fixed Width/Auto Height [OK]
Hint: Title single line = Auto Width; Description wrapped = Fixed Width + Auto Height [OK]
Common Mistakes:
  • Using Auto Height for title causing wrapping
  • Fixing height on description cutting text
  • Applying width constraints on title limiting expansion