In this post, we will show you how to export Lottie animations from Figma, and then integrate them into your website without sacrificing performance. As we mentioned in our previous article, Lottie animations from Blender, one of the main advantages of using Lottie animations is that they are exported in JSON files, which have a really small size.
As video game developers, having an attractive website is essential to make our products known. Including animations can make our site more dynamic and captivating, inviting users to stay longer. This not only improves the user experience, but also contributes to a better positioning in search engines.
Exporting Lottie Animations from Figma
Figma is a vector graphics editor and prototyping tool that is very useful for designing website and application interfaces. It is a versatile tool that can be used directly in the cloud, and by simply registering, you can start taking advantage of all its features.
In addition, Figma has an active community that develops a variety of plugins useful for any creation process. In fact, we will use one of these in the export of our animation.
However, before we start, there are certain aspects that must be taken into consideration.
Considerations
Each movement in a different Frame
A frame in Figma is a framework where we place all the elements that make up our interface, and also functions as a container for our prototype animations.
Figma offers predefined frames with sizes for different devices, from mobiles to desktops and smart watches, as well as for publications and social network headers.
In our case, we used a custom frame size and started from a very simple animation, in which we placed each position of our “Kirby” in a different frame.
Consistent Elements
It is crucial that all elements within each Frame are consistent. Although they may undergo transformations or position changes, they must be the same in number and name.
Export Steps
1. Naming the animation flow
Once all the Frames needed for the animation have been created, they must be connected through interactions. These interactions represent what the users would do to move to the next frame, such as a click, hover or tap, among other actions.
In order to define these actions, it will be necessary to select the Prototype tab in the right column of Figma.
Then, with the first frame previously selected, click on the “+” button next to the Flow Starting Point title. In this way, a field will appear to name the flow; you can leave the default name “Flow 1” or change it. In our case, we have named it “Start”.
2. Define the animation flow
Now returning to Frame 1 inside the Figma canvas, we will notice that it has a small round white button with a + sign in the center. We click on it and drag the arrow to the next frame of the animation, configuring the interaction below:
- Trigger: As we are interested in exporting the animation in JSON format, we will leave the default value: On click.
- Action: Leave the Navigate to option selected (it was placed automatically when dragging the arrow). Since; in short, we will go to the next Frame.
- Transition:This option refers to how the transition will be made between our first frame and the next one. We will choose Smart Animate with a duration of 200ms and the Ease in and out option, so that it looks smooth. This will depend on the type of animation being made.
3. Repeat the process
Simply repeat the previous step with each frame, including the connection of the last frame to the first (if a loop is desired).
A point to take into consideration is that if you do not want to make any changes in the subsequent connections, the values of the previous connection will be set by default, so it will be enough to connect one frame to another.
4. Export Animation Lottie
Once the interactions between all the Frames have been defined, we right click on the Figma canvas, select the Plugins option and then the Manage Plugins.
In the window that appears, type “LottieFiles” in the search box and select the option displayed with the Lottie icon
Once in the plugin window, select the Export to Lottie tab, and select our flow.
We check the preview of our animation, and adjust the background and speed of the animation, if necessary. Finally, click on the Save to Workspace button.
The option to create a LottieFiles account or log in will be displayed.
We log in or create an account on LottieFiles. Once registered, we grant access to Figma.
We return to Figma, and save the animation in our workspace in LottieFiles.
5. JSON File Export
Go to your LottieFiles profile, open the corresponding folder and the newly added animation should be there.
By clicking on the animation, we will navigate to a new window where we will have the option to download it as JSON (ready to be included in our website).
And that’s it, following these simple steps, you can create more complex and creative animations using Figma, having as main advantage that you can easily export it as Lottie Animation through the add-on provided by the LottieFiles team.
We hope this article will be of great help to you.
Thanks for reading, see you next time!
