プロトタイプでアニメーションGIFを使用する

この機能を使用できるユーザー

すべての有料プランでサポートされます。

編集可アクセス権のあるユーザーは、GIFをFigmaデザインファイルに追加できます。

GIFをデザインファイルに追加して、プレゼンテーションビューで表示します。これにより、動画やアニメーションをシミュレーションすることができ、より動的なプロトタイプを作成できます。

ブラウザの制限により、画像の幅または高さは 4096ピクセルを超えることはできません。制限を超える画像は、これらの制限に収まるように縮小されます。

アニメーションGIFの追加

通常の静的な画像と同様に、アニメーションGIFを塗りとしてレイヤーに適用できます。これは、アニメーションGIFを、任意のベクターシェイプ(テキストレイヤーを含む)に適用することを意味します。 GIFは、次の複数の方法でデザインに追加できます。

• GIFをキャンバスにドラッグアンドドロップする
• ファイルブラウザを使用してファイルをインポートする
• [画像を配置]を使用して画像を一括でオブジェクトにインポートする
• 画像を塗りとしてアップロードする
• レイヤー間で画像の塗りをコピーアンドペーストする

アニメーションGIFの表示

アニメーションGIFは、プレゼンテーションビューでのみ再生されます。アニメーションGIFファイルをエディターで表示する場合は、静的画像として表示されます。

GIFは、次の場所にあるGIFラベルで識別します。

• 右サイドバーの[塗り]セクション
• [塗り]モーダル
• [レイヤー]パネル
• キャンバス内の画像のサイズの隣り

GIFの操作または編集

静的な画像と同様に、GIFの複数の側面を操作できます。次の操作が可能です。

• GIFの拡大縮小、回転、サイズの調整
• GIFの不透明度、塗りモード、回転の調整
• ブレンドモードの適用、またはブレンドモードとの組み合わせ
• GIFを使用したスタイルとコンポーネントの作成
• マスクを適用してGIFの一部のみを表示
• スクロールオーバーフロー設定のGIFへの適用
• プロトタイプでのGIFを使用したオーバーレイの作成

他にも、GIFには次のオプションがあります。

• Figmaモバイルアプリでの画像とアニメーションGIFの表示
• フレーム遅延やループ回数などのメタデータの保持とエクスポート
• キャンバスに表示するGIFのフレームを選択

アニメーションGIFで実行できない操作がいくつかあります。次の操作は実行できません。

• 画像の調整をGIFに適用します。代わりに、塗りをレイヤー化して、ブレンドモードを使用することをお勧めします。
• アニメーションGIFをキャンバス(エディター)で表示します。アニメーションGIFは、プレゼンテーションビューでのみ再生できます。
• FigmaからアニメーションGIFをエクスポートします。アニメーションGIFは、静的な画像としてのみエクスポートできます。