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 とマスク、どちらを使う？

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

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

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

✂️ 画像をトリミングする — Crop モード

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

画像を選択する。 キャンバスに配置した画像レイヤーをクリックします。
Crop モードに入る。 画像をダブルクリックするか、右パネルの塗り（Fill）にある画像の表示モードから Crop を選びます。ハンドル付きの枠が現れます。
枠をドラッグして範囲を決める。 外側のハンドルをドラッグすると表示範囲（切り抜く枠）が変わり、内側で画像をドラッグすると枠の中で画像の位置を動かせます。
確定する。 枠の外をクリックするか Enter で確定します。切り抜いた後も、もう一度 Crop に入れば範囲を調整できます。

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

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

Crop 枠の縦横比を変えたいときは、Control（Windows）/ Fn（macOS）を押しながらドラッグします（Shift は Crop 中は 15° 単位の回転になります）。バナーやサムネイルなど、決まったサイズに合わせて中身だけ動かしたいケースで便利です。

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

円形のアイコン、星型の切り抜き、ロゴの形に沿った切り抜き — 四角以外の形で切りたいときはマスクを使います。マスクは「下に置いた形の範囲だけ、上の画像を見せる」仕組みです。Illustrator や XD で言うクリッピングマスクにあたる操作で、Figma では単に「マスク」と呼びます。

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

円形に切り抜く最短手順

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

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

🔓 マスクを解除・編集する

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

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

マスクが効かない / 全部消えたとき

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

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

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

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

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

🪄 背景を切り抜く（透過）にはプラグインが要る

ここでよくある誤解を 1 つ。「背景の切り抜き（被写体だけ残して背景を透過にする）」は、Crop でもマスクでも、Figma の標準機能だけではできません。Crop は長方形、マスクは自分で描いた図形の範囲でしか切れないため、被写体の輪郭を自動で検出して背景を消す処理は対象外です。これには AI で被写体を検出する背景削除プラグインを使うか、外部で透過 PNG を作って配置します。

背景削除（透過）の具体的な手順、プラグインと外部処理の使い分け、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: 円形（丸）に切り抜きたいです。

楕円ツールで Shift を押しながら正円を描き、画像の下に置いて、両方を選択してマスク（Ctrl/⌘ + Alt/⌥ + M）を適用します。Crop は四角しかできないため、円や任意の形はマスクを使います。

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

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

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

Figma の標準機能（Crop / マスク）だけではできません。被写体の輪郭での背景透過は、背景削除プラグインを使うか、外部で透過 PNG を作って配置します。

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

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

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

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

🎯 まとめ

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

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

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

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

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