Text styles in Figma - Dashboard Guide

Dashboard Mode - Text styles

Dashboard Goal

This dashboard helps you understand how to use and apply text styles consistently in your BI reports and dashboards to improve readability and professionalism.

Sample Data: Text Styles Usage

Text Style	Font Family	Font Size (pt)	Font Weight	Usage Example
Title	Roboto	24	Bold	Sales Performance 2024
Subtitle	Roboto	18	Medium	Quarterly Overview
Body	Roboto	14	Regular	Data insights and explanations
Caption	Roboto	12	Regular	Source: Company Database
Highlight	Roboto	14	Bold	Important metrics

Dashboard Components

• KPI Card: Displays the Title style with font size 24pt, bold Roboto font showing "Sales Performance 2024".
• Subtitle Text: Uses the Subtitle style with 18pt medium Roboto font showing "Quarterly Overview".
• Body Text Box: Paragraph using Body style with 14pt regular Roboto font explaining the data insights.
• Caption Text: Small text at the bottom using Caption style with 12pt regular Roboto font showing "Source: Company Database".
• Highlight Text: Bold 14pt Roboto font used to emphasize key metrics within the body text.

Dashboard Layout

+--------------------------------------------------+
|                   [Title: Sales Performance 2024] |
|                  (24pt, Bold, Roboto)             |
+--------------------------------------------------+
|               [Subtitle: Quarterly Overview]      |
|                 (18pt, Medium, Roboto)            |
+--------------------------------------------------+
| [Body Text: Data insights and explanations...]    |
| (14pt, Regular, Roboto)                            |
|   ...with some [Highlight: Important metrics]     |
|       (14pt, Bold, Roboto)                         |
+--------------------------------------------------+
|           [Caption: Source: Company Database]      |
|               (12pt, Regular, Roboto)             |
+--------------------------------------------------+

Interactivity

When you select different text styles from the style panel, all text components update their font family, size, and weight accordingly. For example, changing the Body style font size from 14pt to 16pt updates the body text box instantly. This ensures consistent text formatting across the dashboard.

Self Check

If you change the Highlight text style to use a red color and italic font, which components update?

• The Highlight Text inside the body text box updates to red and italic.
• Other text components remain unchanged because they use different styles.

Key Result

A dashboard demonstrating consistent use of text styles for titles, subtitles, body, captions, and highlights in BI reports.