Figma to Lottie: The Long-Awaited Export Feature is Here | Export As JSON

[@Masda.X]

this is so underrated, this content is a gem for flutter developers specially for beginners. thanks a lot man

[@DesignXstream]

Thanks man! Glad you found it useful 🙌🏼

[@LottieFiles]

Thank you for sharing 😍

[@DesignXstream]

Amazing feature kudos to your team! ✌🏼

[@artist792]

Sir this animation I made in figma I have exported it to Lottie files thanks to your tutorial but when I use this animation in my project it keeps on repeating tha animation how to use the animation in a way that it stops after the animation runs once .

[@DesignXstream]

When you in your project on what platform are you using it? If it is in react code then follow this method: github.com/lottie-react-native/lottie-react-native/blob/master/docs/api.md#methods-imperative-api

[@ozanarslan5175]

I think gradient is not supported ? Sorry my English.

[@DesignXstream]

Now it supports, check new update!

[@sanjib_paul]

Awesome tutorial 🤩

[@DesignXstream]

🙌🏼 🙌🏼 Cheers!

[@MarcusVinicius-yd9kz]

Thank you!!!!!!!!!!!!

[@DesignXstream]

You're welcome! ✌🏼

[@jo69123]

great video G

[@DesignXstream]

Glad you liked it! Cheers ✌🏼

[@omardanial7351]

can we export animations as JSON which are made in Figma not lottie files

[@DesignXstream]

No, you need the help of plugins to export as JSON like this LottieFiles or Aninix plugin.

[@jo69123]

Do you think that connecting a webflow page to a SiteGround custom domain could cause performance issues when loading the site?

[@DesignXstream]

If you are hosted on Webflow and just using the custom domain from somewhere else it will not cause any issue.

[@jo69123]

@@DesignXstream well I’m hosting from siteground, is this a bad practice? What should I do instead?

[@DesignXstream]

@@jo69123There are 2 ways you could do this: 1. Buy the Webflow Site plan: This includes webflow's own hosting. So you just build it on webflow, add your custom domain from SiteGround or any other external domain service and publish it. 2. Buy the Webflow Workspace plan:This will allow you to build on webflow then it gives you option to export the code. Just take this export and host it on your SiteGround's hosting with custom domain. Option 1 is better and easy to manage as everything is hosted on Webflow you can quickly jump in make changes and publish. Option 2 is good when you don't have to make freqeuent changes becoz everything you change you have to export the code and upload to your hosting.

[@DesignXstream]

@@jo69123 If you already bought the siteground hosting and you have a webflow plan that allows you to export the code then go for it. It in not a bad practice but it will need little more effort in maintance.

[@jo69123]

I don't have a plan that lets me export, I'd prefer to just maybe use my domain name an host it back in webflow I guess, if that improves the performance @@DesignXstream

[@Progettiamodivertendoci]

Can't save as GIF format on desktop?

[@DesignXstream]

This will export the lottie into your Figma canvas. From there you can use GifExport plugin and download it to your desktop.

[@amrutarocks]

Thanks for the tutorial. However I am facing a problem when running the Lottie plugin. It changes the way the animation works. I tried to convert the shapes to outline strokes too but no luck :(

[@amrutarocks]

I made the animation in Figma using smart animate

[@DesignXstream]

Animating on Figma doesn't reflect on Lottie. Lottie basically expect you to provide frame by frame changes and it will animate using the plugin. And there are some limitation in Lottie if you got to the documentation you will find what properties it doesn't support yet.