Figmaで画像を挿入する方法
Figmaで画像を挿入してみましょう。
今回は、長方形シェイプと円シェイプに画像を配置し、Figmaでの画像操作の基本を学びます。
1. Figmaデザインに画像を挿入する基本方法
Figmaに画像を挿入するには、目的に応じて方法を使い分けることが大切です。
大きく分けて以下の2パターンがあります。
A）画像を原寸サイズで挿入する
「とりあえず画像をキャンバスに置きたい」という場合におすすめの方法です。
方法は2通りあり、結果はどちらも同じです。
方法1：ドラッグ＆ドロップ
-
パソコンからFigmaのキャンバスへ直接画像ファイルをドラッグ＆ドロップ
方法2：メニューから挿入
-
ツールバーの「画像/動画を配置…」を選択し、キャンバス上をクリック
🖼 例：女性の写真をキャンバスに配置してみましょう。
B）シェイプに画像を挿入する
あらかじめ作成しておいたシェイプ（図形）に画像を当てはめたい場合はこちらの方法が便利です。
シェイプ内に画像をトリミングして表示する形になります。
方法1：画像/動画を配置… を使用
-
ツールバーから「画像/動画を配置…」を選び、シェイプ部分をクリック
方法2：塗り（Fill）から画像を選択
-
シェイプを選択
-
右側のプロパティパネル内「Fill（塗り）」をクリック
-
「Image」を選択して画像を読み込む
🐱 例：猫の写真をカード上部の長方形に入れてみましょう。
Figmaにおける画像ファイルの扱い方｜塗り・配置・トリミングの基本
Figmaでは、画像は“シェイプの塗り（Fill）”として扱われます。
キャンバスに直接画像を配置したように見える場合でも、実際には「画像サイズと同じ大きさのシェイプに画像が塗り込まれている」状態です。
画像の削除方法
画像を削除したいときは、次のいずれかの方法を使います。
-
シェイプごと削除する
-
「塗り」設定を画像から単色などに変更する
※レイアウトを維持したい場合は、「塗り」の変更がおすすめです。
画像の塗り設定と調整方法
シェイプに画像を塗り込んだ際は、画像の配置方法や補正設定が選べます。
右側パネルの「Fill（塗り）」→「Image」内で以下の4つのモードを選択できます。
選べる表示モード
| 表示モード | Figmaの名称 | CSS対応イメージ | 説明 |
|---|---|---|---|
| 拡大 | Fill | object-fit: cover / background-size: cover |
画像をシェイプいっぱいに拡大して塗りつぶす（はみ出しも可） |
| サイズに合わせる | Fit | object-fit: contain / background-size: contain |
画像を縮小または拡大して、シェイプ内に収める |
| リピート | Tile | background-repeat: repeat |
画像を繰り返してパターンとして敷き詰める |
| ストレッチ | Stretch | – | シェイプの比率に合わせて画像を強制的に引き伸ばす（歪みあり） |
🐱 例：カード上部の猫の画像には「拡大（Fill）」が見栄えよく表示できます。
トリミングの自由度が最も高い方法：シェイプサイズで調整
画像の表示位置をもっと細かく調整したいときは、シェイプのサイズを変えることでトリミングが可能です。
特定の箇所だけ見せたい場合に非常に便利です。
この操作は、Figma内の「マスク」機能と組み合わせることで、より自由度の高い切り抜きが可能になります。
マスクについては次のセクションで詳しく解説します。
Figmaでのトリミング・マスクの使い分け
Figmaで画像の一部だけを表示したい場合、「トリミング」と「マスク」の2つの方法があります。
ここでは、それぞれの使い方と違いをわかりやすく解説します。
方法①：トリミングで切り抜く
Figmaの「塗り（Fill）」設定で**トリミング（Crop）**を選ぶことで、画像の一部分だけを表示することができます。
これは、画像の一部だけを見せたいときや、不要な余白をカットしたいときに便利です。
【操作手順】
-
シェイプを選択し、右側の「Fill」から画像を設定
-
「Fill」の詳細設定を開き、「Crop（トリミング）」を選択
-
画像内の必要な範囲を青いフレームで調整
🔷 青いフレーム：シェイプの表示領域（＝画像が見えるサイズ）
🔘 灰色のフレーム：元の画像サイズ
🐱 例：カード右下の円シェイプに猫の顔をうまく収めたい場合、Cropで表示範囲を調整できます。
⚠️注意：青いフレームを拡大・縮小すると、シェイプのサイズ自体も変化します。
方法②：マスクで切り抜く
マスクは、指定した図形の形に画像を切り抜いて見せる機能です。
見た目は完全に画像がその形にトリミングされたように表示されますが、実際にはマスク内に画像全体が残っています。
【操作手順】
-
画像とシェイプ（切り抜きたい形）をそれぞれ用意
-
シェイプの上に画像を重ねて配置
-
両方のレイヤーを選択（レイヤーパネル or Shift＋クリック）
-
右クリックメニュー →「Use as Mask（マスクとして使用）」を選択
またはCtrl + Alt + M（Windows） /Cmd + Option + M（Mac）でマスク
👩 例：カード右下の円シェイプを使って、女性の写真の顔部分だけを表示しましょう。
-
マスクが適用されると「Mask Group」というグループが作成されます。
-
レイヤーパネルで画像レイヤーを選択すれば位置・サイズの調整が可能です。
トリミングとマスクの使い分けポイント
| 比較項目 | トリミング（Crop） | マスク（Mask） |
|---|---|---|
| 用途 | 画像の一部だけ表示したい | 特定の形に切り抜きたい |
| 対象 | シェイプの塗り（Fill） | 画像＋シェイプを重ねて使う |
| 自由度 | 〇（サイズ変更注意） | ◎（形状自由） |
| 実用例 | 四角形や円形の中に写真を表示 | アイコン・バナー・プロフィール画像など |
ここまででFigmaを使った画像挿入、トリミング、マスクの使い方についてご紹介してきました。
読んでくださった方にとって参考になれば幸いです。
