バナーをアニメーションGIFファイルにエクスポートする

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

動画チュートリアル：FigmaからバナーをGIFにエクスポートする

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

バナーが完成し、GIF、WebM、MP4、アニメーションWebPファイルにエクスポートしたくなったら、BannerifyのヘッダーでExport to GIF/Videoボタンをクリックします。GIF・動画のエクスポート設定が開きます。

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

エクスポートにバナーを含める・除外する デフォルトでは、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フレームがレンダリングされます。

GIFのフレームの遅延は10ミリ秒単位です。Bannerifyは、全体の再生速度を保つために、必要に応じてフレームの遅延を交互に変えます。そのため、個々のフレームの長さがわずかに異なる場合があります。GIFで60 FPSを選ぶと、ブラウザが正しい速度で再生できるよう、Bannerifyは50 FPSでサンプリングしてエクスポートします。エクスポートパネルとZIPのファイル名には、実際のレートである50 FPSが表示されます。選んだフレームレートは、MP4やその他の形式ではそのまま使われます。

可逆圧縮と非可逆圧縮 ​

デフォルトでは、GIFは可逆圧縮でエクスポートされます。目立った品質の低下なしに、ファイルサイズが小さく抑えられます。多少の品質の低下と引き換えに、さらに小さなGIFが必要な場合は、Lossless Compressionトグルをオフにし、カスタムの圧縮品質スライダーを必要に応じて調整してください。

ディザリングの詳細オプションの設定 詳しい方は、GIFエクスポート設定パネルで画像のディザリングのドロップダウンのオプションを変更して、GIFのエクスポートに使われるディザリングの種類をカスタマイズできます。

グローバルカラーパレットを使う ​

すべてのフレームのカラーパレットが同じGIF（フレーム間でわずかな動きやテキストの変更などがあるだけのもの）をエクスポートしていて、色の乱れが見られる場合は、All GIF frames have the same color paletteトグルのオプションを有効にするとよいでしょう。GIFの最初のフレームのカラーパレットを再利用し、GIFのほかのすべてのフレームにも適用します。

グローバルカラーパレットは不具合が起きることがあります。 GIFに不要な色の乱れやバンディングが見られる場合の最後の手段としてのみ、このオプションを使ってください。GIFのほかのフレームにある色の一部が最初のフレームに含まれていない場合、別の問題が起きることがあります。

無限ループ再生 ​

Infinite Loopオプションを有効にすると、アニメーションのタイムラインをずっとループし続けるGIFがエクスポートされます。この設定を無効にすると、GIFはアニメーションのタイムラインを1回再生した後、アニメーションの最後のフレームで止まります。このオプションはGIFのエクスポートにのみ適用されます。

GIFの透明な背景を指定する ​

デフォルトでは、GIFのエクスポートに透明な背景は含まれません。GIFに透明部分が必要な場合は、GIFエクスポート設定でHas Transparent Backgroundトグルを有効にしてください。

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

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

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

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

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