Figma で画像を切り抜き・トリミングする方法 — Crop モードとマスクの使い分け

「画像を四角く切り抜きたいだけなのに、やり方が見つからない」「円形に切り抜きたい」「フレームから画像がはみ出して困る」— Figma の画像の切り抜き・トリミングでつまずく原因は、たいてい同じです。Figma には Photoshop のような独立した「トリミングツール」がツールバーにありません。切り抜きは画像そのものに組み込まれていて（画像をダブルクリックして Crop モードに入る）、まず「Figma では切り抜きを 2 つの仕組みで実現する」ことを知ると、一気に理解が早まります。

本記事では、四角く切る Crop モード → 円や任意の形で切り抜くマスク → はみ出しを隠す Clip content → 背景の切り抜き（透過） までを、やりたいことの順に整理します。最後に、Adobe XD から移行した画像でマスクが崩れる問題への対処法もまとめました。

「トリミングツール」を探している方へ

Figma には Photoshop のような独立したトリミングツール（ツールバーのボタン）はありません。代わりに、四角い切り抜きは画像をダブルクリックして入る Crop モード、円や星などの形で切り抜くなら マスク（丸くするだけなら角丸でも代用できます）、フレームのはみ出しを隠すだけなら Clip content を使います。やりたいことに応じてこの 3 つを選ぶ、と覚えておけば十分です。

この記事で得られること

  • Crop・マスク・Clip content の違いと、自分のケースに合う選び方
  • 画像を四角くトリミングする Crop モードの具体的手順
  • 円・図形・任意のパスで切り抜くマスクの作り方と解除方法
  • 背景の切り抜き（透過）にプラグインが必要な理由
  • XD → Figma 移行で画像のマスクが崩れる原因と防ぎ方

🗺️ Crop とマスク、どちらを使う？ — 用途別 4 パターン

Figma の切り抜きは、やりたいことで使う機能が変わります。まず全体像を押さえましょう。

やりたいこと使う機能切り抜ける形
画像を四角く切るCrop モード長方形のみ（縦横比は自由）
円・星・任意の形で切るマスクどんな図形・パスでも可
はみ出した部分を隠すClip contentフレーム / コンポーネントの枠
背景を消して透過にするプラグイン（後述）被写体の輪郭

ポイントは、Crop は「画像そのものの表示範囲を変える」、マスクは「上に乗せた形で覗き窓を作る」という考え方の違いです。四角でよければ Crop が最短、それ以外の形が欲しければマスク、と覚えておけば選択に迷いません。

円・楕円だけは例外 — マスク以外に 2 つ近道がある

「四角以外はマスク」が基本ですが、円と楕円は例外です。公式ヘルプは画像を円・楕円に切り抜く方法として、① レイヤーの角丸（corner radius）を上げる ② 画像をレイヤーの塗りとして使う ③ マスクを作る の 3 つを挙げています1。プロフィールアイコンのように正方形の画像を丸くしたいだけなら ①（角丸を最大まで上げる）が圧倒的に速く、レイヤーも増えません。マスクが要るのは、星型やロゴの輪郭のように角丸では表せない形のときです。

✂️ 画像をトリミングする — Crop モードの 4 ステップ

四角く切り抜くだけなら、Crop モードが最も手軽な方法です。元の画像データは保持されるので、あとからいくらでもやり直せます。

  1. 画像を選択する。 キャンバスに配置した画像レイヤーをクリックします。
  2. Crop モードに入る。 入口は 3 つあり、公式ヘルプはいずれも同等に案内しています1。画像をダブルクリックする / 右パネルの Image セクションにある Crop image ボタンを押す / 右パネルの塗り（Fill）または線（Stroke）のスウォッチを開いて表示モードを Crop に変える、のどれでも構いません。ハンドル付きの枠が現れます。
  3. 範囲を決める。 青いハンドルをドラッグするのが基本ですが、公式ヘルプはあわせて スライダーで切り抜き量を指定する・Aspect ratio ピッカーで縦横比を選ぶ・Resize to fit で枠に合わせ直すの 3 つも挙げています1。内側で画像をドラッグすれば、枠の中で位置を動かせます。
  4. 確定する。 枠の外をクリックするか Enter で確定します。切り抜いた後も、もう一度 Crop に入れば範囲を調整できます。

Crop は「破壊しない」切り抜き

Crop モードで切り抜いても、はみ出した部分のピクセルが削除されるわけではありません。表示範囲を絞っているだけなので、後から枠を広げれば隠れていた部分が戻ります。「切り抜きすぎても元に戻せる」のが Crop の安心なところです。書き出し（Export）すると、その時点の表示範囲だけが画像として出力されます。

修飾キーを覚えておくと Crop はぐっと速くなります。公式ヘルプが挙げているのは次の 3 つです1。

  • 縦横比を崩す: Control（Windows）/ Fn（macOS）を押しながらドラッグ。既定では縦横比が保たれるため、自由な比率にしたいときはこれが必要です
  • 対辺も同時に動かす: Option（macOS）/ Alt（Windows）を押しながらドラッグすると、反対側の辺も一緒に動きます
  • Crop モードに入らず切り抜く: ⌘ Command（macOS）/ Ctrl（Windows）を押しながら画像のコーナーをドラッグします

切り抜いたあとの画像は、枠の中で位置を動かす・回転する・サイズを変えることもできます。回転は画像の外側のコーナーにカーソルを合わせてドラッグし、Shift を押せば 15° 刻みになります1。バナーやサムネイルなど、決まったサイズに合わせて中身だけ動かしたいケースで便利です。

⭕ 任意の形で切り抜く — マスクの 3 ステップ（円・図形）

円形のアイコン、星型の切り抜き、ロゴの形に沿った切り抜き — 四角以外の形で切りたいときはマスクを使います。マスクは「下に置いた形の範囲だけ、上の画像を見せる」仕組みです。Illustrator や XD で言うクリッピングマスクにあたる操作で、Figma では単に「マスク」と呼びます。なお公式ヘルプは、マスクにできるのが図形だけではないと明記しています。ベクターシェイプ・テキストレイヤー・透過情報（アルファチャンネル）を持つ画像・グループなど、どのレイヤーでもマスクとして使えます2。またマスクには アルファ / ベクター / ルミナンス の 3 種類があり、既定はアルファです2。種類ごとの違いと使い分けは Figma でマスクをかける方法 に詳しくまとめています。

  1. 切り抜きたい形を用意する。 楕円ツール（O）で円を描く、長方形・多角形・自由なパスなど、切り抜き後の輪郭になる図形を作ります。
  2. 形を画像の下に置く。 レイヤーの並び順で、マスクにする図形を画像の下に配置します（マスクは選択範囲の一番下のレイヤーが担当します）。
  3. 両方を選択してマスクを適用する。 図形と画像を選択し、右クリック →「マスクとして使用」（Use as mask）を選ぶか、右サイドバーの More options（⋯）→ Use as mask、ショートカット Ctrl + Alt + M（Windows）/ ⌃ + ⌘ + M（macOS）で適用します2。
  4. 図形の形に沿って画像が切り抜かれ、レイヤーがマスクグループにまとまります。

円形に切り抜く最短手順

プロフィール画像などを丸く切り抜くなら、楕円ツールで Shift を押しながら正円を描き → 画像の下に置いて → 両方選択してマスク、が定番です。マスク適用後も円のサイズ・位置を動かせば、切り抜き範囲をそのまま調整できます。

マスクにした図形は、適用後もダブルクリックで中に入れば編集できます。円を楕円に変えれば切り抜きも楕円になり、画像側を動かせば「窓の中で被写体を動かす」操作になります。Crop と違ってどんな複雑な形でも切り抜けるのがマスクの強みです。

🔓 マスクを解除・編集する 3 つの操作

マスクは後からいつでも外せます。やり直したいとき、別の形に変えたいときは次のように操作します。

  • 解除する: マスクグループを選択し、右クリック →「マスクを削除（Remove mask）」を選ぶと、マスクが解除されて画像と図形が元の重なりに戻ります。右サイドバーのマスクアイコン、または適用時と同じショートカットでも解除できます。
  • 形を変える: マスク図形をダブルクリックで選択し、サイズ・形・位置を編集すると、切り抜き範囲がリアルタイムで変わります。
  • 画像を差し替える: マスクグループ内の画像レイヤーを選択し、塗りの画像を入れ替えれば、同じ切り抜き形のまま中身だけ交換できます。

マスクが効かない / 効きすぎるとき

マスクを適用したのに画像が見えなくなったり、意図しない範囲が隠れる場合、レイヤーの重なり順が原因のことがほとんどです。マスクは「選択範囲の一番下のレイヤー」が担当します。マスクにしたい図形が画像より上にあると、画像側がマスクとして扱われて結果が反転します。順序を入れ替えてから適用し直してください。

逆に「関係ないレイヤーまでマスクされる」ときは、適用範囲のルールを知ると原因が見えます。公式ヘルプによれば、マスクは自分より上にあるすべての兄弟レイヤーに適用され、次のいずれかに達したところで止まります2 — 別のマスク（またはマスクグループ） / 親のフレームかグループ / Clip content が有効なフレームやコンポーネント。想定より広くかかってしまうときは、区切りになるフレームかグループを 1 つ挟むのが定石です。

🖼️ はみ出しを隠す — Clip content（クリッピング）

「切り抜く」というより「枠からはみ出した部分を表示しない」だけでよいなら、フレームの Clip content（コンテンツを切り抜く） が最も軽い方法です。マスクを作らなくても、フレームの境界で中身を自動的にクリッピングできます。

  1. 画像をフレーム（または Clip content を持つコンポーネント）の中に入れます。
  2. フレームを選択し、右パネルの Clip content にチェックを入れます。
  3. フレームの枠からはみ出した画像部分が非表示になります。フレームのサイズを変えれば、見える範囲もそれに追従します。

Clip content は、カードやサムネイル枠のように「決まった枠の中だけ見せたい」レイアウトで特に便利です。画像そのものは切り抜かず、枠の方で見える範囲を決めるため、レイアウトのサイズ変更に強いのが特徴です。マスクと違って任意の形にはできませんが、矩形のはみ出し制御ならこれが一番手軽です。

🪄 背景を切り抜く（透過）は Crop でもマスクでもない

ここでよくある誤解を 1 つ。「背景の切り抜き（被写体だけ残して背景を透過にする）」は、Crop でもマスクでもできません。Crop は長方形、マスクは自分で描いた図形の範囲でしか切れないため、被写体の輪郭を自動で検出する処理は守備範囲の外です。これには Figma AI の Remove background（画像を選んでセカンダリツールバーからクリック。公式が示す対象条件は有料プランで AI クレジットを消費します）3、または背景削除プラグイン・外部処理を使います。

背景削除（透過）の具体的な手順、プラグインと外部処理の使い分け、JPG の落とし穴は Figma で画像を背景透過する方法 に詳しくまとめています。被写体の形そのものを「枠」として使いたいだけなら、前述のマスクで近い表現ができる場合もあります。

🚀 XD のマスク・切り抜きを保ったまま Figma へ — Pixel Fine Converter

XD で作った画像のマスクや切り抜きを Figma の構造に変換。Free 版でご自身のファイルの再現度を確かめてから判断できます。

🔄 XD から移行した画像の切り抜き・マスク

Adobe XD から移行したファイルでは、画像の切り抜き・マスクにもう 1 点の注意が必要です。XD にもマスクの仕組みがあり、画像をシェイプで切り抜いたデザインは、Figma 側でもマスクとして対応する構造に変換される必要があります。

  • 単純な四角いトリミングは、Figma 側で Crop または枠のクリッピングに置き換えられれば見た目が保たれます。
  • シェイプマスク（円や任意の形での切り抜き）は、Figma のマスクグループとして再構成される必要があります。ここがずれると、切り抜き範囲が変わったり、マスクが外れて画像全体が出てしまうことがあります。

手作業で 1 枚ずつマスクを組み直すのは手間がかかるため、マスク構造ごと変換できる移行手段を選ぶのが安全です。Pixel Fine Converter は XD ファイルを直接読み込み、画像のマスク・切り抜きを Figma の構造に変換するため、移行後の再構築にかかる負担を大きく減らせます。移行の段取りをこれから決める段階なら、変換前の準備からアートボード・コンポーネントの扱いまでを通した XD → Figma 移行 実践ガイド を先に読むと、マスクの組み直しをどこで潰すかが決めやすくなります。図形やパスの変換の詳細は XD の図形を Figma に変換する にまとめています。

💬 よくある質問

Q: Figma で画像を四角くトリミングするには？

画像をダブルクリックして Crop モードに入り、ハンドルをドラッグして範囲を決めます。元の画像は保持されるので、後から枠を広げれば切り抜きすぎた部分も戻せます。

Q: 円形（丸）に切り抜きたいです。

正方形の画像を丸くしたいだけなら、レイヤーの角丸（corner radius）を最大まで上げるのが最短です。 公式ヘルプも円・楕円への切り抜き方法として、角丸を上げる / 画像をレイヤーの塗りとして使う / マスクを作る、の 3 つを挙げています1。角丸で表せない形が必要なときは、楕円ツールで Shift を押しながら正円を描き、画像の下に置いて、両方を選択してマスク（Ctrl/⌘ + Alt/⌥ + M）を適用します。

Q: マスクを解除するには？

マスクグループを選択し、右クリック →「マスクを削除（Remove mask）」を選びます。右サイドバーのマスクアイコンや適用時と同じショートカットでも解除できます。画像と図形が元の重なりに戻ります。

Q: 背景を切り抜いて透過にできますか？

Crop やマスクではできません（どちらも自分で指定した形でしか切れないため）。被写体の輪郭での背景透過は、Figma AI の Remove background3 か、背景削除プラグイン・外部処理を使います。

Q: フレームからはみ出した画像を隠したいだけです。

フレームを選択して Clip content にチェックを入れると、枠からはみ出した部分が非表示になります。マスクを作る必要はありません。

Q: 「クリップコンテンツ」とマスクは何が違いますか？

クリップコンテンツ（Clip content） はフレームやコンポーネントの枠からはみ出した部分を隠すだけの設定で、切り抜かれる形は必ず枠の四角形になります。一方、円や星、任意のパスなど特定の形で抜きたいときはマスク（クリッピングマスク） を使います。「レイアウトの枠内に画像を収めたい」ならクリップコンテンツ、「決まった形に切り抜きたい」ならマスク、と切り分けると迷いません。

Q: XD で切り抜いた画像が、Figma 移行後に崩れました。

XD のシェイプマスクが Figma のマスク構造に正しく変換されていないためです。マスク構造ごと変換できる移行特化のコンバーターを使うか、移行後にマスクを組み直してください。

🎯 まとめ

Figma の切り抜きは「トリミングツール」を探すのをやめて、目的別に 3 つを使い分けるのがコツです。本記事の要点は次の 4 つです。

#やりたいこと使う機能
1四角くトリミングCrop モード（ダブルクリック → ハンドル、元画像は保持）
2円・任意の形で切り抜き円なら角丸を最大に。それ以外はマスク（形を下に置く → 選択 → マスクとして使用）
3はみ出しを隠すフレームの Clip content（クリッピング）
4背景を透過にCrop / マスクでは不可 — Figma AI の Remove background or 背景削除プラグイン or 外部処理

四角なら Crop、丸なら角丸、そのほかの形が要るならマスク、枠で隠すだけなら Clip content。この対応さえ頭に入れば、Figma の切り抜きで迷いにくくなります。そしてファイルのベースが Adobe XD で作成されたものなら、マスク構造を保ったまま移行することが、切り抜きの組み直しを避けるいちばんの近道です。

🚀 Pixel Fine Converter を Figma Community からインストール

Figma Communityから1クリックで追加できます

なお本記事のうち Figma の仕様に関する記述は公式ドキュメントを出典として明記しています（下記）。Pixel Fine Converter のマスク・切り抜き変換に関する記述は、いずれも自社のソースコードと実機検証にもとづく一次情報です。

出典

  1. Crop an image — Crop モードへの 3 つの入口（ダブルクリック / Image セクションの Crop image / Fill・Stroke の表示モード）、スライダー・Aspect ratio ピッカー・Resize to fit、Control/Fn・Option/Alt・⌘/Ctrl の修飾キー、切り抜き後の移動・回転（Shift で 15° 刻み）・リサイズ、円や楕円に切り抜く 3 つの方法（2026-08-20 確認） ↩ ↩2 ↩3 ↩4 ↩5 ↩6

  2. Masks — どのレイヤーでもマスクにできること（ベクターシェイプ / テキスト / 透過画像 / グループ）、アルファ・ベクター・ルミナンスの 3 種類、マスクが上の兄弟レイヤーに適用され別のマスク・親フレーム・Clip content 有効フレームで止まること、Use as mask の経路とショートカット（2026-08-20 確認） ↩ ↩2 ↩3 ↩4

  3. Make or edit an image with AI — Figma AI の Remove background（画像を選択 → セカンダリツールバー）と、対象条件が有料プラン・編集権限ありで AI クレジットを消費すること（2026-08-20 確認） ↩ ↩2

関連ページ