Including Lottie file animations in your banners

You can embed Lottie file animations to a non-text Figma layer in your Bannerify timeline by clicking the Settings icon button for that layer, and then pasting in a URL pointing to a valid Lottie file (.json) into the Lottie embed input field.

Video Tutorial: Add Lottie animations to Figma banner exports

This video walks through how to add Lottie file animations to your banners using the Bannerify plugin.

To get a Lottie animation, you can either browse the selection of animations on LottieFiles.com, or if you've created your own using the After Effects plugin, you can upload your .json file to the LottieFiles website as a private animation, and then copy the URL link to your animation in the same way to use it in Bannerify.

By default, your Lottie animation will automatically loop, but you can change this if needed by turning off the Loop Embed toggle.

To remove a Lottie animation from your layer, click on the the Settings icon button again and remove the URL from the Lottie embed input field.

Bulk applying Lottie file URLs As with other layer settings, you can also apply your Lottie file URL setting to layers in bulk by using the bulk apply feature.

Complex visual effects/masks in video/GIF exports. If you're exporting banners containing Lottie files to video or GIFs from Bannerify, certain Lottie files contain special effects, masks or styles that won't be supported as they are in the HTML exports.

Some ad platforms will block Lottie animations from being used. If you're exporting banners containing Lottie files to HTML for ad platforms like Google Ads, some of these platforms won't allow you to upload your banners, as they don't allow third party Javascript libraries (like Lottie) to be used.