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.

Practice

1.

What is the main purpose of variant properties in Figma components?

easy

A. To create different versions of a component without duplicating it

B. To add animations to components

C. To export components as images

D. To change the color of a component automatically

Solution

1. Step 1: Understand variant properties

   Variant properties allow you to manage multiple versions of a component in one place.

2. Step 2: Identify the benefit

   This avoids creating many duplicate components and keeps design organized.

3. Final Answer:

   To create different versions of a component without duplicating it -> Option A

4. Quick Check:

   Variant properties = different versions without duplicates [OK]

Hint: Variants group versions to avoid duplicates [OK]

Common Mistakes:

• Thinking variants add animations
• Confusing variants with export options
• Believing variants change colors automatically

2.

Which of the following is the correct way to define a boolean variant property in Figma?

{
  "property": "isActive",
  "type": "boolean",
  "values": [true, false]
}

easy

A. Incorrect because boolean values should be strings

B. Correct syntax for a boolean variant property

C. Incorrect because values array should have more than two options

D. Incorrect because property name must be numeric

Solution

1. Step 1: Check property type

   The type is set to "boolean", which is correct for true/false values.

2. Step 2: Check values array

   The values array contains true and false, which are the two valid boolean options.

3. Final Answer:

   Correct syntax for a boolean variant property -> Option B

4. Quick Check:

   Boolean variant = true/false values [OK]

Hint: Boolean variants always have true and false values [OK]

Common Mistakes:

• Using strings instead of boolean true/false
• Adding more than two values for boolean
• Using numbers as property names

3.

Given this enum variant property definition:

{
  "property": "size",
  "type": "enum",
  "values": ["small", "medium", "large"]
}

What will be the selected variant if the property size is set to "medium"?

medium

A. The component variant with size set to "medium" will be shown

B. An error will occur because "medium" is not a boolean

C. The component will default to "small" size

D. The component will show all sizes at once

Solution

1. Step 1: Understand enum variant property

   Enum properties let you pick one option from a list of named values.

2. Step 2: Check the selected value

   Setting size to "medium" selects the variant with that exact value.

3. Final Answer:

   The component variant with size set to "medium" will be shown -> Option A

4. Quick Check:

   Enum property selects one named option [OK]

Hint: Enum picks one named option from list [OK]

Common Mistakes:

• Confusing enum with boolean type
• Expecting multiple variants to show
• Assuming default is always first value

4.

Identify the error in this variant property definition:

{
  "property": "visible",
  "type": "boolean",
  "values": ["true", "false"]
}

medium

A. Values array must have more than two options

B. Property name cannot be "visible"

C. Boolean values should be true and false without quotes

D. Type should be "enum" for these values

Solution

1. Step 1: Check boolean values

   Boolean variant values must be the boolean literals true and false, not strings.

2. Step 2: Identify the mistake

   Using "true" and "false" as strings is incorrect syntax for boolean type.

3. Final Answer:

   Boolean values should be true and false without quotes -> Option C

4. Quick Check:

   Boolean values = true/false literals [OK]

Hint: Boolean values never use quotes [OK]

Common Mistakes:

• Using strings instead of boolean literals
• Changing property name unnecessarily
• Confusing boolean with enum type

5.

You want to create a Figma component with a variant property theme that can be either "light" or "dark", and another boolean variant property disabled. How should you define these variant properties?

hard

A. { "property": "theme", "type": "enum", "values": [true, false] }, { "property": "disabled", "type": "boolean", "values": ["light", "dark"] }

B. { "property": "theme", "type": "boolean", "values": ["light", "dark"] }, { "property": "disabled", "type": "enum", "values": [true, false] }

C. { "property": "theme", "type": "boolean", "values": [true, false] }, { "property": "disabled", "type": "boolean", "values": ["disabled", "enabled"] }

D. { "property": "theme", "type": "enum", "values": ["light", "dark"] }, { "property": "disabled", "type": "boolean", "values": [true, false] }

Solution

1. Step 1: Define enum property for theme

   The theme property has multiple named options, so it should be an enum with values "light" and "dark".

2. Step 2: Define boolean property for disabled

   The disabled property is true or false, so it should be boolean with values true and false.

3. Final Answer:

   { "property": "theme", "type": "enum", "values": ["light", "dark"] }, { "property": "disabled", "type": "boolean", "values": [true, false] } -> Option D

4. Quick Check:

   Enum for multiple options, boolean for true/false [OK]

Hint: Enum = multiple named options, Boolean = true/false [OK]

Common Mistakes:

• Mixing enum and boolean types incorrectly
• Using strings for boolean values
• Assigning wrong values to properties