Font selection and pairing in Figma - Dashboard Guide

Dashboard Mode - Font selection and pairing

Goal

Help users choose and pair fonts effectively for clear and attractive BI dashboards.

Sample Fonts Data

Font Name	Style	Usage	Pairing Suggestion
Roboto	Sans-serif	Body text	Merriweather
Merriweather	Serif	Headings	Roboto
Open Sans	Sans-serif	Body text	Lora
Lora	Serif	Headings	Open Sans
Montserrat	Sans-serif	Headings	Roboto
Source Sans Pro	Sans-serif	Body text	Playfair Display
Playfair Display	Serif	Headings	Source Sans Pro

Dashboard Components

• KPI Card: Shows recommended font pair for dashboard headings and body text.
• Font Style Chart: Pie chart showing distribution of font styles (Serif vs Sans-serif) in sample data.
• Font Usage Table: Lists fonts with style, usage, and pairing suggestions.

Dashboard Layout

+----------------------+----------------------+
|      KPI Card        |  Font Style Pie Chart |
|  (Font Pairing)      |                      |
+----------------------+----------------------+
|                  Font Usage Table               |
|                                                 |
+-------------------------------------------------+
    

Interactivity

User can select a font style filter (Serif or Sans-serif). The Font Usage Table and Font Style Pie Chart update to show only fonts of the selected style. The KPI Card updates to show recommended pairings based on the filtered fonts.

Self Check

If you add a filter to show only Serif fonts, which components update and how?

• The Font Usage Table shows only Serif fonts.
• The Font Style Pie Chart updates to show 100% Serif.
• The KPI Card updates to show recommended pairings for Serif fonts.

Key Result

Dashboard helps users select and pair fonts by showing font styles, usage, and pairing recommendations with interactive filters.