画像や動画をアップロードして、写真、スクリーンショット、およびその他のビジュアルアセットをデザインに組み込むことができます。
Figmaは以下のファイルタイプをサポートします。
- 画像: JPG、PNG、HEIC、WebP、GIF、TIFF (Safariのみ)
- 動画: MP4、MOV、WebM
注: SVGファイルをFigmaにインポートすると、SVGは画像として扱われなくなります。その代わり、編集可能なベクターレイヤーに変換されます。ベクターレイヤーの編集について詳しく見る。
Figmaには画像や動画用の特定のレイヤータイプはありません。その代わり、これらのアセットは塗りとして扱われます。これにより、シェイプ、フレーム、テキストレイヤー、ベクターネットワークを含む任意のレイヤータイプにアセットを追加できます。塗りを使用する方法について詳しく見る。
アセットを直接キャンバスにアップロードすると、Figmaは塗りとして設定されたアセットを持つ長方形のレイヤーを作成します。左サイドバーのレイヤーパネルに表示される画像または動画/GIFアイコンによってアセットタイプを識別できます。
アセットサイズの制限
アップロードするアセットが4096x4096ピクセルを超える場合、Figmaはアセットの最長のサイズが4096ピクセル以下になるように自動的に比例縮小します。アセットは、ファイルにアップロードされた後でサイズ変更することができます。このサイズ変更プロセス中に一部のファイルメタデータが失われる可能性があることに注意してください。
画像や動画をアップロード
画像や動画をFigmaにアップロードするには、次のような方法があります。
- カラーピッカーを使用して画像/動画をアップロード
- 画像や動画をまとめてアップロード
- ファイルブラウザへ画像をインポート
- クリップボードに画像/動画をコピーして貼り付け
- お使いのコンピューターから画像/動画をキャンバスにドラッグアンドドロップ
注意: 画像の読み込みに問題がある場合、画像読み込みに関するよくある問題のトラブルシューティング方法を確認してください。
カラーピッカーを使用して画像や動画をアップロード
カラーピッカーを使って画像や動画をレイヤーの塗りとしてアップロードできます。
- キャンバス上のレイヤーを選択します。
- 右サイドバーの[塗り]または[線]セクションでスウォッチをクリックしてカラーピッカーを開きます。
- 塗りのオプションから、画像または動画を選択します。画像が選択されるまで、レイヤーの塗りに灰色と白のチェッカーのビジュアルプレースホルダーが適用されます。
- [コンピューターからアップロード]をクリックして既存の画像をアップロードするか、[画像を作成]をクリックして、Figma AIを使用して画像を作成します。
画像と動画をまとめてアップロード
[画像/動画を配置]を使用すると、一度に複数のアセットをインポートできます。インポート後、各アセットを配置する場所を選択できます。Figmaは画像と動画を塗りとして扱うため、既存のオブジェクトに加えることもできます。
- ツールバーのシェイプツールメニューから画像/動画を選択するか、次のキーボードショートカットを使用します。
- Mac: Shift Command K
- Windows: Shift Ctrl K
- アップロードしたい画像または動画ファイルを選択し、[開く]をクリックします。カーソルには配置が必要なアセット数を示すバッジが表示されます。
- 次のいずれかの操作を行います。
- キャンバスをクリックして、新しいレイヤーに元のサイズで画像または動画を配置する
- キャンバス上の既存のオブジェクトを選択して、そのオブジェクトの塗りを画像や動画に置き換える
- [すべて配置]をクリックして、すべてのアセットをキャンバス上の単一の場所に追加する
- 残りのアセットに対してプロセスを繰り返します。残りの画像や動画を削除するには、キーボードのDeleteを押します。
画像および動画の塗りを置き換える
画像/動画の塗りをいつでも変更できます。変更しても、トリミングや配置を含め、適用した塗りモードの設定は保持されます。
これを行うには、以下のような方法があります。
- ファイルをカラーピッカーのアセットプレビューにドラッグする
- ファイルを右サイドバーの[塗り]または[線]セクションのスウォッチにドラッグする
画像の編集
アップロード後、画像のプロパティを使用してデザインでの表示方法を調整できます。Figma AIを使用して、画像の拡張や背景の削除などの操作を行うこともできます。