Connection creation (click, hover) in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a connection on click in Figma.

Figma

figma.currentPage.selection[0].on('click', () => [1]);

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

AhoverConnection()

BselectConnection()

CdeleteConnection()

DcreateConnection()

Attempts:

3 left

💡 Hint

Common Mistakes

Using a hover function instead of click.

Trying to delete instead of create.

Using createConnection() inside the click event handler creates a connection when the user clicks.

2fill in blank

medium

Complete the code to show a connection highlight on hover.

Figma

figma.currentPage.selection[0].on('hover', () => [1]);

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

AremoveHighlight()

BshowHighlight()

CcreateConnection()

DhideConnection()

Attempts:

3 left

💡 Hint

Common Mistakes

Using createConnection on hover instead of highlight.

Using removeHighlight which hides the effect.

The showHighlight() function is used to visually highlight the connection when hovered.

3fill in blank

hard

Fix the error in the code to properly create a connection on click.

Figma

figma.currentPage.selection[0].on('click', () => [1]);

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

AcreateConnection()

BcreateConnection

CcreateConnection();

DcreateConnection =>

Attempts:

3 left

💡 Hint

Common Mistakes

Missing parentheses causes the function not to run.

Adding extra semicolon inside the arrow function body.

The function createConnection() must be called with parentheses inside the arrow function.

4fill in blank

hard

Fill both blanks to create a connection on click and remove highlight on hover end.

Figma

figma.currentPage.selection[0].on('click', () => [1]);
figma.currentPage.selection[0].on('hoverend', () => [2]);

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

AcreateConnection()

BremoveHighlight()

CshowHighlight()

DdeleteConnection()

Attempts:

3 left

💡 Hint

Common Mistakes

Using showHighlight on hover end instead of removeHighlight.

Deleting connection on hover end instead of removing highlight.

Click triggers createConnection() and hover end triggers removeHighlight() to clear the highlight.

5fill in blank

hard

Fill all three blanks to create a connection on click, show highlight on hover, and remove highlight on hover end.

Figma

figma.currentPage.selection[0].on('click', () => [1]);
figma.currentPage.selection[0].on('hover', () => [2]);
figma.currentPage.selection[0].on('hoverend', () => [3]);

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

AcreateConnection()

BshowHighlight()

CremoveHighlight()

DdeleteConnection()

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up showHighlight and removeHighlight functions.

Trying to delete connection on hover events.

Click creates the connection, hover shows highlight, and hover end removes highlight for a smooth user experience.