Prototype mode overview in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to start a prototype link between two frames.

Figma

Select the frame and click on [1] to create a prototype connection.

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

APrototype tab

BDesign tab

CInspect tab

DLayers panel

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing the Design tab instead of Prototype.

Trying to link frames from the Layers panel.

In Figma, the Prototype tab is used to create links between frames for interactive prototypes.

2fill in blank

medium

Complete the code to set the interaction trigger for a prototype.

Figma

To start an interaction, set the trigger to [1] in the Prototype panel.

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

AOn Click

BOn Double Click

COn Drag

DOn Hover

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing On Hover which triggers on mouse over.

Choosing On Drag which is for dragging interactions.

The most common trigger to start a prototype interaction is On Click.

3fill in blank

hard

Fix the error in the prototype transition setting.

Figma

Set the animation type to [1] for a smooth fade effect between frames.

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

AInstant

BNone

CSmart Animate

DDissolve

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing Instant which has no animation.

Choosing Smart Animate which animates object properties.

The Dissolve animation creates a smooth fade transition between frames.

4fill in blank

hard

Fill both blanks to define the prototype device and starting frame.

Figma

Set the device to [1] and the starting frame to [2] in the prototype settings.

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

ADesktop

BMobile

CHome Screen

DLogin Screen

Attempts:

3 left

💡 Hint

Common Mistakes

Selecting Mobile device for a desktop prototype.

Choosing Home Screen when Login Screen is the start.

Choosing Desktop sets the prototype device size, and Login Screen is a common starting frame.

5fill in blank

hard

Fill all three blanks to create a prototype link with a delay and easing.

Figma

Link the button to [1] with a [2] second delay and [3] easing for smooth transition.

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

ASettings Screen

B0.3

CEase In

DProfile Screen

Attempts:

3 left

💡 Hint

Common Mistakes

Using too long or zero delay causing abrupt transitions.

Choosing wrong easing that doesn't create smooth effect.

The button links to the Profile Screen with a 0.3 second delay and Ease In easing for smoothness.