Variant properties (boolean, enum) in Figma - Dashboard Guide

Dashboard Mode - Variant properties (boolean, enum)

Dashboard Goal

Understand how variant properties like boolean and enum help create interactive and flexible UI components in Figma for BI dashboards.

Sample Data: Variant Properties

Component	Property Type	Property Name	Possible Values
Button	Boolean	Is Active	true, false
Button	Enum	Size	Small, Medium, Large
Toggle Switch	Boolean	On/Off	true, false
Card	Enum	Status	Default, Highlighted, Disabled
Icon	Boolean	Visible	true, false
Icon	Enum	Type	Info, Warning, Error

Dashboard Components

• KPI Card: Shows a button with Is Active boolean property toggled on/off to reflect active state.
• Size Selector: Dropdown using Size enum property to switch button sizes (Small, Medium, Large).
• Toggle Switch: Boolean property On/Off controlling switch state visually.
• Status Card: Uses Status enum property to show different card styles (Default, Highlighted, Disabled).
• Icon Display: Boolean Visible property toggles icon visibility; enum Type changes icon style (Info, Warning, Error).

Dashboard Layout

+-------------------+-------------------+
|   KPI Card        |  Size Selector    |
|  (Boolean Active) |  (Enum Size)      |
+-------------------+-------------------+
|   Toggle Switch    |   Status Card     |
|  (Boolean On/Off) |  (Enum Status)    |
+-------------------+-------------------+
|       Icon Display (Boolean Visible + Enum Type)       |
+--------------------------------------------------------+

Interactivity

Changing the Is Active boolean toggles the button style in KPI Card.

Selecting a size from the Size enum dropdown updates the button size in the KPI Card.

Toggling the On/Off boolean changes the switch's visual state.

Choosing a Status enum value updates the card's background and border style.

Switching Visible boolean shows or hides the icon; selecting Type changes the icon's symbol and color.

Self Check

If you toggle the Is Active property to false, which components update their appearance?

• The KPI Card button changes to inactive style.
• No other components change because they depend on different properties.

Key Result

A Figma dashboard demonstrating how boolean and enum variant properties control UI component states and styles.