← Back to Bannerify Video Tutorials

What this video covers

The video shows how to use the Bannerify Figma plugin to add Lottie animations into banner designs by pasting a Lottie JSON URL into a placeholder layer. It also shows how to combine Lottie embeds with Bannerify transitions and export the finished banner to HTML/CSS, GIF, WebM, or MP4.

Things you'll need

• A Figma file with banner frames and placeholder layers set up.
• A Bannerify plugin installation.
• A Lottie JSON file URL from lottiefiles.com or another source.

Steps

1. Install the Bannerify Figma plugin from the Figma Community Plugins tab.
2. Open your banner file in Figma, right-click, and launch Bannerify from Plugins.
3. Load the parent frames you want to work on with Load Selected Banners.
4. Create or select a placeholder layer, open its settings, and paste a Lottie Animation URL from lottiefiles.com or another Lottie JSON source.
5. Set the Lottie animation to loop if desired, then preview it alongside Bannerify layer animations such as fade in or scale in/out.
6. Add more placeholder layers or use Media Embed and Quick Select Layer to apply the same Lottie animation across multiple layers or banners.
7. Export the banner with Export to HTML or Export to GIF/Video, then download the .zip file and open the exported HTML or video output.

Useful links

• Watch the full video on YouTube
• Read the full video transcript
• Read: Including Lottie file animations in your banners
• Next: Add scrollable text disclaimers to HTML Figma banners
• Open Bannerify in the Figma Community