Video Tutorial: Add custom animations to your Figma banner designs

When you open the animations panel, you'll see 2 keyframes; the first keyframe (0%) and the final keyframe (100%). These are added by default and can't be removed, as a keyframe animation needs at least one frame to start the animation from and a keyframe to show where it ends.

Selecting a keyframe to edit

You can instantly swap between any keyframes by clicking on a keyframe under the Animation Timeline near the top of the custom animations panel. Clicking on a keyframe will allow you to edit the properties for that specific keyframe.

Inserting new keyframes

You can easily add more keyframes in between the default start/end (0%/100%) keyfarmes to create more complex keyframe animations. To add a new keyframe to your timeline, enter your new keyframe percentage (eg. 50) in the input field, then click on the Insert New Keyframe button to insert a brand new keyframe at that percentage in the timeline.

Any new keyframe that you add will automatically be created with the same properties that your currently selected keyframe contains; this allows you to easily adjust properties based on other keyframes you've already added. Your newly added keyframe will also be automatically selected after you click the Insert New Keyframe button.