Skip to content

Using the live preview

See your custom animation in real-time as you adjust keyframes and properties.

Video Tutorial: Add custom animations to your Figma banner designs

This video tutorial is a complete step-by-step guide showing you how to add custom keyframe animations to your banners using the Bannerify plugin.

To easily see how your animation is looking based on the keyframes and their properties that you've updated, you can look at the Live Preview area, which sits right next to your keyframe properties, and directly underneath the animation timeline. Any changes you make to your keyframes, properties or easing will automatically be shown in the live preview.

You can adjust the playback speed of the live preview. If you want to see how your custom animation looks at different speeds, you can change the playback speed in the live preview by dragging the Preview Speed slider left and right to increase and decrease the playback speed.