Video Tutorial: Add custom animations to your Figma banner designs

You can edit 5 different properties for any of your animation keyframes. Any differences in properties between your keyframes will automatically be animated; for example, setting scale to 2x on the 0% keyframe, and setting scale to 1x on the 100% keyframe will automatically create a "shrinking" animation.

• The X property will animate your element's left/right pixel position (in pixels).
• The Y property will animate your element's top/bottom pixel position (in pixels).
• The Opacity property will animate your element's transparency percentage.
• The Rotate property will animate your element's rotation degrees.
• The Scale property will animate your element's size.

Using Percentage Based Relative X/Y Transforms

If you would prefer to set X/Y positioning based on the percentage of the animated element, you can enable the Relative % Transforms toggle in the keyframe properties panel, which will allow you to set a percentage value for your X/Y values (instead of pixels).

Applying a percentage X/Y transform value will automatically animate the element that the animation is applied to by using its position, and applying the percentage transform to that size; for example, setting a 10% X transform value on a keyframe will animate a layer that's 100px wide, by 10px. Applying that same animation with a 10% X transform value to a layer that's 200px wide, will animate the layer by 20px.

Splitting Scale into X/Y Scale Options

If you would prefer to set the scale values for each X/Y axis individually, you can click the Unlock Scaling toggle in the keyframe properties panel, which will allow you to set the horizontal and vertical "Scale" values for your keyframes independently, rather than equally scaling them both for an even scale up or down animation.

This setting can be useful if you need to animate the width or height of a layer, without also affecting other X/Y axis at the same time.