Documentation within Figma - Dashboard Guide

Dashboard Mode - Documentation within Figma

Goal

Understand how to add clear documentation inside Figma files to help teams use and maintain BI dashboards effectively.

Sample Data

Component	Description	Notes
Sales KPI Card	Shows total sales amount	Uses SUM of sales data
Sales Trend Chart	Line chart of sales over months	Helps identify seasonality
Region Filter	Dropdown to select sales region	Filters all visuals
Data Source Info	Text block describing data origin	Updated monthly
Calculation Notes	Text explaining formulas used	Includes DAX expressions

Dashboard Components with Documentation

• Sales KPI Card: Displays total sales using formula SUM(Sales[Amount]). Shows 600 for sample data.
• Sales Trend Chart: Line chart plotting monthly sales totals. Helps spot trends and peaks.
• Region Filter: Dropdown control that filters all visuals by selected region.
• Data Source Info: Text box inside Figma describing the data source as "Sales data from internal ERP system, updated monthly."
  Helps new users understand data origin.
• Calculation Notes: Text box explaining key formulas, e.g., "Total Sales calculated as SUM of Sales Amount column."
  Supports transparency and easier maintenance.

Dashboard Layout (ASCII Art)

+----------------------+-----------------------+
| Sales KPI Card       | Data Source Info      |
| (Top-left)           | (Top-right)           |
+----------------------+-----------------------+
| Sales Trend Chart                          |
| (Full width below KPI and Info)           |
+-------------------------------------------+
| Region Filter                              |
| (Bottom, full width)                       |
+-------------------------------------------+
| Calculation Notes                          |
| (Footer, full width)                       |
+-------------------------------------------+
  

Interactivity

The Region Filter dropdown controls which region's data is shown in the Sales KPI Card and Sales Trend Chart. Selecting a region updates these visuals instantly.

The Data Source Info and Calculation Notes are static text elements providing context and do not change with filters.

Self Check

If you select "East" in the Region Filter, which components update?

• Sales KPI Card updates to show total sales for East region only.
• Sales Trend Chart updates to show monthly sales trend for East region.
• Data Source Info and Calculation Notes remain unchanged.

Key Result

A Figma dashboard with sales KPIs, trend chart, region filter, and embedded documentation for clarity.