Variant properties (boolean, enum) in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a boolean variant property named "isActive".

Figma

component.variantProperties = { "isActive": [1] }

Drag options to blanks, or click blank then click option'

Atrue

B"true"

CTrue

D1

Attempts:

3 left

💡 Hint

Common Mistakes

Using quotes around true makes it a string, not a boolean.

Using capitalized True is invalid in JavaScript/JSON context.

The boolean variant property should be set as a boolean value true without quotes.

2fill in blank

medium

Complete the code to define an enum variant property named "size" with options "small", "medium", and "large".

Figma

component.variantProperties = { "size": [1] }

Drag options to blanks, or click blank then click option'

A{small, medium, large}

B"small, medium, large"

C["small", "medium", "large"]

Dsmall | medium | large

Attempts:

3 left

💡 Hint

Common Mistakes

Using a single string with commas instead of an array.

Using curly braces without quotes which is invalid syntax.

The enum variant property should be an array of strings representing the options.

3fill in blank

hard

Fix the error in the code to correctly set a boolean variant property "disabled" to false.

Figma

component.variantProperties = { "disabled": [1] }

Drag options to blanks, or click blank then click option'

Afalse

BFalse

C"false"

D0

Attempts:

3 left

💡 Hint

Common Mistakes

Using quotes around false makes it a string.

Using capitalized False is invalid in JavaScript/JSON.

The boolean value false must be lowercase and without quotes.

4fill in blank

hard

Fill both blanks to define an enum variant property "color" with options "red", "green", and "blue", and set its default to "green".

Figma

component.variantProperties = { "color": [1] };
component.defaultVariant = { "color": [2] };

Drag options to blanks, or click blank then click option'

A["red", "green", "blue"]

B"green"

C"red"

D"blue"

Attempts:

3 left

💡 Hint

Common Mistakes

Setting default to a value not in the enum options.

Using a string with commas instead of an array for options.

The enum options are an array of strings, and the default value is one of those strings.

5fill in blank

hard

Fill all three blanks to define a boolean variant property "visible", an enum variant property "theme" with options "light" and "dark", and set default values for both.

Figma

component.variantProperties = { "visible": [1], "theme": [2] };
component.defaultVariant = { "visible": [3], "theme": "dark" };

Drag options to blanks, or click blank then click option'

Atrue

B["light", "dark"]

Cfalse

D"true"

Attempts:

3 left

💡 Hint

Common Mistakes

Using quotes around boolean values.

Setting default boolean value as a string.

Using incorrect enum option format.

Boolean variant properties use true/false without quotes. Enum options are arrays of strings. Default values must match the property type.