Micro-interaction design in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a simple hover micro-interaction in Figma using prototyping.

Figma

Select the element and go to the [1] tab to add interaction.

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.

Trying to add interactions in the Layers panel.

In Figma, the Prototype tab is where you add interactions like hover effects.

2fill in blank

medium

Complete the code to set the trigger for a micro-interaction to 'While hovering'.

Figma

In the Prototype tab, set the [1] to 'While hovering' to create a hover effect.

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

AAnimation

BDelay

CTransition

DTrigger

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing Trigger with Animation or Transition.

Setting the wrong property for the hover effect.

The Trigger defines what starts the micro-interaction, such as 'While hovering'.

3fill in blank

hard

Fix the error in the micro-interaction setup by selecting the correct animation type.

Figma

Set the animation type to [1] for a smooth fade effect on hover.

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

ASmart Animate

BMove In

CInstant

DNone

Attempts:

3 left

💡 Hint

Common Mistakes

Selecting 'Instant' which causes no animation.

Choosing 'Move In' which moves elements instead of fading.

Smart Animate creates smooth transitions by animating differences between frames, perfect for fade effects.

4fill in blank

hard

Fill both blanks to create a micro-interaction that changes opacity and duration.

Figma

Set the [1] to 50% and the [2] to 300ms for a subtle fade effect.

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

AOpacity

BDelay

CDuration

DEasing

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing Delay with Duration.

Trying to animate Delay instead of Opacity.

Changing Opacity controls transparency, and Duration sets how long the animation lasts.

5fill in blank

hard

Fill all three blanks to create a micro-interaction that triggers on click, changes scale, and uses ease-in-out easing.

Figma

Set the [1] to 'On Click', animate the [2] to 110%, and choose [3] easing for smooth scaling.

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

ATrigger

BScale

CEase In Out

DOpacity

Attempts:

3 left

💡 Hint

Common Mistakes

Using Opacity instead of Scale for size change.

Choosing wrong easing type causing abrupt animation.

The Trigger defines the event, Scale changes size, and Ease In Out makes the animation smooth at start and end.