← Back to Bannerify Video Tutorials

What this video covers

The video shows how to install the Bannerify Figma plugin and use its custom Animation editor to build keyframe-based banner animations. It demonstrates creating, saving, updating, deleting, and applying custom animations, then exporting them in GIF/MP4, HTML, and banner set outputs.

Things you'll need

• Figma Community access
• The Bannerify Banner Studio plugin installed

Steps

1. Install the Bannerify Banner Studio plugin from Figma Community and open it from Plugins in your Figma project.
2. Open the Animations panel to create a custom CSS-based timeline animation instead of using preset entrances and exits.
3. Set keyframe properties such as X-axis, Y-axis, opacity, rotation, and scale, then use the live preview and easing controls to shape the motion.
4. Add intermediate keyframes with Insert New Keyframe, copy and paste properties between frames if needed, and adjust the animation path and timing.
5. Name the animation, click Add New Animation, and select it under Custom Animations to apply it to a banner layer.
6. Use the timeline speed slider and delay controls to preview the animation, and update a saved animation or create a new version such as v2.
7. Delete keyframes or saved animations with the delete controls; deleting an applied animation reverts the layer to No Animation.

Useful links

• Watch the full video on YouTube
• Read the full video transcript
• Read: Creating custom keyframe animations
• Next: Add hover animations to your Figma banner designs
• Open Bannerify in the Figma Community