バナーをアニメーションWebP画像にエクスポートする

タイムラインでレイヤーのアニメーションを作り終えたら、バナーをアニメーションWebPファイルにエクスポートできます。

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

この動画では、Bannerifyプラグインを使って、そのまま使えるアニメーションバナーをFigmaからアニメーションWebP画像にエクスポートする方法を紹介します。

Export to GIF/Videoをクリックしてエクスポート設定を行ったら、エクスポートパネルの下部にあるExport WebP (n Banners) ボタンをクリックすると、FigmaからバナーをアニメーションWebP画像にエクスポートできます。アニメーションバナーはアニメーションWebPの画像ファイルとしてエクスポートされます。

ブラウザの対応状況 ブラウザの互換性の問題により、Animated WebPはChromeまたはFigmaデスクトップアプリでしかエクスポートできません。

エクスポートにバナーを含める・除外する デフォルトでは、Bannerifyにバナーとして読み込まれたFigmaファイルのトップレベルのレイヤーがすべてエクスポートに含まれます。（選択したバナーを読み込み直すことなく）エクスポートから除外したいバナーがある場合は、そのバナーのタイムラインのヘッダーにあるInclude In Exportスイッチを「オフ」にします。そのバナーのタイムラインが非表示になり、エクスポートにも追加されなくなります。

フレームレート（Frames Per Second） ​

Frames Per Secondのセレクトボックスのオプションで、GIFエクスポートのフレームレートを変更できます。選べるFPSは次のとおりです。

  • 60 FPS（Ludicrous Mode）
  • 30 FPS（Ultra Smooth）
  • 24 FPS（Smooth）
  • 18 FPS（Less Smooth）
  • 12 FPS（Least Smooth）
  • 6 FPS（Jittery）

FPSが高いほどレンダリングに時間がかかります。 フレーム数が多いほどエクスポートに時間がかかり、ファイルサイズも大きくなる点に注意してください。たとえば、5秒のタイムラインを24 FPSでエクスポートすると、バナー1つあたり 120フレームがレンダリングされます。

最終的なWebPの.zipファイルをダウンロードする ​

Bannerifyでバナーの処理が終わると、確認メッセージが表示されます。Download your .zip fileボタンをクリックすると、エクスポートしたバナーを含む.zipファイルをダウンロードできます。

Figmaからダウンロードしたファイルの保存 Figmaのデスクトップアプリを使っている場合は、ファイルをダウンロードするためのダイアログが表示されます。一方、WebブラウザでFigmaを使っている場合は、デフォルトでファイルが自動的にパソコンにダウンロードされます（通常はパソコンのDownloadsフォルダに保存されます）。

WebPの.zipファイルを開く ​

Figmaから.zipファイルをパソコンにダウンロードしたら、ファイルエクスプローラーで保存先のフォルダを開きます。エクスポートした.zipファイルをダブルクリックすると内容が解凍され、バナーを自由に使えるようになります。