動画チュートリアル：Figmaのバナーデザインにカスタムアニメーションを追加する

Bannerifyプラグインを使って、バナーにカスタムキーフレームアニメーションを追加する方法を解説した動画です。

アニメーションのどのキーフレームでも、5種類のプロパティを編集できます。キーフレーム間でプロパティに違いがあると、その差分が自動でアニメーションになります。たとえば、0%のキーフレームでスケールを2xに、100%のキーフレームでスケールを1xに設定すると、「縮小」するアニメーションが自動で作られます。

• Xプロパティは、要素の左右の位置（ピクセル単位）をアニメーションさせます。
• Yプロパティは、要素の上下の位置（ピクセル単位）をアニメーションさせます。
• Opacityプロパティは、要素の透明度（パーセンテージ）をアニメーションさせます。
• Rotateプロパティは、要素の回転角度をアニメーションさせます。
• Scaleプロパティは、要素のサイズをアニメーションさせます。

パーセンテージによる相対的なX/Y変形を使う

アニメーションさせる要素に対するパーセンテージでX/Yの位置を設定したい場合は、キーフレームのプロパティでPositionの単位をpxから % に切り替えます。これで、X/Yの値をピクセルではなくパーセンテージで設定できます。

X/Yの変形値をパーセンテージで指定すると、アニメーションを適用した要素の位置を基準に、そのサイズに対するパーセンテージで変形が自動的にアニメーションされます。たとえば、キーフレームでXの変形値を10%に設定すると、幅100pxのレイヤーは10px動きます。同じ10%のXの変形値を持つアニメーションを幅200pxのレイヤーに適用すると、レイヤーは20px動きます。

スケールをX/Yに分けて設定する

X軸とY軸のスケールをそれぞれ個別に設定したい場合は、キーフレームのプロパティでScaleのモードをUniformからX / Yに切り替えます。これで、両方を同じ比率で拡大・縮小するのではなく、キーフレームの横方向と縦方向の「Scale」の値を別々に設定できます。

この設定は、もう一方の軸に影響を与えずに、レイヤーの幅や高さだけをアニメーションさせたい場合に便利です。