Conditional interactions in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to trigger an interaction only when the user clicks a button.

Figma

if (event.type === '[1]') {
  // trigger interaction
}

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

Ahover

Bdrag

Cclick

Dscroll

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'hover' instead of 'click' causes the interaction to trigger on mouse over.

Using 'drag' or 'scroll' triggers the interaction on wrong user actions.

The interaction should trigger on a 'click' event, so the condition must check for 'click'.

2fill in blank

medium

Complete the code to show a popup only if the checkbox is checked.

Figma

if (checkbox.checked [1] true) {
  showPopup();
}

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

A===

B==

C!=

D<

Attempts:

3 left

💡 Hint

Common Mistakes

Using '!=' or '<' causes incorrect condition evaluation.

Using '==' works but is less strict than '==='.

Use strict equality '===' to check if the checkbox is checked (true).

3fill in blank

hard

Fix the error in the conditional to toggle visibility when a slider value is above 50.

Figma

if (slider.value [1] 50) {
  toggleVisibility();
}

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

A>

B>=

C<

D<=

Attempts:

3 left

💡 Hint

Common Mistakes

Using '>=' includes 50, but the requirement is strictly above 50.

Using '<=' or '<' reverses the condition.

The condition should check if the slider value is greater than 50, so use '>'.

4fill in blank

hard

Fill both blanks to run different actions based on a dropdown selection.

Figma

if (dropdown.value [1] 'Option1') {
  [2]();
} else {
  showAlert();
}

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

A===

BhideMenu

C==

DshowMenu

Attempts:

3 left

💡 Hint

Common Mistakes

Using '==' instead of '===' can cause unexpected type coercion.

Calling 'hideMenu()' instead of 'showMenu()' reverses the intended action.

Use strict equality '===' to compare dropdown value and call 'showMenu()' if true.

5fill in blank

hard

Fill all three blanks to check if a toggle is on and a slider is below 30, then update the UI.

Figma

if (toggle.[1] === true && slider.value [2] [3]) {
  updateUI();
}

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

Achecked

B<

C30

Dvalue

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'value' instead of 'checked' for toggle property.

Using '>=' or '>' instead of '<' for slider comparison.

Check if toggle is 'checked', slider value is less than 30, then update UI.