Create your own Lottie Files: A Guide from Figma to React JS

Lottie is a library developed by AirBnb that enables you to easily integrate JSON animations into your projects. Lightweight and scalable animations made by vector shapes.

In this article you will see a complete workflow for creating an animation in Figma and using it in a React JS web project.

The process is particularly user-friendly for those familiarized with Figma, since you do not need to have knowledge in a specialized animation software such as After Effects or complex manual css editing.

Requirements

• A Basic Figma account https://www.figma.com/
• A Basic Lottie account https://lottiefiles.com/
• A React JS Web project.

Design in Figma

Create your Design

1. Start by creating a new frame F
2. Use the tools on the top left menu to draw shapes
3. Duplicate your frame and create the second state of the animation by moving or editing elements.

Lottie has some limitations in Figma. Some features such as masks will not render properly when animated. Other functions, like rotation, are really complicated to control. Take it into account, but be aware that there are many basic things that you can do (Change colors, scale shapes, move elements…)

Example of a Fish designed in Figma using basic shapes

Animate your design

1. Change to prototype mode on the top right menu
2. Link the frames.
3. Edit animations by tapping on the link between frames. Enable automatic transitions through After Delay animations. To add instant animations use 1ms delay.

Visit the Figma Playground designed for this article.

Transform into JSON

To generate your JSON file, access the Lottie Plugin for Figma and navigate to the “export to Lottie” tab. Two options are available:

• Animation Preset: Select one or more frames and clic on the Export to Lottie Button. Select a default animation from the ones displayed.
• Custom animation: Select your prototype flow to use your own animation.

Remember to name your flow to find it easier here. You can do it by selecting the first frame and editing it on Flow Starting Point on the prototype menu.

Save to Lottie

A window displaying a preview of the animation will appear. In case the preview is not visible, it’s likely due to certain advanced Figma features that may not render as expected. See more details.

Tap on “Save to Workspace to Insert” button to save it into your Lottie account.

If you open the Lottie Files website in your browser and go to Dashboard, you will see your saved animations. Tap on the 3 dots menu and download it as a JSON file.

Import to React JS

Installation

Install lottie-react library in your project.

npm i lottie-react

Basic Lottie

Here you can see a basic looped Lottie component.

import lottieData from './../assets/fish.json';
import Lottie from 'lottie-react';

export const BasicLottie = () => {
    return (
        <Lottie
            className='Lottie'
            animationData={ lottieData }
            style={{ height: '300px', width: '300px' }}
            autoplay={true}
            loop
        />
    )
}

If you combine your lottie with extra css to traslate, rotate or scale it, you can enhance your animations. Notice that we have avoided editing the CSS of every element of the fish, which is a more challenging task.

animation: bounce 2s linear infinite;

Animation Playback

Control the animation playback by using methods such as play(), pause()or stop(), or change the speed with setSpeed(speed)

Press Command (Mac) or control (Windows) and tap on ‘Lottie’ to see all the available methods

React Hooks

Add user events using React Hooks as you usually do. Note that you can get important information such as loop duration or number of loops by using onLoopComplete and onEnterFrame, so you can trigger the actions when a loop has finished or after n loops.

This is an example using useState React hook to save the number of completed cicles in a variable.

import lottieData from './../assets/fish.json’;
import Lottie from 'lottie-react’;

export const LottieExample = () => {

    const [ cicles, setCicles ] = useState(0)

    const countCicles = () => {
        setCicles(cicles+1)
    }

    return (
        <Lottie
            className=’Lottie'
            animationData={ lottieData }
            style={{ height: '300px’, width: '300px' }}
            autoplay={true}
            loop
            onLoopComplete={countCicles}
        />
    )
}

Conclusion

Lotties are easy to implement, and they are really worth it due to their lightweight and scalability. After Effects is the preferred tool for animations, but Figma offers a quick option to design basic animations when time, knowledge or licensing are a factor.

There are hundrend of entertaining ways to use lotties. Follow me for more experiments and explorations.

Thanks to Pablo Gómez Guerrero