Figmaでデザインに画像を挿入・トリミングする方法

• レッスンの内容
• Figmaデザインに画像を挿入・配置する方法
• A）原寸大の画像を読み込み、配置する
• B）シェイプがある場所に画像を配置する
• Figmaにおける画像ファイルの扱い
• Figmaで画像を切り抜く方法
• 1.トリミングする
• 2.マスクする
• トリミングとマスクの違い
• 最後に

レッスンの内容

Figmaでの画像の挿入方法や、トリミング・マスクについて学びます。

前回までで作ったカードデザインの長方形シェイプと円シェイプ部分に画像を入れ、完成させましょう！

Figmaデザインに画像を挿入・配置する方法

Figmaのデザインファイルに、画像ファイルを配置する方法を見ていきましょう。
画像をどこに・どのように配置したいかで、方法が少し変わってきます。

• A）原寸大の画像を、新しいレイヤーとして読み込む
• B）シェイプがある場所に画像を配置する

A）原寸大の画像を読み込み、配置する

画像ファイルの大きさそのまま、とりあえずキャンバス上にポンと置きたい場合は、以下の方法で配置します。
どちらも結果は同じになるので、やりやすい方でOKです。

1. 自分のパソコンから、デザインファイル上にドラッグアンドドロップする
2. ツールバーから[ 画像/動画を配置... ]を選び、キャンバスをクリック

女性の写真を使ってやってみましょう。

方法1：ドラッグ・アンド・ドロップで画像配置

方法2：シェイプツール内にある画像/動画を配置...を使う

B）シェイプがある場所に画像を配置する

あらかじめ「ここに画像をいれる」とシェイプで範囲を作っている場合は、そのシェイプを画像に変えることもできます。
以下２つの方法が使えます。

1. ツールバーから[ 画像/動画を配置... ]を選び、シェイプをクリック
2. シェイプの“塗り”から、画像を選択する

猫の写真を、カード上部の長方形に入れてみましょう。

方法1：画像/動画を配置...から、既存のシェイプをクリックする

方法2：シェイプの“塗り”から画像を選択する

Figmaにおける画像ファイルの扱い

Figmaでは、画像はすべて“シェイプの塗り”という扱いになっています。
既存のシェイプにではなく、キャンバス上にダイレクトに配置した画像でも、それは変わりません。
画像ファイルのサイズと同じ長方形シェイプを作成して、それを画像で塗りつぶした...という設定になっています。

画像を削除したい場合は、シェイプごと削除するか、塗りの設定を“単色”などに切り替えます。
大きさを指定するシェイプがある場合は、塗りを単色に戻す方が良いですね。

塗り > 画像の下では、画像をどう使ってシェイプを塗りつぶすか（シェイプに画像をどうはめ込むか）と、画像の簡単な補正ができます。

画像でシェイプを塗りつぶす方法として、選べる方法は以下の4つ。

拡大、サイズに合わせる、リピートはCSSで以下のプロパティが適用されると考えると分かりやすいです。

• 拡大：object-fit: cover; もしくは background-size: cover;
• サイズに合わせる：object-fit: contain; もしくは background-size: contain;
• リピート：background-repeat: repeat;

トリミングは、シェイプ自体の大きさを好きに変えて、画像の表示範囲を設定することが出来ます。
下の“Figmaで画像を切り抜く方法”で紹介しますが、自由度は４つの中で最も高いです。

ひとまずカード上部、猫の画像は“拡大”で良さそうです。

用意した画像によっては、拡大・サイズに合わせるなどのシンプルな設定では足りない、見せたい部分が入れにくい場合もあります。
その場合は、以下のトリミングやマスク機能を使って設定して下さい。

Figmaで画像を切り抜く方法

1.トリミングする

塗りの詳細から“トリミング”を選ぶと、画像のトリミングができます。

拡大やサイズに合わせるは、元画像のアスペクト比を維持した設定です。
余分な部分を切りたい、画像内のこのポイントだけ使いたい、なんて場面ではトリミングが役立つでしょう。

トリミングの際に表示される、青いフレームはシェイプのサイズ。
灰色の線が、元画像の大きさです。

青いフレームを動かすと、画像の表示サイズ（シェイプの大きさ）自体が変わる点にだけ注意して下さい。

カード右下の円シェイプの塗りに画像を指定し、顔がうまく入るようにすることもできます。

2.マスクする

マスクは、指定したオブジェクトを使って画像を切り抜いたように見せる機能です。
先程と同じく、カード右下、投稿者の画像部分を設定してみましょう。

女性の画像を縮小。
表示したい範囲（円シェイプ）の上に画像を重ねます。

レイヤーパネルで画像シェイプと、円シェイプを両方選択。
右クリックメニューから[ マスクとして使用 ]を選択、もしくはショートカットキーでマスクしてください。

Mask groupが設定され、円シェイプの部分にだけ画像が表示されます。

レイヤーパネルで画像を選択すれば、位置や大きさの調整が可能です。

トリミングとマスクの違い

トリミングとマスクは、どちらもキャンバス上の表示には違いありません。

2つの大きな違いは、画像の書き出しを行う時に

Figmaではレイヤーを選択した状態で、右サイドバー最下部の「エクスポート」を追加すると画像を書き出せます。

● トリミングの場合

トリミング、円シェイプの塗りに女性の写真を配置した場合が以下です。

円の外側は透過状態、円形に切り抜いた状態そのままで書き出される形です。

● マスクの場合

次に、マスクしたMask groupを選択してみます。
トリミングと同じく、円の外側は透過状態にした画像の書き出しができますね。

加えて、マスク（Mask group）下には、画像とシェイプが個別に存在しています。
画像だけを選択して、マスクされていない状態での書き出しが出来る、というのがトリミングとの大きな違いです。

円く表示するはCSSで良い（画像自体は四角で良い）場合は、こちらの方が扱いやすいですね。
Figmaのデザイン制作はCSSに準じる部分が多いので、どちらを使うか迷った時はコーディング方法から考えると良いでしょう。

最後に

ここまでで、カードデザインのレイアウトができました。
必要に応じて、レイヤー名を分かりやすく変えておくと尚可、というところでしょうか。

ここまでで、Figmaでのデザイン制作時に、ほぼ必ず使う操作は一通り試してみました。
次回は、作成したデザインを使い回すのに便利な「コンポーネント化」について解説します。