デザインファイルへの画像の追加
この機能を使用できるユーザー
すべてのチームまたはプランでサポートされます
デザインファイルの編集可アクセス権限があるユーザーは、画像を追加またはインポートできます。
Figmaでサポートされている画像形式は、PNG、JPEG、HEIC、GIF、およびWEBPです。
写真、スクリーンショット、その他のビジュアルアセットをデザインに組み込むには、画像をデザインファイルに追加します。Figmaでサポートされている画像形式は、PNG、JPEG、HEIC、GIF、およびWEBPです。
Figmaには、画像用の特定のレイヤータイプはありません。画像は塗りのタイプです。このため、画像を任意のシェイプやベクターネットワークに追加できます。
右サイドバーの[塗り]セクションで画像の塗りを表示および更新します。スウォッチに画像のサムネイルが表示され、Image
ラベルが表示されます。
左サイドバーの[レイヤー]パネルで、画像の塗りのレイヤーを識別することもできます。
- キャンバスに画像を直接追加すると、元のファイルの寸法の長方形がキャンバス上に作成され、画像アイコンと
Image
ラベルが表示されます。 - 既存のオブジェクトに画像を追加すると、元のレイヤーのレイヤーアイコンと説明が使用されます。
メモ: Figmaでは、幅または高さが4096ピクセルを超える画像は縮小されます。画像の元の寸法の縦横比を維持したまま縮小されるため、最も長い辺は4096ピクセルより小さくなります。
Figmaで画像をファイルに追加する前に、場合によっては画像をデコードおよび変換する必要があります。このため、Figmaでファイルのすべてのメタデータが保持されることは保証されません。
ファイルへの画像の追加
画像は塗りであるため、任意のベクターまたはシェイプに追加できます。このためより柔軟かつ詳細にコントロールできます。画像をデザインファイルに追加するには、さまざまな方法があります。
-
A コンピューターからキャンバスに画像ファイルをドラッグ&ドロップします。Figmaでは画像の寸法で新しい長方形が作成され、画像が塗りとして適用されます。
-
B 画像ファイルをファイルブラウザにインポートします。プロジェクト内に新しいデザインファイルが作成され、画像が長方形として追加されます。
-
C 配置機能を使って複数の画像をデザインに一括で追加します。画像を追加するレイヤーを選択します。画像の一括配置 →
-
D 色選択機能から画像インポーターを使用します。画像の塗りのアップロード →
-
E 現在のファイルの別のレイヤー、または別のファイルから画像をコピーします。レイヤー間での画像のコピーおよび貼り付け →
-
F クリップボードにある画像をキャンバスに貼り付けます。画像はダウンロードまたはアップロードせずにWebからコピーできます。キャンバスでの画像の貼り付け →
アニメーションGIFをプロトタイプに追加することもできます。プレゼンテーションビューでデザインとプロトタイプを表示する場合にのみ、GIFが再生されます。 プロトタイプへのアニメーションGIFの追加 →
画像の編集
さまざまな方法で画像を編集または調整できます。
- 画像を含むレイヤーを拡大縮小、回転、または寸法を調整する
- レイヤーに適用されている画像をトリミングして位置を変更する
- 画像のオプション(塗りモード、回転、ブレンドモードなど)を調整する
- スタイルとコンポーネントに画像を組み込む
- マスクを適用して画像の一部のみを表示する
- 画像を調整する(色相、彩度、コントラストの変更など)
画像の読み込みで問題が発生していますか? よくある画像の読み込みの問題のトラブルシューティング →