プロトタイプでアニメーションGIFを使用する
GIFをデザインファイルに追加して、プレゼンテーションビューで表示します。これにより、動画やアニメーションをシミュレーションすることができ、より動的なプロトタイプを作成できます。
ブラウザの制限により、画像の幅または高さは 4096ピクセルを超えることはできません。制限を超える画像は、これらの制限に収まるように縮小されます。
アニメーションGIFの追加
通常の静的な画像と同様に、アニメーションGIFを塗りとしてレイヤーに適用できます。これは、アニメーションGIFを、任意のベクターシェイプ(テキストレイヤーを含む)に適用することを意味します。 GIFは、次の複数の方法でデザインに追加できます。
- GIFをキャンバスにドラッグアンドドロップする
- ファイルブラウザを使用してファイルをインポートする
- [画像を配置]を使用して画像を一括でオブジェクトにインポートする
- 画像を塗りとしてアップロードする
- レイヤー間で画像の塗りをコピーアンドペーストする
ブラウザ内でWebサイトからアニメーション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は、静的な画像としてのみエクスポートできます。