Great question. The last time I checked the output was identical if not very close. I may take a gander at it soon and see if it’s worth its own video!
I had to work on a very complex flag animation for my product some 2 years ago and it wasn't working. I made it into a GIF and split everything frame by frame, exported the PNG and stringed it together in AE. 😂 The file was super heavy but our mobile guy was able to make it work. This is a much more efficient method!
Hmm interesting, I think I have 2 options to get scalable animations with Figma files 1. Importing the figma files into Adobe Illustrator, converting the ai file in ae to shape layers and render with bodymovin 2. Export figma file as .svg and import it in lottiecreator browser, making the animation there but with many limitations and some extra costs Both have their advantages and disadvantages. Advantages for the first one are I can possibly use more effects and do some more complex animations but with the disadvantage that it won't handle gradients and blurs. Advantages for the second are I can handle the gradients and blurs but I can't animate everything as detailed as in AE Sadly that AE doesn't support svg files yet 😭 it could be way better lmao
Actually I have a 3rd idea, I can export a svg file and put the animated layer that has no gradients over the svg file So then this could work in some cases
You can acutally just export lottie SVG animations from AE, Firstly Importing from Figma > AE using AEUX plugin. This works great for 99% of things, however there are many effects and visuals that are not compatible with SVGs / Lottie which is what the focus of this video is for. Agreed its always better working with SVGs to keep things scalable but sometimes in the product design process you need to get hacky to ship things.
Check out this video where I dive into it! After Effects Gradient Lottie Animation Exports without errors th-cam.com/video/SIZA1ZV1OiQ/w-d-xo.html TLDR save before export.
@@MotionUX i mean the output of the json files just nothing, I cant see any keyframes and any visual from my png sequence. the size only 1 kb too. doesn't make any sense
@@nartz5361 hmm… sounds like it’s not actually converting your animations. Make sure the render in/out is covering your project, Or Try a fresh project. Make sure your render settings in body moving are also the same as what’s shown in the tutorial.
Another awesome tutorial! thanks! question...why do you use the bodymovin vs lottie plugin? thanks again!
Great question. The last time I checked the output was identical if not very close.
I may take a gander at it soon and see if it’s worth its own video!
Just posted this answer to your question!
th-cam.com/video/m-3yj3vvlGM/w-d-xo.htmlsi=T9lBoRa6AU2LS1lh
I had to work on a very complex flag animation for my product some 2 years ago and it wasn't working. I made it into a GIF and split everything frame by frame, exported the PNG and stringed it together in AE. 😂 The file was super heavy but our mobile guy was able to make it work.
This is a much more efficient method!
Amazing. We’ve all had these moments haha happy to share a more efficient workflow!
goddd you're a lifesaver, thanks a ton
Appreciate it, glad it helped!
Hmm interesting, I think I have 2 options to get scalable animations with Figma files
1. Importing the figma files into Adobe Illustrator, converting the ai file in ae to shape layers and render with bodymovin
2. Export figma file as .svg and import it in lottiecreator browser, making the animation there but with many limitations and some extra costs
Both have their advantages and disadvantages.
Advantages for the first one are I can possibly use more effects and do some more complex animations but with the disadvantage that it won't handle gradients and blurs.
Advantages for the second are I can handle the gradients and blurs but I can't animate everything as detailed as in AE
Sadly that AE doesn't support svg files yet 😭 it could be way better lmao
Actually I have a 3rd idea, I can export a svg file and put the animated layer that has no gradients over the svg file
So then this could work in some cases
You can acutally just export lottie SVG animations from AE, Firstly Importing from Figma > AE using AEUX plugin.
This works great for 99% of things, however there are many effects and visuals that are not compatible with SVGs / Lottie which is what the focus of this video is for.
Agreed its always better working with SVGs to keep things scalable but sometimes in the product design process you need to get hacky to ship things.
Are you able to use this technique for a Lottie file on Webflow? We are having trouble linking the images and it's driving me bananas lol
Absolutely, Wherever a Lottie is able to be played this technique will work!
followed all the steps but each time I try to render it just showing up render error and nothing renders out (
I always seem to have an issue with colours remaining the same after export. Just tends to revert back to the original colour, and tips for said?
this isnt using a png sequence tho.
Check out this video where I dive into it!
After Effects Gradient Lottie Animation Exports without errors
th-cam.com/video/SIZA1ZV1OiQ/w-d-xo.html
TLDR save before export.
Great content as usual!
Appreciate it 🎉🎉
Thank you so so much!
Absolutely!
Awesome, thanks for this tutorial
why i cant see my png sequence on the json?
Tell me more about what you mean? In the code? During html preview? On device?
@@MotionUX i mean the output of the json files just nothing, I cant see any keyframes and any visual from my png sequence. the size only 1 kb too. doesn't make any sense
@@nartz5361 hmm… sounds like it’s not actually converting your animations. Make sure the render in/out is covering your project, Or Try a fresh project.
Make sure your render settings in body moving are also the same as what’s shown in the tutorial.
IMG sequences aren't rendering.. how did you do it?
In the video at about 2:05 I explain my process of how I export the png sequence.