Figma BuzzでBannerifyを使う

Figma BuzzファイルのバナーデザインをBannerifyに読み込み、アニメーションのタイムライン全体を開いてバナーをエクスポートする方法を紹介します。

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

Figma Buzzファイルからバナーを読み込む ​

Bannerifyでは、既存のバナーデザインをFigma Buzzファイルから直接読み込めます。

  1. BuzzファイルでPluginsパネルを開き、Bannerify Banner Studioを実行します。
  2. Bannerifyのサイドバーで、使いたいバナーフレームのチェックを入れるか外します。
  3. 選択したものを読み込むにはLoad Checked Bannersを、一覧のフレームをすべて含めるにはLoad All Bannersをクリックします。
  4. 案内が表示されたら、プラグインヘッダーの右上にあるFigmaのpop-outアイコンをクリックします。
  5. Bannerifyのフルワークスペースで、レイヤーにアニメーションを付け、バナーをプレビューし、エクスポートオプションを使います。

Bannerifyがポップアウトウィンドウを使う理由 ​

Figma Buzzでは、プラグインは最初に幅の狭いサイドバーで開きます。Bannerifyはこのコンパクトな表示にバナーのチェックリストを置き、バナーを読み込んだ後で、幅の広いポップアウトウィンドウを開くよう案内します。

ポップアウトウィンドウには、Bannerifyの標準のタイムライン、アニメーションのコントロール、プレビュー、エクスポート機能がそろっています。BannerifyをBuzzのサイドバーに戻した場合も、もう一度ポップアウトアイコンを使えば、読み込んだバナーはそのままでフルワークスペースに戻れます。

フルワークスペースを開いた後は、Buzzのバナーデザインでも、Bannerifyの通常のアニメーションのコントロールとエクスポートオプションを使えます。

Buzzのサイドバーのオプション ​

Buzzのサイドバーは、ファイル内にすでにあるバナーフレームの読み込みに特化しています。Generate New Banner Sizes from Figma Frames、Figmaのセクションを使ったマルチシーンの読み込み、その他の設定コントロールは、通常のFigma DesignファイルでBannerifyを使う場合に利用できます。