Component properties (text, boolean, instance swap) in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set a text property in a Figma component.

Figma

component.set[1]('Button Label', 'Submit')

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

ATextProperty

BtextProperty

CText

Dtext

Attempts:

3 left

💡 Hint

Common Mistakes

Using uppercase 'TextProperty' instead of 'textProperty'.

Using 'Text' or 'text' which are not valid property setters.

In Figma plugin API, textProperty is used to set text properties on components.

2fill in blank

medium

Complete the code to toggle a boolean property named 'isActive' on a component instance.

Figma

instance.set[1]('isActive', true)

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

AbooleanProperty

BBooleanProperty

CboolProperty

Dboolean

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'BooleanProperty' with uppercase B.

Using 'boolProperty' which is not recognized.

The correct method to set a boolean property in Figma is booleanProperty.

3fill in blank

hard

Fix the error in the code to swap an instance's component to a new variant.

Figma

instance.component = [1]

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

AnewVariant

BnewVariant()

CnewVariant.id

DnewVariantComponent

Attempts:

3 left

💡 Hint

Common Mistakes

Assigning a function call like 'newVariant()'.

Assigning just the id instead of the component object.

To swap an instance's component, assign the component object itself, here newVariantComponent.

4fill in blank

hard

Fill both blanks to set a text property and toggle a boolean property on a component instance.

Figma

instance.set[1]('label', 'Save'); instance.set[2]('enabled', false)

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

AtextProperty

BbooleanProperty

Ctext

DboolProperty

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up text and boolean property method names.

Using invalid method names like 'text' or 'boolProperty'.

Use textProperty to set text and booleanProperty to set boolean values on instances.

5fill in blank

hard

Fill all three blanks to swap an instance's component, set a text property, and toggle a boolean property.

Figma

instance.component = [1]; instance.set[2]('title', 'Dashboard'); instance.set[3]('visible', true)

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

AnewComponent

BtextProperty

CbooleanProperty

DcomponentVariant

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'componentVariant' instead of the actual component object.

Mixing up method names for text and boolean properties.

Assign the new component object to instance.component, then use textProperty and booleanProperty to set properties.