Figma Motionアニメーションのエクスポート

TinyImageで、Figma MotionのアニメーションをGIF、APNG、アニメーションWebP、MP4、WebMファイルとして確認・エクスポートします。

アニメーションをすでにFigma Motionで作成している場合は、TinyImageのGIFタブにあるFigma Motion Exportを使います。このワークフローでは、個別の静止フレームからアニメーションを作り直すのではなく、Figmaネイティブのアニメーションレンダラーを使います。

動画チュートリアル：Figma MotionのレイヤーをGIFやMP4動画に一括エクスポートする

この動画では、TinyImageを使ってFigma Motionのアニメーションを圧縮したGIFやMP4動画として一括エクスポートする方法を紹介しています。

Motionアニメーションを選択する ​

FigmaのDesignファイルで、次のいずれかを選択します。

  • Motionアニメーションを含む最上位のフレーム
  • その最上位のフレーム内にある、アニメーションするレイヤー

TinyImageを開き、GIFを選んでからFigma Motion Exportを選びます。ネストしたレイヤーを選択している場合、TinyImageはそれを含む最上位のMotionフレームを特定し、検出した各アニメーションをエクスポートリストでチェックします。

ページ上のMotionアニメーションを探す ​

現在の選択にMotionアニメーションが含まれていない場合、TinyImageは自動で現在のページを確認し、最上位のフレームで見つかったMotionアニメーションを一覧表示します。チェックボックスで、エクスポートするアニメーションを1つ以上選びます。初期設定ではすべてのアニメーションにチェックが入っており、リスト上部のチェックボックスですべてのフレームを選択・解除できます。

TinyImageは、プラグインが同じページにある間このリストをキャッシュします。Motionアニメーションを追加したり、アニメーションするレイヤーを含むフレームを変更したりしたあとは、Rescan this pageを選んでください。別のページのアニメーションを探すには、先にそのFigmaページに切り替えてください。TinyImageはファイル内のすべてのページをスキャンするわけではありません。

選択したフレームを確認する ​

TinyImageでは、エクスポートリストの各Motionフレームの横に静止サムネイルが表示されます。フレームアイコンをクリックすると、エクスポート対象のチェックを変えずに、Figmaのキャンバス上のそのアニメーションに移動します。

これらのサムネイルを使えば、アニメーションをレンダリングしたり、FigmaのVideo Exportタブを開いたり、プレビューファイルをダウンロードしたりせずに、エクスポートリストを確認できます。

エクスポートを設定する ​

エクスポートボタンの横にあるメニューから出力形式を選びます。

  • Animated GIF
  • Animated PNG (APNG)
  • Animated WebP
  • MP4 Video
  • WebM Video

フレームレートと出力サイズを設定します。同じ設定が、チェックしたすべてのアニメーションに適用されます。Sizeの値は倍率なので、同じ一括エクスポート内でもフレームごとに異なるピクセルサイズを保てます。GIF、APNG、アニメーションWebPでは、繰り返し再生と1回だけの再生も選べます。MP4とWebMでは、代わりにLow、Medium、Highの画質プリセットを選べます。

GIFのエクスポートでは、出力の用途に合った圧縮を選びます。

  • No compressionでは、色数を減らさない限り、FigmaのGIFはそのままです。
  • Lossless compressionでは、非可逆のピクセル圧縮を使わずに、GIFのフレームとファイル構造を最適化します。
  • Balanced compressionでは、軽い非可逆圧縮（レベル40）を使い、目に見えるノイズのリスクを抑えながら適度にサイズを削減します。
  • Strong compressionでは、より強い非可逆圧縮（レベル80）を使います。サイズをさらに削減できますが、目に見えるノイズが出る場合があります。
  • Maximum compressionでは、最も強い非可逆圧縮（レベル140）を使い、ファイルを最も小さくできる可能性がありますが、バンディングやノイズのリスクも最も高くなります。

Figma本来の色数の上限を保つには256 colorsを選び、減らす場合は128 colors、64 colors、32 colorsを選びます。パレットの削減は圧縮プリセットとは別のため、Lossless compressionを選んでいても、パレットを小さくすると色が変わったりバンディングが出たりする場合があります。

エクスポートしたGIFを厳密なアップロード上限に収める必要がある場合は、Size Targetを有効にして、最大サイズをKBで入力します。TinyImageは非可逆の度合いと、256色、128色、64色、32色のパレットを自動で試し、上限に収まる中で最も控えめな結果を採用します。目標サイズが有効な間は、手動の圧縮と色数のコントロールが目標サイズの入力欄に置き換わります。

試したどの設定でも目標に届かない場合、TinyImageは見つかった中で最も小さい有効な結果を用意し、ダウンロード前にそのサイズを表示します。Motionのエクスポートサイズ、フレームレート、アニメーションの長さを減らすと、さらに小さくできます。

初期設定では、FigmaネイティブのGIFがそのままエクスポートされます。追加の圧縮を有効にした場合、TinyImageは最適化した結果がFigmaの元のファイルより小さいときだけそれを使います。最適化に失敗したりファイルサイズが大きくなったりした場合は、代わりに元のGIFを安全にエクスポートします。

Figmaでは、StarterプランのMotionのエクスポートは1920 × 1080、30 FPSまでに制限されています。有料プランでの出力が縮小されないように、TinyImageはまず指定どおりのエクスポートを試します。上限を超えるリクエストをFigmaが拒否した場合、TinyImageは1920 × 1080に収めた一時コピーから自動で再試行し、再試行時は30 FPSを上限にします。一時コピーはレンダリング後に削除され、元のフレームは変更されません。青い通知に、エクスポートしたサイズとフレームレートが表示されます。

GIF、MP4、WebMファイルはFigmaが直接レンダリングします。APNGとアニメーションWebPでは、TinyImageはFigmaネイティブのGIFレンダリングをもとに、非可逆圧縮をもう一度かけずに変換します。変換したこれらの形式は、ネイティブのGIFレンダリングの見た目、タイミング、透明部分、カラーパレットを保持します。

アニメーションをエクスポートする ​

Export GIF、Export APNG、Export WebP、Export MP4、Export WebMのいずれかを選びます。各アニメーションのレンダリング中に、FigmaのVideo Exportタブが開いたり更新されたりする場合があります。

チェックしたアニメーションが1つの場合、TinyImageはそのファイルを直接ダウンロードします。2つ以上チェックした場合は、リストの順にレンダリングし、Figma Motion animations.zipというアーカイブを1つダウンロードします。各ファイルにはFigmaのフレーム名が使われ、チェックしたフレームのファイル名が重複する場合は番号が追加されます。

Figma Motionとそのプラグイン用エクスポートAPIは、現在ベータ版です。すでにStarterプランの上限内のレンダリングをFigmaが拒否した場合は、Figma Motionでフレームを開き、アニメーションするレイヤーがまだ含まれていることを確認してから、もう一度エクスポートをお試しください。

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