アニメーションを選ぶ

バナーのレイヤーに、数十種類の定義済みキーフレームアニメーションから選んで適用できます。

動画チュートリアル：FigmaからバナーにアニメーションをつけてHTMLにエクスポートする

この動画では、FigmaからそのままHTMLバナーにアニメーションを付け、数秒で入稿できる形式にエクスポートする方法を紹介します。

アニメーション ​

Bannerifyには、数十種類の定義済みキーフレームアニメーションが用意されており、次の5つのカテゴリに分かれています。

  • 登場（Entrances）
  • 退場（Exits）
  • 基本変形（Basic Transforms）
  • 注目（Attention Seekers）
  • 背景パン（Background Pans）

Split Textアニメーションを使う。 Bannerifyには、対応するテキストレイヤー向けに、文字・単語・行ごとに分割する専用のアニメーションも用意されています。設定手順、対応フォント、現時点での注意点については、Split Textアニメーションをご覧ください。

ネイティブのFigma Motionアニメーションを使う。 個々のレイヤーではFigma Motionグループから検出されたアニメーションを選ぶか、Batch Layer ActionsのエントリーメニューからApply Each Layer's Figma Motionを選びます。少なくとも1つのレイヤーにMotionを適用したら、Figma本来のタイミングのずれも反映したい場合は、タイムラインの上にあるMirror Figma Motion Timingsを有効にします。オプトインの手順と対応プロパティの詳細は、Figma Motionアニメーションを使うをご覧ください。

レイヤーからアニメーションを外す。 レイヤーにアニメーションを一切付けたくない場合は、No Entry AnimationとNo Exit Animationのどちらか（または両方）を選びます。あるいは、Figmaのレイヤー名の先頭にlocked- を付ける（例：locked-RectangleBackground）方法もあります。この場合もアニメーションは追加されず、プラグインのタイムラインでアニメーションのセレクトボックスも無効になります。

登場アニメーションを追加する ​

登場アニメーションを設定するには、Bannerifyのタイムラインでアニメーションを付けたいレイヤーにカーソルを合わせ、上のセレクトボックスをクリックします。アニメーションの一覧をスクロールし、アニメーション名をクリックしてレイヤーに適用します。新しいアニメーションを適用したバナーのプレビューがすぐに更新されます。

退場アニメーションを追加する ​

退場アニメーションの追加方法は、登場アニメーションと同じです。上のセレクトボックスの代わりに下のセレクトボックスをクリックして、レイヤーの退場アニメーションを選びます。

レイヤーに設定する退場アニメーションは、必ず「登場」アニメーションが終わった後に始まるように設定してください。 そうしないと、2つのアニメーションが重なり、同時にトランジションが競合して問題が起きます。