Back to homepage

Design in Motion

Creating a fluid micro-interaction animation in Figma

Year:

2025

Timeframe:

1 week

Tools:

Figma

Category:

Fashion & Apparel

Design in Motion

Summary

This was a self-initiated exploration in Figma aimed at demonstrating how motion can enhance user engagement. The goal was to design a smooth, cohesive bounce animation that feels fluid across all interface elements and transitions.

Problem

Figma has limiting features making static UIs feel abrupt and break consistency and performance in a prototype. I wanted to explore how subtle motion could create a more delightful, responsive user experience without overwhelming the interface.

Solution

I designed a series of product cards and implemented a “jump” animation using Figma’s Smart Animate feature. The animation gives a bounce effect when users hover, making the interface feel more dynamic and interactive.

The Process

Creating the Product Card

I began by designing four product cards, each composed of several layered elements. One image within each card was initially hidden (set to 0% opacity and scaled down) so that it could smoothly pop into view when animated.

Should Look Like This

Create Separate Frames

For each product card, I created separate frames to represent the hover state. By duplicating the default (unhovered) frame first, I ensured a smooth morphing effect when transitioning between states.

Should Look Like This

Interaction Settings

Below are the hover animation settings between the default state and the hovered state.

Start Designing Product Page

When designing the product page, I duplicated the hovered state of the product card. This allowed the shoe image to seamlessly morph into the product page during the transition animation.

Should Look Like This