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.

Practice

1. What is the main purpose of micro-interactions in Figma designs?

easy

A. To provide quick visual feedback to users

B. To add complex animations that slow down the app

C. To replace all navigation elements

D. To increase the file size significantly

Solution

1. Step 1: Understand micro-interactions

   Micro-interactions are small animations or visual cues that respond to user actions.

2. Step 2: Identify their purpose in user experience

   They provide quick feedback to confirm actions, improving usability and satisfaction.

3. Final Answer:

   To provide quick visual feedback to users -> Option A

4. Quick Check:

   Micro-interactions = quick feedback [OK]

Hint: Micro-interactions = quick feedback, not complex changes [OK]

Common Mistakes:

• Thinking micro-interactions are full animations
• Confusing micro-interactions with navigation
• Assuming they increase file size significantly

2. Which of the following is the correct way to create a micro-interaction in Figma?

easy

A. Add a text layer with animation code inside

B. Draw a static image and export it as PNG

C. Use the Prototype tab to add a trigger and animation between frames

D. Use the Fill tool to change colors randomly

Solution

1. Step 1: Identify Figma's micro-interaction tools

   Figma uses the Prototype tab to link frames with triggers and animations.

2. Step 2: Match the correct method

   Adding triggers and animations between frames creates micro-interactions effectively.

3. Final Answer:

   Use the Prototype tab to add a trigger and animation between frames -> Option C

4. Quick Check:

   Prototype tab + triggers = micro-interactions [OK]

Hint: Micro-interactions need Prototype triggers, not static images [OK]

Common Mistakes:

• Confusing static images with animations
• Trying to add code inside text layers
• Using Fill tool for animations

3. Given a Figma prototype with a button that changes color on click using a 'Smart Animate' transition of 300ms, what will the user experience?

medium

A. The button color changes smoothly within 300 milliseconds after clicking

B. The button instantly changes color with no animation

C. The button color changes after a 3-second delay

D. The button color flickers randomly

Solution

1. Step 1: Understand 'Smart Animate' in Figma

   'Smart Animate' smoothly transitions properties like color over the set duration.

2. Step 2: Apply the 300ms duration

   The color change happens smoothly within 300 milliseconds after the click trigger.

3. Final Answer:

   The button color changes smoothly within 300 milliseconds after clicking -> Option A

4. Quick Check:

   Smart Animate + 300ms = smooth quick change [OK]

Hint: Smart Animate means smooth transition, not instant or delayed [OK]

Common Mistakes:

• Thinking animation is instant
• Assuming a long delay before change
• Expecting random flicker effects

4. You created a micro-interaction in Figma, but the animation does not play when clicking the button. What is the most likely cause?

medium

A. The prototype is in View mode

B. The button frame has too many layers

C. The file size is too large

D. The trigger is not set on the button frame

Solution

1. Step 1: Check the trigger setup

   Micro-interactions require a trigger (like 'On Click') set on the interactive frame or element.

2. Step 2: Identify missing trigger issue

   If no trigger is set on the button frame, the animation won't start on click.

3. Final Answer:

   The trigger is not set on the button frame -> Option D

4. Quick Check:

   Missing trigger = no animation [OK]

Hint: Always set triggers on interactive elements for animations [OK]

Common Mistakes:

• Blaming file size or layers for animation failure
• Not verifying trigger presence
• Confusing View mode with prototype functionality

5. You want to design a micro-interaction for a loading spinner that appears only when data is loading and disappears immediately after. Which approach in Figma best achieves this?

hard

A. Add a static spinner image on all frames without interaction

B. Create two frames: one with spinner visible and one without, then use 'After Delay' trigger to switch

C. Use a text layer to write 'Loading...' and animate its opacity manually

D. Draw the spinner once and rely on user to refresh the page

Solution

1. Step 1: Understand conditional visibility in micro-interactions

   Showing and hiding elements based on state requires switching frames or components.

2. Step 2: Use 'After Delay' trigger for timing control

   Creating two frames (spinner visible and hidden) and switching with 'After Delay' simulates loading start and end.

3. Final Answer:

   Create two frames: one with spinner visible and one without, then use 'After Delay' trigger to switch -> Option B

4. Quick Check:

   Frame switch + After Delay = conditional spinner [OK]

Hint: Use frame switches with delay triggers for conditional animations [OK]

Common Mistakes:

• Using static images without interaction
• Animating text instead of spinner visibility
• Ignoring timing control for loading states