Responsive text behavior in Figma - Real Business Scenario

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.

Sample Data

Element	Current Font Size (px)	Screen Size
Dashboard Title	24	Desktop (1200px width)
Section Header	18	Desktop (1200px width)
Data Label	14	Desktop (1200px width)
Dashboard Title	16	Mobile (375px width)
Section Header	12	Mobile (375px width)
Data Label	10	Mobile (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.