# Bring Your UI to Life: Creating Micro Interactions with Figma, Lottie & React

[Micro interactions](https://uxdesign.cc/micro-interactions-why-when-and-how-to-use-them-to-boost-the-ux-17094b3baaa0) are common on most websites and mobile apps these days to enhance the user experience.

I tried creating a simple micro interaction for my portfolio web app. While this could be done with CSS alone, but it is really complex. I found it easier to create complex animations using Figma and Lottie (though this does involve additional JSON files and the lottie-react library). The best part is that you can achieve this with a little knowledge of Figma.

I wanted to create a simple animation for a color picker since I couldn’t find a free version of the same online.

Follow these steps to add a simple micro interaction to your web app-

## Create Figma Design

### Create Icon

1. Create a frame of your desired size. Since it's an icon, you can use standard sizes like 24, 32, etc. I chose 96.
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726899688360/1aa173a0-4658-48e1-8148-77495db17eee.png align="left")

Do not add any fill to the frame so that your animation will have a transparent background.

I have created 3 elements on the frame -

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726898344831/fdf14856-59f4-42ad-bd26-c5a5ae7edf7a.png align="left")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726898564048/ca7c452a-2a83-4802-8157-2e5a6b7a0562.png align="left")

2. Now we will create two states (2 frames) for the animation: **open state** and **closed state**. We already created the open state. Let's create a closed state by duplicating the current frame. (Select the current frame, press Alt, and drag). Now, adjust the elements based on the animation you want to create.
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726898753071/2f6a266f-dabc-4ef1-906f-221a95e4c30d.png align="left")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726898822313/4eb4f0ce-c7eb-49a5-9623-92cc02f9deb1.png align="left")

Make sure the frame still has all the 3 elements i.e. top, mid, last in our scenario. This will help with the animation using the smart animate feature in Figma.

### Create Prototype

Now lets add a [prototype](https://help.figma.com/hc/en-us/articles/360040314193-Guide-to-prototyping-in-Figma)

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726899004910/1c6e6504-d8e1-4b99-98f9-d44b2d835030.png align="left")

We want our animation to go from the **closed state** to the **open state**. Our starting point will be the **closed state** frame.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726899073113/f16674c9-ec1a-4ecd-8d51-4942a37adf56.png align="left")

Now add an interaction between the frames.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726899305256/74bcdeea-a72c-4246-bc5a-7b2844f6449b.png align="left")

Thats it.

## Export prototype to Lottie

1. Add Lottie plugin to figma
    

Go to Menu > Plugins > Manage Plugins > search for Lottie and add the plugin. You will need to create a Lottie account as well.

Should open a small window like this -

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726900124108/ac26c84a-5353-4b2d-8664-c7e7993399ac.png align="left")

2. Select your starting frame and click on save to workspace.
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726900494618/23af7373-0240-41cb-87e0-97aa030b160f.gif align="left")

This will export your prototype to lottie.

## Download Lottie JSON file

Go to [app.lottiefiles.com](https://app.lottiefiles.com/) and select the uploaded animation file to open the editor. Then download the Lottie JSON file.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726900912737/19ea925f-60bb-4ec1-b307-b26bc27b97ac.png align="left")

## Add lottie animation to react component

1. Add the Lottie JSON file to your repository.
    
2. Add the [`lottie-react`](https://www.npmjs.com/package/lottie-react) package to your repository.
    
3. Create a React component to display the Lottie animation.
    

```typescript
import { useLottie } from 'lottie-react'
import React from 'react'
import lottieData from './ColorSwatchIcon.json'

const ColorPicker = () => {
    const { View, setSpeed, play, setDirection } = useLottie(
        {
            animationData: lottieData,
            loop: false,
            autoplay: false,
        }
    )

    setSpeed(1)

    return (
        <div
            className="color-picker"
            onMouseEnter={() => {
                setDirection(1)
                play()
            }}
            onMouseLeave={() => {
                setDirection(-1)
                play()
            }}
        >
           {View}
        </div>
    )
}

export default ColorPicker
```

And that's it, you have created a simple micro-interaction which plays the animation on hover.

**Hope this helps. Thanks for reading.**