Swapping instances in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to swap two instances in Figma using the plugin API.

Figma

const temp = instance1.[1];
instance1.[1] = instance2.[1];
instance2.[1] = temp;

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

AswapInstance

Bparent

Cchildren

DmainComponent

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'children' instead of 'mainComponent' causes errors because instances don't have children.

Trying to swap 'parent' property won't swap the instances themselves.

In Figma plugin API, swapping instances involves exchanging their mainComponent property.

2fill in blank

medium

Complete the code to replace an instance with another component in Figma.

Figma

instance.[1] = newComponent;

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

AswapInstance

BmainComponent

Cclone

DreplaceWith

Attempts:

3 left

💡 Hint

Common Mistakes

Using a method like 'replaceWith' which does not exist in the Figma API.

Trying to clone instead of reassigning the component.

To replace an instance's component, assign the new component to its mainComponent property.

3fill in blank

hard

Fix the error in swapping two instances' components.

Figma

const temp = instanceA.[1];
instanceA.[1] = instanceB.[1];
instanceB.[1] = temp;

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

AmainComponent

Bcomponent

CswapInstance

DinstanceComponent

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'component' instead of 'mainComponent' causes undefined errors.

Trying to call a non-existent method 'swapInstance'.

The correct property to swap is mainComponent. Other options are invalid or do not exist.

4fill in blank

hard

Fill both blanks to swap the main components of two instances safely.

Figma

const [1] = instanceX.[2];
instanceX.[2] = instanceY.[2];
instanceY.[2] = [1];

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

Atemp

BmainComponent

CswapInstance

Dcomponent

Attempts:

3 left

💡 Hint

Common Mistakes

Not using a temporary variable causes loss of one component reference.

Using incorrect property names like 'component' or 'swapInstance'.

Use a temporary variable temp to hold the mainComponent while swapping.

5fill in blank

hard

Fill all three blanks to create a function that swaps the main components of two instances.

Figma

function swapInstances(inst1, inst2) {
  const [1] = inst1.[2];
  inst1.[2] = inst2.[2];
  inst2.[2] = [1];
}

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

AtempVar

BmainComponent

Ctemp

Dcomponent

Attempts:

3 left

💡 Hint

Common Mistakes

Using inconsistent variable names for the temporary variable.

Using wrong property names like 'component' instead of 'mainComponent'.

The function uses a temporary variable temp to hold the mainComponent property while swapping.