Responsive text behavior in Figma - Dashboard Guide

Dashboard Mode - Responsive text behavior

Dashboard Goal

Understand how responsive text adjusts in dashboards to keep information clear on different screen sizes.

Sample Data

Region	Sales	Profit	Month
North	1000	200	January
South	1500	300	January
East	1200	250	January
West	1300	270	January
North	1100	210	February
South	1600	320	February
East	1250	260	February
West	1350	280	February

Dashboard Components

• KPI Card: Total Sales
  Shows sum of sales from all regions and months.
  Formula: SUM(Sales) = 10300
• KPI Card: Average Profit
  Shows average profit across all data.
  Formula: AVERAGE(Profit) = 261.25
• Bar Chart: Sales by Region
  Displays total sales per region.
  Data: North=2100, South=3100, East=2450, West=2650
• Line Chart: Monthly Sales Trend
  Shows total sales per month.
  Data: January=5000, February=5300
• Responsive Text Behavior
  Text size and wrapping adjust based on screen width:
  • Large screens: Text size 18px, no wrapping
  • Medium screens: Text size 14px, wrap long text
  • Small screens: Text size 12px, wrap and truncate with ellipsis

Dashboard Layout

+----------------------+----------------------+
|      Total Sales      |    Average Profit    |
|      (KPI Card)       |      (KPI Card)      |
+----------------------+----------------------+
|                                              |
|          Sales by Region (Bar Chart)          |
|                                              |
+----------------------------------------------+
|                                              |
|       Monthly Sales Trend (Line Chart)       |
|                                              |
+----------------------------------------------+

Interactivity

Filters for Region and Month let users select specific data. When a filter is applied:

• KPI cards update totals and averages accordingly.
• Bar chart shows sales only for selected regions.
• Line chart updates monthly sales trend for selected months.
• Responsive text adjusts size and wrapping dynamically as the dashboard resizes or device changes.

Self Check

If you add a filter for Region = South, which components update and how?

• Total Sales KPI: Shows sum of sales only for South (1500 + 1600 = 3100).
• Average Profit KPI: Shows average profit for South ( (300 + 320) / 2 = 310 ).
• Sales by Region Bar Chart: Only South bar remains visible.
• Monthly Sales Trend Line Chart: Shows sales for South by month (January=1500, February=1600).
• Responsive Text: Adjusts text size and wrapping as usual based on screen size.

Key Result

Dashboard showing sales and profit KPIs with charts, featuring responsive text that adapts to screen size.