Variant properties (boolean, enum) in Figma - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a boolean variant property in Figma?

A boolean variant property is a true/false switch that controls a simple on/off state of a component variant, like 'Enabled' or 'Disabled'.

beginner

How does an enum variant property differ from a boolean variant property?

An enum variant property lets you choose from multiple named options, like 'Size' with values 'Small', 'Medium', or 'Large', instead of just true/false.

beginner

Why use variant properties in Figma components?

Variant properties help organize different states or versions of a component in one place, making design faster and consistent.

beginner

Give an example of a boolean variant property in a button component.

A boolean variant property could be 'Pressed' with values true or false to show if the button is pressed or not.

beginner

What is a practical use of enum variant properties in UI design?

Enum variant properties let you switch between multiple styles like 'Color' with options 'Primary', 'Secondary', and 'Tertiary' easily within one component.

Which of these is a boolean variant property?

A Enabled with options true or false

B Size with options Small, Medium, Large

C Color with options Red, Blue, Green

D Shape with options Circle, Square

Boolean variant properties have only two states: true or false, like 'Enabled'.

What type of variant property would you use to select between multiple button sizes?

A Enum

B Number

C Boolean

D Text

Enum variant properties let you pick from multiple named options, like sizes.

Why are variant properties useful in Figma?

A They replace the need for components

B They create separate files for each component state

C They automatically generate code

D They organize different component states in one place

Variant properties group different states or versions of a component together for easier design.

If a variant property has options 'On' and 'Off', what type is it?

A Number

B Enum

C Boolean

D Text

Boolean variant properties represent two states, often true/false or on/off.

Which variant property type allows more than two options?

A Boolean

B Enum

C Binary

D Toggle

Enum variant properties can have multiple named options beyond just two.

Explain the difference between boolean and enum variant properties in Figma and give an example of each.

Think about true/false versus multiple choices.

Describe how variant properties help improve component design and workflow in Figma.

Consider how grouping states in one component helps.