Interactive components in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create an interactive component in Figma by selecting the correct option.

Figma

To create an interactive component, first select the component and then click on the [1] tab in the right panel.

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

ALayers

BDesign

CPrototype

DAssets

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing the Design tab instead of Prototype.

Selecting Layers or Assets tabs which do not control interactions.

The Prototype tab in Figma is used to add interactions and animations to components, making them interactive.

2fill in blank

medium

Complete the code to link two components for interaction by dragging the correct option into the blank.

Figma

To link two components, drag the [1] handle from the first component to the second component in Prototype mode.

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

Aselection

Binteraction

Cnode

Dblue circle

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'selection' or 'interaction' which are not visual handles.

Confusing the blue circle with other UI elements.

The blue circle handle appears on the right side of a selected component in Prototype mode and is used to create links to other components or frames.

3fill in blank

hard

Fix the error in the interaction settings by choosing the correct trigger type for an interactive component.

Figma

In the interaction details, set the trigger to [1] to make the component respond when clicked.

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

AClick

BHover

CDrag

DAfter Delay

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing Hover which triggers on mouse over, not click.

Selecting Drag or After Delay which are less common for basic interactions.

The Click trigger makes the component respond when the user clicks on it, which is the most common trigger for interactive components.

4fill in blank

hard

Fill both blanks to define an interaction that changes a component's state when clicked.

Figma

Set the interaction's trigger to [1] and the action to [2] to swap component variants.

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

AClick

BNavigate To

CChange To

DHover

Attempts:

3 left

💡 Hint

Common Mistakes

Using Navigate To instead of Change To for swapping variants.

Choosing Hover as trigger when click is needed.

Using Click as the trigger and Change To as the action allows swapping between component variants on click.

5fill in blank

hard

Fill all three blanks to create a prototype interaction that navigates to a frame after a delay.

Figma

Set trigger to [1], action to [2], and destination to [3] frame.

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

AAfter Delay

BNavigate To

CHome

DClick

Attempts:

3 left

💡 Hint

Common Mistakes

Using Click instead of After Delay for automatic triggers.

Choosing Change To instead of Navigate To for navigation.

The After Delay trigger starts the interaction automatically after a pause, Navigate To moves to another frame, and Home is the destination frame name.