Variant properties (boolean, enum) in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a UI/UX designer working with the product team.

📋 Request: Your manager wants a clear, interactive dashboard prototype that uses Figma variants to show different states of a sales report filter panel.

📊 Data: You have a filter panel with options like 'Show Region' (boolean) and 'Time Period' (enum with values: 'Monthly', 'Quarterly', 'Yearly').

🎯 Deliverable: Create a Figma component with variants using boolean and enum properties to represent the filter panel states, so the product team can easily toggle filters in the prototype.

Sample Data

Filter	Type	Options
Show Region	Boolean	True / False
Time Period	Enum	Monthly / Quarterly / Yearly

1

Step 1: Create a base component for the filter panel in Figma with all UI elements (checkbox for Show Region, dropdown for Time Period).

Design the panel with a checkbox labeled 'Show Region' and a dropdown labeled 'Time Period' with options 'Monthly', 'Quarterly', 'Yearly'.

Expected Result

A single component representing the filter panel UI.

2

Step 2: Add variant properties to the component: a boolean property named 'Show Region' and an enum property named 'Time Period' with values 'Monthly', 'Quarterly', 'Yearly'.

In the Variants panel, add 'Show Region' as boolean and 'Time Period' as enum with three options.

Expected Result

Component variants can toggle 'Show Region' on/off and switch 'Time Period' among the three options.

3

Step 3: Create variants for each combination of 'Show Region' (true/false) and 'Time Period' (Monthly, Quarterly, Yearly).

Generate 6 variants: Show Region true with Monthly, Quarterly, Yearly; Show Region false with Monthly, Quarterly, Yearly.

Expected Result

Six variants representing all filter panel states.

4

Step 4: Adjust the UI in each variant to reflect the property states: checkbox checked or unchecked for 'Show Region', dropdown showing the selected 'Time Period'.

For each variant, set checkbox state and dropdown label accordingly.

Expected Result

Each variant visually matches its property settings.

5

Step 5: Use the component in a prototype frame and enable interactive toggling of variant properties to simulate filter changes.

Link prototype interactions to switch between variants by toggling 'Show Region' and selecting 'Time Period'.

Expected Result

Interactive prototype where users can toggle filters and see the panel update.

Final Result

Filter Panel Component Variants

+-----------------------------+
| [x] Show Region             |
| Time Period: Monthly ▼      |
+-----------------------------+

Variants:
1) Show Region: True, Time Period: Monthly
2) Show Region: True, Time Period: Quarterly
3) Show Region: True, Time Period: Yearly
4) Show Region: False, Time Period: Monthly
5) Show Region: False, Time Period: Quarterly
6) Show Region: False, Time Period: Yearly

✓Using boolean and enum variant properties in Figma simplifies managing multiple UI states.

✓Variants allow quick toggling between filter panel states without duplicating components.

✓Interactive prototypes with variants help stakeholders understand filter behavior clearly.

Bonus Challenge

Add a third variant property 'Sort Order' as an enum with values 'Ascending' and 'Descending' to the filter panel component and create all new variants accordingly.

Show Hint

Remember to multiply the number of variants by the number of new enum options and update UI elements to reflect the sort order.

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