Why advanced interactions test complex flows in Figma - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a simple interaction that navigates to the next frame on click.

Figma

figma.currentPage.selection[0].onClick = () => [1];

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

Afigma.navigateToNextFrame()

Bfigma.showNextFrame()

Cfigma.goToNextFrame()

Dfigma.openNextFrame()

Attempts:

3 left

💡 Hint

Common Mistakes

Using methods that do not exist in Figma API like showNextFrame or openNextFrame.

The correct method to navigate to the next frame on click is figma.goToNextFrame().

2fill in blank

medium

Complete the code to add a hover interaction that changes the opacity of a selected object.

Figma

figma.currentPage.selection[0].onHover = () => { figma.currentPage.selection[0].opacity = [1]; };

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

A0.5

B1.5

C-0.5

D2

Attempts:

3 left

💡 Hint

Common Mistakes

Using opacity values outside the 0 to 1 range causing errors.

Opacity values must be between 0 and 1. Setting it to 0.5 makes the object semi-transparent on hover.

3fill in blank

hard

Fix the error in the code to correctly trigger a complex interaction sequence on click.

Figma

figma.currentPage.selection[0].onClick = async () => { await [1](); figma.notify('Interaction complete'); };

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

AstartComplexFlow

BrunComplexFlow

CtriggerComplexFlow

DbeginComplexFlow

Attempts:

3 left

💡 Hint

Common Mistakes

Using function names that do not exist or are not async.

The correct function to run the complex interaction flow is runComplexFlow(), which is asynchronous and returns a promise.

4fill in blank

hard

Fill both blanks to set up an advanced interaction that triggers on drag and updates the position.

Figma

figma.currentPage.selection[0].on[1] = (event) => { figma.currentPage.selection[0].[2] = event.position; };

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

ADrag

BClick

Cposition

Dx

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'Click' event instead of 'Drag'.

Updating 'x' instead of the full 'position' property.

The interaction event is onDrag and the property to update is position to reflect the new location.

5fill in blank

hard

Fill all three blanks to create a conditional interaction that triggers only if the selected object is visible and enabled.

Figma

if (figma.currentPage.selection[0].[1] && figma.currentPage.selection[0].[2]) { figma.currentPage.selection[0].onClick = () => [3]; }

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

Avisible

Benabled

CstartInteraction()

DisActive

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect property names like 'isActive'.

Assigning a non-function value to onClick.

The code checks if the object is visible and enabled, then assigns the startInteraction() function to the click event.