動画チュートリアル:FigmaからバナーをWebM動画にエクスポートする
この動画では、Bannerifyプラグインを使って、そのまま入稿できるアニメーションバナーをFigmaからWebM動画にエクスポートする方法を紹介します。
Export to GIF/Videoをクリックしてエクスポート設定を行ったら、エクスポートパネルの下部にあるExport WebM (n Banners) ボタンをクリックして、FigmaからWebMへのバナーのエクスポートを開始します。アニメーションバナーはWebM動画としてエクスポートされます。
ブラウザの対応状況 :ブラウザの互換性の問題により、WebM動画はChromeまたはFigmaデスクトップアプリを使った場合にのみエクスポートできます。
WebMは自動で最適化されます 。WebM動画のエクスポートは、最小のファイルサイズで最高の画質になるよう自動で最適化されます。
エクスポートにバナーを含める・除外する 。既定では、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フレームがレンダリングされます。
最終的なWebM動画の.zipファイルをダウンロードする
Bannerifyでバナーの処理が終わると、確認メッセージが表示されます。Download your .zip fileボタンをクリックすると、エクスポートしたバナーを含む.zipファイルをダウンロードできます。
Figmaからダウンロードしたファイルの保存 Figmaのデスクトップアプリを使っている場合は、ファイルをダウンロードするためのダイアログが表示されます。一方、WebブラウザでFigmaを使っている場合は、デフォルトでファイルが自動的にパソコンにダウンロードされます(通常はパソコンのDownloadsフォルダに保存されます)。
WebM動画の.zipファイルを開く
Figmaからパソコンに.zipファイルをダウンロードしたら、ファイルエクスプローラーで保存先のフォルダを開きます。エクスポートした.zipファイルをダブルクリックすると内容が解凍され、バナーを自由に使えるようになります。
動画エクスポートのFPS(フレームレート)設定
Frames Per Secondのセレクトボックスのオプションで、エクスポートする動画のフレームレートを変更できます。選択できるFPSのオプションは次のとおりです。
- 60 FPS (Ludicrous Mode)
- 30 FPS (Ultra Smooth)
- 24 FPS (Smooth)
- 18 FPS (Less Smooth)
- 12 FPS (Least Smooth)
- 6 FPS (Jittery)