Text tool basics in Figma - Dashboard Guide

Dashboard Mode - Text tool basics

Goal

Understand how to use the Text tool in Figma to add and format text for BI dashboards.

Sample Data

Month	Sales	Region
January	100	North
February	150	South
March	200	East
April	130	West
May	170	North
June	220	South

Dashboard Components

• KPI Card: Displays total sales using the Text tool. Text content: "Total Sales: 970" (sum of sales column).
• Title Text: Dashboard title using Text tool: "Monthly Sales Overview" with font size 24px, bold.
• Axis Labels: Text elements labeling X-axis as "Month" and Y-axis as "Sales" on charts.
• Data Labels: Text showing sales values above bars in bar chart for clarity.

Dashboard Layout

+---------------------------------------+
| Monthly Sales Overview                 |
| (Title Text - top center)             |
+---------------------------------------+
| Total Sales: 970                      |
| (KPI Card - top left)                 |
+---------------------------------------+
| Bar Chart                            |
| (Months on X-axis, Sales on Y-axis) |
| Data labels above bars               |
+---------------------------------------+

Interactivity

Text elements update automatically when data changes. For example, if sales numbers update, the KPI card text "Total Sales" updates to show the new sum. Axis labels and data labels remain fixed but reflect updated data values.

Self Check

If you change the sales data for March from 200 to 250, which text elements update?

• The KPI Card text updates to "Total Sales: 1020".
• Data labels above the March bar update to "250".
• Title and axis labels remain the same.

Key Result

A simple BI dashboard showing total sales and monthly sales bars with text labels created using Figma's Text tool.