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'.