GIFワークスペースを開き、Create a GIF/MP4を選びます。エクスポート設定は、選択したフレームとプレビューの横に表示されます。GIF Editorでは、読み込んだファイル用のコントロールがエディターのワークスペースに表示されます。
動画チュートリアル:アニメーションGIFを作成する
この動画では、TinyImageプラグインを使って、自分のデザインからFigmaで直接GIFをアニメーション化してエクスポートする方法を紹介しています。
動画チュートリアル:FigmaでアニメーションGIFのエクスポートにトランジション効果を追加する
この動画では、TinyImageプラグインを使って、FigmaでアニメーションGIFのエクスポートにフェード、スライド、ワイプのトランジション効果を追加する方法を紹介しています。
サイズを設定する
初期設定では、GIFのサイズは最初のフレームと同じになります。widthとheightは手動で上書きできます。
倍率を設定する
scaleのドロップダウンを使うと、倍率を変えたサイズ(@2xや@0.5xなど)でエクスポートできます。
画像のフィットを選ぶ
次のいずれかを選びます。
- Cover Images
- Contain Images(初期設定)
背景色を設定する
HEXカラー値を使って、単色の背景を設定します。
入力フレームに透明部分が含まれていて、透明なGIFが必要な場合は、Transparent Backgroundを有効にしてください。
圧縮と画質を設定する
画質スライダー(1-100)で非可逆圧縮の度合いを調整します。
画質を落とさずにGIFを圧縮したい場合は、Losslessを有効にしてください。
目標ファイルサイズに合わせて最適化する
広告プラットフォーム、メールシステム、公開のワークフローでGIFのファイルサイズに厳密な上限がある場合は、Size Targetを有効にして、最大サイズをKBで入力します。TinyImageは非可逆の度合いを段階的に強めながら、256色、128色、64色、32色のパレットを試し、目標に収まる中で最も控えめな結果を使います。
Size Targetを有効にすると、TinyImageはこれらの設定を自動で調整するため、手動のQualityコントロールがKBの目標値に置き換わり、Losslessは非表示になります。同じ目標サイズは、Create a GIF/MP4、GIF Editor、Figma Motion Exportでも使えます。アニメーションGIFの出力にのみ適用され、APNG、アニメーションWebP、MP4、WebMには適用されません。
アニメーションによっては、サイズ、フレーム数、タイミングを変えないと、非常に小さい目標には届かない場合があります。試したどの設定でも上限に収まらない場合、TinyImageは見つかった中で最も小さい有効な結果をエクスポートします。アップロードする前に、最終的なファイルサイズを確認してください。
共通のカラーパレットを設定する
All frames have the same color paletteを有効にすると、1フレーム目のパレットをすべてのフレームで使います。
ノイズやバンディングを修正する必要がある場合にのみ使ってください。後のフレームで1フレーム目にない色が使われていると、色の問題が起こる場合があります。
画像のディザリングを選ぶ
Image Ditheringのドロップダウンから、ディザリングのアルゴリズムを選びます。