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

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

タイムラインのどのレイヤーにも、Add Hoverトグルをクリックし、表示されたドロップダウンからホバーアニメーションを選ぶことで、（HTMLエクスポート用の）ホバーアニメーションの状態を追加できます。Loopトグルをオンにするとアニメーションが繰り返され、ホバーのタイミングバーの端をドラッグするとホバーアニメーションの速度を調整できます。

アニメーションの見え方をプレビューするには、Bannerifyのプレビューウィンドウでレイヤーにマウスを重ねます。

ホバーアニメーションを複数のレイヤーに適用する。一括適用機能を使うと、ホバーアニメーションを複数のレイヤーにまとめて適用することもできます。

切り替わるホバー状態を追加する

2つの異なる状態を切り替えたい場合（たとえば、CTAボタンにマウスを重ねたときに色を変える場合）は、「ホバー」状態用のレイヤーを作って元のレイヤーの上に配置し、登場のホバー状態を適用します。これで、その要素にマウスを重ねるたびに、ホバー用のレイヤーが切り替わって表示されます。