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.