Variant properties (boolean, enum) in Figma - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Boolean Variant Properties

In Figma, you create a button component with a boolean variant property named Disabled. What happens when you set Disabled to true?

A The button disappears from the design completely.

B The button changes to a disabled style, such as greyed out and non-clickable.

C The button becomes larger and changes color randomly.

D Nothing changes visually or functionally.

💡 Hint

Think about how boolean variants usually toggle a state on or off.

Boolean variant properties toggle between two states, such as enabled or disabled. Setting Disabled to true applies the disabled style, making the button look inactive.

🧠 Conceptual

intermediate

Using Enum Variant Properties

You have a component with an enum variant property called Size with options Small, Medium, and Large. What is the main advantage of using an enum variant over multiple boolean variants for size?

A Enum variants allow only one size to be selected at a time, preventing conflicting states.

B Enum variants let you select multiple sizes simultaneously.

C Enum variants automatically animate between sizes.

D Enum variants disable the component when selected.

💡 Hint

Consider how enum variants differ from boolean variants in exclusivity.

Enum variants let you pick exactly one option from a list, ensuring the component can't have conflicting sizes like both Small and Large at once.

❓ dax_lod_result

advanced

Calculating Active Variant Count with DAX

You have a table of components with boolean variant properties IsPrimary and IsDisabled. Write a DAX measure to count how many components have IsPrimary set to true and IsDisabled set to false.

Figma

ActivePrimaryCount = CALCULATE(COUNTROWS(Components), Components[IsPrimary] = TRUE(), Components[IsDisabled] = FALSE())

A ActivePrimaryCount = SUMX(Components, IF(Components[IsPrimary] && NOT Components[IsDisabled], 1, 0))

B ActivePrimaryCount = COUNTROWS(FILTER(Components, Components[IsPrimary] = TRUE() && Components[IsDisabled] = FALSE()))

C ActivePrimaryCount = CALCULATE(COUNTROWS(Components), Components[IsPrimary] = TRUE(), Components[IsDisabled] = FALSE())

D ActivePrimaryCount = COUNTROWS(Components) - COUNTROWS(FILTER(Components, Components[IsPrimary] = FALSE() || Components[IsDisabled] = TRUE()))

💡 Hint

Use CALCULATE with filter conditions to count rows matching both criteria.

CALCULATE with multiple filter conditions counts rows where both IsPrimary is true and IsDisabled is false. Option C uses this correctly.

❓ visualization

advanced

Best Visualization for Enum Variant Distribution

You want to show how many components use each Size enum variant (Small, Medium, Large) in a dashboard. Which visualization type is best to clearly show the count per size?

A A pie chart with slices for each size count.

B A line chart showing sizes over time.

C A scatter plot with size on x-axis and count on y-axis.

D A bar chart with sizes on the x-axis and count on the y-axis.

💡 Hint

Think about which chart type clearly compares categories side by side.

A bar chart is best for comparing counts across discrete categories like enum sizes. Pie charts can be less clear for exact counts, and line or scatter plots are less suitable here.

🔧 Formula Fix

expert

Debugging Variant Property Conflict in Data Model

You have a data model with a table Components that includes a boolean variant property IsActive and an enum variant property Status with values Active, Inactive. You notice that some components have IsActive = FALSE but Status = 'Active'. What is the most likely cause?

A The boolean and enum variant properties are not synchronized, causing conflicting states.

B The data model automatically converts boolean to enum, so this is expected.

C The <code>Status</code> enum property is case sensitive and 'Active' is misspelled.

D The <code>IsActive</code> property is ignored in filtering, so it has no effect.

💡 Hint

Think about how two variant properties representing similar states can cause conflicts if not managed.

Boolean and enum variant properties represent states differently. If they are not kept in sync, components can have conflicting values like IsActive = FALSE but Status = 'Active'.

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