Skip to main content
Question

How to export a smart amination done in Figma as a JSON/Lottie file?

  • August 10, 2022
  • 8 replies
  • 8942 views
Eden_Meiman

Hello dear community,
I’ve created a 30-sec prototype in Figma using smart animation.
As I’ve seen that there’s no way to export any of that as a piece of JSON file from Figma directly, I had to re-create all those “smart animated” parts manually in Jitter, where I could export it as JSON. The problem began when I realized that Android and iOS couldn’t play those animations because I used SVGs for some graphics. Jitter offered to convert all SVGs to PNGs, and this workaround works only for the same viewport, which is not ideal, to say the least.

  1. The ideal solution for me will be to have the ability to export a smart animation from Figma directly in a JSON format.
  2. The second ideal solution will be to discover whether there is a motion design tool that supports Figma’s smart animation and is able to export the animation as a JSON format.
  3. The third ideal solution will be to discover a motion design tool that a) gives the possibility to re-create manually what I did with the smart animation, b) is able to export the animation as JSON, and c) above all, knows how to handle SVGs and make them somehow work with iOS and Android.

Any piece of help will be highly appreciated,
Thank you in the name of my entire team
Eden

8 replies

Aurelien2
  • Aurelien2
  • 1 reply
  • November 23, 2022

I think you can do it with Principle. Then export into .gif or MP4 video. You can make it loop etc…

Aneta
  • Aneta
  • 4 replies
  • December 24, 2022

I wonder whether Figma plans to launch an update to make your animations export as .json or LottieFile possible any time soon?

Reka_Vig
Justine_Gab
Mitsuri Kanroji
3 people like this
  • Reka_Vig
    Reka_Vig
  • Justine_Gab
    Justine_Gab
  • Mitsuri Kanroji
    Mitsuri Kanroji
Laurie_Rollitt

Wow, this was years ago, how has this not been addressed already? I’ve made animations using smart animate in Figma and don’t want to pay over $200 to use LottieFiles just to export the files I’ve created in Figma.

Imogen_Bellotti
1 person likes this
  • Imogen_Bellotti
    Imogen_Bellotti
Lina18
  • Lina18
  • 1 reply
  • September 20, 2024

Blockquote
Wow, this was years ago, how has this not been addressed already? I’ve made animations using smart animate in Figma and don’t want to pay over $200 to use LottieFiles just to export the files I’ve created in Figma
Totally agree.

Loisjoan
  • Loisjoan
  • 1 reply
  • September 23, 2024

Seriously, it’s been years—how is this still an issue? I’ve made animations in Figma using smart animate, but I really don’t want to shell out over $200 just to export them. I totally relate

Mitsuri Kanroji
1 person likes this
  • Mitsuri Kanroji
    Mitsuri Kanroji
Mitsuri Kanroji
Loisjoan wrote:

Seriously, it’s been years—how is this still an issue? I’ve made animations in Figma using smart animate, but I really don’t want to shell out over $200 just to export them. I totally relate

I think so too.

Haoran
  • Haoran
  • New Member
  • 1 reply
  • April 28, 2025

Having the same problem in 2025, I’ve run out of the free uploads on Lottie, but still needs 4 more animations. It seems they don’t have a monthly plan. 240 dollars for 4 animations is insane.

Wirkkarl
  • Wirkkarl
  • New Participant
  • 17 replies
  • May 21, 2025
Eden_Meiman wrote:

Hello dear community,
I’ve created a 30-sec prototype in Figma using smart animation.
As I’ve seen that there’s no way to export any of that as a piece of JSON file from Figma directly, I had to re-create all those “smart animated” parts manually in Jitter, where I could export it as JSON. The problem began when I realized that Android and iOS couldn’t play those animations because I used SVGs for some graphics. Jitter offered to convert all SVGs to PNGs, and this workaround works only for the same viewport, which is not ideal, to say the least.

  1. The ideal solution for me will be to have the ability to export a smart animation from Figma directly in a JSON format.
  2. The second ideal solution will be to discover whether there is a motion design tool that supports Figma’s smart animation and is able to export the animation as a JSON format.
  3. The third ideal solution will be to discover a motion design tool that a) gives the possibility to re-create manually what I did with the smart animation, b) is able to export the animation as JSON, and c) above all, knows how to handle SVGs and make them somehow work with iOS and Android.

Any piece of help will be highly appreciated,
Thank you in the name of my entire team
Eden

Hi Eden, totally understand the struggle — Figma’s Smart Animate is great for prototyping, but unfortunately, it doesn’t translate to JSON or Lottie directly since it’s not timeline/keyframe-based like traditional motion tools.

Your workaround via Jitter is clever, but yes, SVG support across platforms can be inconsistent.

For your second and third ideal solutions, here are a couple of tools worth exploring:

  • Haiku Animator (now discontinued but still works locally): It supports importing Figma assets and exports to Lottie.

  • LottieFiles plugin for Figma: While it doesn't support Smart Animate, it lets you manually build animations that are Lottie-compatible.

  • Rive: It’s powerful, supports runtime interaction, and is SVG/vector-friendly. You’d need to recreate animations manually, but it exports as which can be used in apps similarly to Lottie.

Hopefully, Figma will offer better motion export in the future, but for now, combining it with tools like Rive or After Effects + Bodymovin is your best bet.

Good luck to you and your team!

Reply


Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings