Component set best practices in Figma - Dashboard Guide

Dashboard Mode - Component set best practices

Goal

Learn how to organize and use component sets in Figma to build consistent and reusable dashboard elements for business intelligence projects.

Sample Data

Component Name	Type	States	Usage Example
Button	UI Control	Default, Hover, Pressed, Disabled	Filter apply button
Card	Container	Default, Selected	KPI display
Dropdown	Input	Closed, Open	Region selector
Icon	Visual	Active, Inactive	Sort indicator
Tooltip	Info	Visible, Hidden	Data point explanation

Dashboard Components

• Button Component Set: Includes four states (Default, Hover, Pressed, Disabled). Use to maintain consistent button behavior across the dashboard.
• Card Component Set: Two states (Default, Selected) to highlight KPIs or data summaries. Use consistent padding and typography.
• Dropdown Component Set: Two states (Closed, Open) for filter selectors. Ensure clear visual cues for interaction.
• Icon Component Set: Active and Inactive states to indicate sorting or status. Use consistent size and color.
• Tooltip Component Set: Visible and Hidden states to provide additional info on hover or focus. Use accessible contrast and positioning.

Dashboard Layout

+----------------------+----------------------+----------------------+
|        Header        |      Filter Bar       |      User Info       |
+----------------------+----------------------+----------------------+
|      KPI Card 1      |      KPI Card 2       |      KPI Card 3      |
+----------------------+----------------------+----------------------+
|      Data Table      |      Chart Area       |    Details Panel     |
+----------------------+----------------------+----------------------+
|                      Footer (Status, Help)                      |
+-----------------------------------------------------------------+

Interactivity

Filters in the Filter Bar use Dropdown component sets for region and date selection. Buttons apply or reset filters using the Button component set. KPI Cards update dynamically to show filtered data. Charts and tables refresh based on filter selections. Tooltips appear on hover over data points using the Tooltip component set. Icons indicate sorting state and update on user clicks.

Self Check

Add a filter for Region = "East" using the Dropdown component. Which components update?

• KPI Cards show data only for East region.
• Charts refresh to display East region trends.
• Data Table filters rows to East region.
• Filter Bar Dropdown shows East selected.

Key Result

This dashboard demonstrates best practices for using Figma component sets to build consistent, reusable UI elements for business intelligence dashboards.