Figmaの画像トリミングは、塗りの画像モードを「トリミング」に切り替えるだけで、4ステップで完了します。マスクとの使い分けを含め、丸抜きから書き出しまでを一本の記事で解説します。
▶ 3日で初案件PR
この記事でわかること
トリミングとマスクの使い分けが3分の診断で確定できます。⌘/Controlキーを押しながらハンドルを操作するだけで、アスペクト比を崩さずトリミングできます。納品前の書き出し確認を含む3段階ワークフローで、確認作業が15分以内に完了します。
今の仕事について、一番近いものは？
この記事の結論
Figmaでの画像トリミングは「レイヤー選択→塗りの画像サムネイルをクリック→モードをトリミングに変更→ハンドルで調整」の4ステップで完了します。四角く切り抜くならトリミング機能、丸や任意形状に切り抜くならマスク機能が最適です。この使い分けを把握しておくと、操作に迷う時間がなくなり、納品前の仕上げ作業を大幅に短縮できます。
今日やるべき1つ
手元のFigmaファイルに画像を1枚置き、右サイドバーの「塗り」から画像サムネイルをクリックして「トリミング」モードに切り替える操作を1回試してください（5分）。
状況別ショートカット
| 状況 | 読むべきセクション | 所要時間 |
| 四角くトリミングしたい | Figmaトリミングは4ステップで操作完了 | 3分 |
| 丸や任意形状で切り抜きたい | マスクは形を自由に指定する切り抜き | 5分 |
| トリミングかマスクか迷っている | 用途で選ぶ3分診断 | 3分 |
| ショートカットで速く操作したい | トリミングを5つの仕組みで効率化 | 4分 |
| 背景だけ切り抜きたい | 背景切り抜きは3つの手順で対応 | 5分 |
| 納品前の書き出しまで終えたい | 納品ワークフローは3段階で完結 | 4分 |
Figmaトリミングは4ステップで操作完了
トリミングしたいのにどこを押せばいいか分からず、サイドバーを探し回った経験を持つ方は少なくありません。操作経路が独特なため、初回は迷いやすい設計になっています。一度覚えると2回目からは10秒以内に完了できます。
レイヤー選択は画像フレームを指定する
Figmaのキャンバス上で画像をクリックすると、通常はフレームレイヤーが選択された状態になります。右サイドバーの「塗り」セクションに画像サムネイルが表示されていれば、画像の塗りを持つレイヤーが正しく選択できています。
サムネイルが表示されず単色の塗りしか見えない場合は、グループやフレームの内側にある画像レイヤーをダブルクリックして入り直してください。レイヤー選択のミスがトリミングできない原因の大半を占めるため、まずこの確認を最初に行う習慣をつけることで、後続の操作が確実に進みます。
塗りの画像モードをトリミングに変更する
画像レイヤーが選択できたら、右サイドバーの「塗り」セクションにある画像サムネイルをクリックします。すると画像の詳細設定パネルが開き、上部に「フィット」「フィル」「クロップ（トリミング）」「タイル」の4つのモードが表示されます。
この中から「クロップ」または日本語UIの「トリミング」を選択します。Figma公式ヘルプ「画像のトリミング」では手順が公開されており、「フィット」（画像全体を収める）と「フィル」（フレームを塗りつぶす）はトリミングとは別の用途です。モード選択を誤ると画像が拡大・縮小されるだけでトリミングが効かないため、ここでの確認が操作成否を左右します。なお、画像トリミング無料サイトをFigmaと併用することで、素材準備から仕上げまでの作業効率がさらに向上します。
8つのハンドルで切り抜き範囲を調整する
トリミングモードに切り替えると、画像の四隅と各辺の中央に合計8個の青いハンドルが表示されます。ハンドルを内側にドラッグするとその方向から画像が隠れていき、切り抜き範囲が狭まります。
四隅のハンドルは2方向を同時に調整でき、辺の中央ハンドルは1方向のみです。画像の中央をドラッグするとフレーム内で画像の位置を移動できます。エッジのドラッグでは画像自体のサイズが変わり、角の外側にカーソルを持っていくと回転が可能になります。これらを組み合わせることで、見せたい部分を正確にフレームの中央に収められます。
Enterまたはクリックで確定して完了
目的の範囲に調整できたら、キーボードのReturn（Enter）またはキャンバスの何もない場所をクリックして確定します。Escキーを押すと操作をキャンセルして元の状態に戻ります。確定後も再び塗りの画像サムネイルをクリックすることで、いつでも再調整できます。
確定後に「やはり違う範囲にしたい」と感じた場合でも、操作をやり直す必要はありません。再調整は元の画像データを壊さずに何度でも行えるため、納品直前でも安心して修正できます。
CHECK
▶ 今すぐやること: 画像レイヤーを選択し、右サイドバーの「塗り」に画像サムネイルが表示されているか確認する（2分）
Q: 塗りに画像サムネイルが表示されません。なぜですか？
A： 画像レイヤーではなく、その外側のフレームやグループが選択されている状態です。対象の画像レイヤーをダブルクリックして入り直すか、レイヤーパネルで直接画像レイヤーをクリックして選択してください。
Q： トリミングモードに切り替えても画像が変わりません。
A: フレームのサイズと画像サイズが完全に一致している場合、ハンドルが重なって見えにくいことがあります。フレームを一時的に大きくするか、画像のスケールを変更してからハンドル操作を試してください。
マスクは形を自由に指定する切り抜き
「丸く切り抜きたい」「星形で切り抜きたい」という場合、トリミング機能では対応できません。そこで使うのがマスク機能です。
マスクは図形を重ねて切り抜く仕組み
マスクは「見せたい形の図形を画像の上に置き、その図形の形に沿って画像を見せる」仕組みです。まず画像レイヤーを配置します。その上にマスクとして使いたい形（円形・長方形・ペンツールで描いたパス等）を重ねます。2つのレイヤーを両方選択した状態で右クリックメニューから「マスクとして使用」を選ぶか、メニューバーのオブジェクト→「マスクとして使用」を実行します。
上のシェイプの形に沿って画像が切り抜かれた状態になります。マスクを解除したいときは、グループを右クリックして「マスクを解除」を選べば元の状態に戻せます（Figma公式ヘルプ「画像のトリミング」）。
丸抜きはEllipseツールで30秒で完成
プロフィール画像を円形に切り抜く場合は、楕円形ツール（Ellipse）を使います。ツールバーから「O」キーを押すと楕円形ツールに切り替わります。Shiftキーを押しながらドラッグすると正円が描けます。この正円を画像の上に重ね、「マスクとして使用」を実行するだけで丸抜きが完成します。
丸抜き完成後に円の位置を調整したい場合はマスクグループ内に入ってシェイプを動かします。画像自体の位置を動かしたい場合は画像レイヤーを選択してから移動します。この2層構造を把握しておくと、レイアウト調整で迷わなくなります。
マスクとトリミングを正しく使い分ける
トリミングは「フレームの四角い枠の中に収める範囲を決める」操作です。マスクは「任意の形に沿って画像を表示する」操作です。
バナーや記事内の画像など四角い表示エリアに収めるだけならトリミングが最速です。プロフィールアイコン・ロゴ・図形的なビジュアル表現など形状に意味がある場合はマスクを使います。機能の名前ではなく「最終的にどんな形で見せたいか」を起点に選ぶことが、操作ミスを防ぐ最短ルートです。画像の背景白にする方法と組み合わせると、被写体をより明確に見せるビジュアルを素早く仕上げられます。
CHECK
▶ 今すぐやること: Figmaで円形を1つ描き、画像の上に重ねてマスクとして使用する操作を試す（5分）
Q: マスクをかけたら画像が消えてしまいました。
A: シェイプが画像の下に配置されています。マスクは「上のレイヤーがマスク形状になる」ため、シェイプを画像レイヤーよりも上に配置し直してから再度「マスクとして使用」を実行してください。
Q： マスク後に画像の表示位置を動かしたいです。
A: マスクグループをダブルクリックして内部の画像レイヤーを選択すると、マスクの形を変えずに画像の表示位置だけを動かせます。シェイプレイヤーを選択すると切り抜き形状の位置が変わります。
用途で選ぶ3分診断
以下の診断で自分の操作方針を3分で確定できます。
Q1: 最終的な切り抜き形状は四角形（長方形）ですか？
Yesの場合はQ2へ進みます。Noの場合（丸・多角形・自由形状）はResult Cへ進みます。
Q2: 既存のフレームサイズに画像を収めるだけですか？
Yesの場合はResult Aへ進みます。Noの場合（特定の範囲だけ切り出したい）はQ3へ進みます。
Q3: 画像の比率を変えずに一部だけ見せたいですか？
Yesの場合はResult Bへ進みます。Noの場合（フレームを画像で塗りつぶしたい）はResult Dへ進みます。
Result A: トリミング（クロップ）を使う
右サイドバーの塗りから画像モードを「トリミング」に変更し、ハンドルで範囲を調整してください。最もシンプルな操作です。
Result B: トリミング＋位置調整を使う
トリミングモードに入った後、画像の中央をドラッグして見せたい部分をフレーム内に収めます。ハンドルで調整してから位置を微調整するのが最速の手順です。
Result C: マスクを使う
希望の形状を描いてから画像と重ねて「マスクとして使用」を実行します。丸・多角形・手書き形状すべてに対応しています。
Result D: フィルモードを使う
塗りの画像モードを「フィル」に変更すると、画像がフレーム全体を覆うように自動的に拡大縮小されます。トリミングは不要です。
CHECK
▶ 今すぐやること: 上記Q1に自分のケースを当てはめ、Result A〜Dのいずれかを確定する（3分）
Q: 診断でResult Cになりましたが、マスクをかける前に形状をどのツールで描けばいいですか？
A： 正円ならEllipseツール（Oキー）、正方形ならRectangleツール（Rキー）、自由形状ならPenツール（Pキー）を使います。形状の塗りの色は確定後に透明化されるため、何色でも問題ありません。
Q： Result Aのトリミングをした後、やはり形を丸にしたくなった場合はどうしますか？
A： トリミング操作で切り取った画像の上に円形シェイプを追加し、両方を選択してマスクをかける2段構成にすることが可能です。先にトリミングで不要な余白を除去してからマスクをかけると、ファイルが軽くなりレイアウト操作がしやすくなります。
PR提供: 日本デザインスクール（デザスク）
トリミングを5つの仕組みで効率化
ここからは知っているかどうかで作業速度が変わる操作を5つ紹介します。特に最初の2つは、Figmaを使いこんでいるフリーランスでも見落としがちな仕組みです。作業効率を上げる方法を組み合わせると、Figma操作全体のスループットをさらに改善できます。
ハック1: アスペクト比固定で比率崩れをゼロにする
【対象】: トリミング後に画像が歪んで見えてしまう経験がある方
【手順】: 画像を選択して塗りの画像サムネイルをクリックし、トリミングモードに切り替えます（30秒）。次に⌘（Mac）またはControl（Windows）を押しながら角のハンドルをドラッグします。比率が固定されたまま範囲が縮まることを確認し、EnterまたはReturnで確定します。
【コツと理由】: ⌘/Controlを押しながら操作することで現在のアスペクト比が維持されます。比率が崩れる根本的な原因は、ハンドルを角から縦横別々に動かしてしまうことです。修飾キーを押す習慣をつけることで、再調整のやり直しが発生しなくなります。フリーにサイズ変更したい場合は修飾キーを押さずにドラッグすれば、意図的に比率を変えることもできます。
【注意点】: ⌘/Controlは角のハンドルにのみ有効です。辺の中央ハンドルには効かないため、辺ハンドルでのアスペクト比固定操作は行えません。
ハック2: Option/Altキーで両側を同時にトリミングする
【対象】: 画像の中心を残したまま左右・上下を均等に切り詰めたい方
【手順】: トリミングモードに入り、片方のハンドルにカーソルを合わせます（30秒）。次にOption（Mac）またはAlt（Windows）を押しながらハンドルをドラッグします。反対側のハンドルが対称に動くことを確認し、Enter/クリックで確定します。
【コツと理由】: Option/Altを使うと反対側も同時に等量動くため、1回の操作で中心を固定したままトリミングが完成します。バナー画像の中央被写体を残して余白だけ削る操作が、1ステップで完了します。
【注意点】: Option/Altは位置移動（中央ドラッグ）には効きません。ハンドルのドラッグに対してのみ有効です。
ハック3: ショートカットKキーでスケールを保持しながら移動する
【対象】: トリミング確定後に画像がズレて見えて再調整に時間がかかる方
【手順】: トリミング完了後、Kキーを押してスケールツールに切り替えます（10秒）。画像を選択した状態でフレームと一緒にサイズを変更します。元のトリミング設定を保持したまま全体が拡縮されることを確認します（1分）。
【コツと理由】: Kキーのスケールツールを使うと画像のトリミング設定ごと比率を保って拡縮できるため、やり直しが不要になります。スケールツールがフレームと内部の塗り設定を一体として扱うことでこの動作が実現されます。
【注意点】: 通常の移動ツール（Vキー）でフレームサイズを変更すると、トリミング範囲が再計算されて意図しないズレが生じます。サイズ変更後に表示が崩れた場合はKキーに切り替えてやり直してください。
ハック4: 塗りのコピーで同じトリミング設定を複数画像に適用する
【対象】: 同じ比率・同じトリミング設定で複数の画像を統一したい方
【手順】: トリミング設定が完成した画像レイヤーを選択します（30秒）。右サイドバーの塗りセクションで3点メニューを開き「スタイルとしてコピー」または「塗りをコピー」を実行します。同じ設定にしたい別の画像レイヤーを選択し、塗りを貼り付けます（1分）。
【コツと理由】: 塗りのコピーを使うと、画像モード・スケール・位置の設定が数値レベルで完全に一致するため、複数枚を一括で統一できます。目視で合わせながら個別にトリミングする方法では微妙なズレが生じやすく、確認作業に余分な時間がかかります。
【注意点】: 貼り付け先の画像が元画像と縦横比が異なる場合、同じ設定を貼り付けても見え方が変わります。比率が違う画像には個別に微調整が必要です。
ハック5: ダブルクリックでトリミングモードに直接入る
【対象】: サイドバーの操作を省略して素早くトリミングを始めたい方
【手順】: キャンバス上の画像をクリックして選択します（5秒）。そのまま画像をダブルクリックすると、直接画像内にフォーカスが移ります。表示されたハンドルを操作してトリミングを実行し、Enterで確定します（30秒）。
【コツと理由】: ダブルクリック1回でトリミングモードのハンドルが即座に表示されるため、操作ステップを2〜3ステップ削減できます。Figmaがダブルクリックを「コンテナ内部への編集モード入り」として解釈しているため、この操作が可能になっています。
【注意点】: ダブルクリックの1回目で内側のフレームや別グループに入ることがあります。ハンドルが表示されない場合は、もう一度ダブルクリックするか、レイヤーパネルで画像レイヤーを直接選択してください。
CHECK
▶ 今すぐやること: ハック1のアスペクト比固定（⌘/Controlキー+ハンドルドラッグ）を手元の画像で試す（3分）
Q: ダブルクリックしてもハンドルではなくテキスト編集モードに入ってしまいます。
A: テキストレイヤーがグループの最前面にある場合に起こります。レイヤーパネルで直接画像レイヤーを選択してから操作するか、Escで一度テキスト編集を抜けてから画像を選択し直してください。
Q： ⌘/Controlを押してもアスペクト比が変わってしまいます。
A: 辺の中央ハンドルを操作している状態です。アスペクト比固定は四隅の角ハンドルにのみ有効です。
背景切り抜きは3つの手順で対応
人物や商品の背景だけを取り除く「背景切り抜き」は、単純なトリミングとは異なる操作が必要です。Figmaは写真編集ツールではないため、背景削除はFigmaの外部で処理してから持ち込む方が品質・速度ともに優れています。
外部の背景削除ツールで前処理する
背景削除の精度と速度を考えると、Figmaのペンツールで手動でパスを描く方法よりも、外部の専用ツールを使う方が実務では現実的です。Adobe ExpressやRemove.bgなどのウェブサービスがその代表例です。
これらのツールにPNGまたはJPGをアップロードすると、AIが背景を自動除去した透過PNG（アルファチャンネル付き）を出力します。出力ファイルをFigmaにドラッグ＆ドロップするだけで、背景が透明な状態の画像がキャンバスに配置されます。背景を外部で先に消すと、Figmaでの後続操作（トリミング・マスク・レイアウト調整）がすべて透過状態を維持したまま行えます。画像モザイク加工が必要な場面でも、同様に外部ツールとFigmaを組み合わせる流れが効率的です。
ペンツールで輪郭をなぞるクリッピングマスクの手順
外部ツールを使わずにFigma内で完結させたい場合は、ペンツール（Pキー）で被写体の輪郭に沿ったパスを描き、そのパスをマスクとして使います。
画像の上にペンツールでパスを描き、描いたパスのレイヤーを画像の上に置いて、両方を選択して「マスクとして使用」を実行します。この方法は精度がペンツールの操作精度に依存するため、細かい輪郭（髪の毛・木の葉など）の切り抜きには向いていません。人物・商品など輪郭が比較的シンプルな場合に有効です（個人メモ形式の実体験解説）。
切り抜き後はマスクグループでレイアウト調整する
背景を切り抜いた画像は、マスクグループとして管理されます。グループ全体を選択して移動・リサイズすることで、レイアウト上の配置を調整します。被写体の位置だけ動かしたい場合はグループ内にダブルクリックして入り、画像レイヤーだけを選択して移動します。
背景切り抜き後に「被写体の周囲に白い縁が残る」場合は、外部ツールで再処理するか、マスクのパスを細かく調整する必要があります。縁が残る場合に手動で対応しようとすると時間がかかるため、最初から外部ツールで高精度の透過PNGを準備してください。
CHECK
▶ 今すぐやること: 手元の人物・商品写真をRemove.bgに通して透過PNGを取得し、Figmaにドラッグ&ドロップで配置する（5分）
Q: 透過PNGをFigmaに配置したら背景が白く表示されます。
A: Figmaのキャンバスのデフォルト背景が白いため、透過部分が白に見えています。キャンバス背景色を変更するか、画像の下に別の色のフレームを置くことで透過の状態を確認できます。画像ファイル自体が透過されているかは、Figma外でファイルを開いて確認してください。
Q： ペンツールで描いたパスでマスクをかけたら、内側が見えません。
A: パスが閉じていない（最初のアンカーに戻っていない）状態です。ペンで最後のアンカーポイントをクリックして閉じてからマスクを実行してください。
納品ワークフローは3段階で完結
以下の3段階のワークフローを定型化しておくと、納品前の確認作業が15分以内に完了します。
第1段階: 画像サイズとフレームの整合を確認する
納品仕様書または依頼書に記載されている画像の表示サイズ（幅・高さのピクセル値）を確認し、Figma上のフレームサイズと一致させます。フレームを選択して右サイドバーのW（幅）・H（高さ）の値を仕様書の値に合わせます。
この段階でフレームサイズを固定しておくと、後続のトリミング・マスク操作が「指定サイズの中に収める」という明確な基準で進められます。フレームサイズを後から変えるとトリミング範囲の再調整が必要になるため、最初にサイズを確定させることが時間短縮につながります。
第2段階: トリミングまたはマスクで画像を仕上げる
フレームサイズが確定したら、前述の手順でトリミング（四角い切り抜き）またはマスク（形状指定の切り抜き）を実行します。複数の画像がある場合は、塗りのコピー機能（ハック4）を活用して設定を統一します。
この段階で確認すべきポイントは3つです。被写体の主要部分がフレーム内に収まっているか。重要なテキストや顔がフレームの端で切れていないか。隣接する他の画像との余白・配置が統一されているか。この3点を一巡するだけで、見落としによる納品後の差し戻しを防げます。
第3段階: 書き出し設定と最終確認を実行する
仕上げたデザインを選択し、右サイドバーの「書き出し」セクションで出力フォーマット（PNG/JPG/SVG等）と倍率（1x/2x等）を設定します。Retinaディスプレイ対応が必要な場合は2xで書き出します。
書き出したファイルをブラウザやビューワーで開き、実際の表示状態を確認します。Figmaのキャンバス上での表示と書き出し後のファイルの表示が一致しているかを確認することで、意図しない余白・色ズレ・解像度不足を納品前に発見できます。書き出し後に画像圧縮で画質を落とさない方法を適用すると、ファイルサイズを抑えつつ品質を維持した状態で納品できます。
CHECK
▶ 今すぐやること: 納品予定の画像を1枚選び、フレームサイズを仕様書の値に合わせて確定する（5分）
Q: 書き出したPNGの解像度が低く、印刷すると荒れます。
A: 書き出し設定の倍率を2xまたは3xに変更することで、ピクセル数が増えます。印刷用途では最低でも2x、高品質印刷では3x以上を指定してください。
Q： 書き出し後にファイルサイズが大きすぎます。
A: PNGではなくJPGで書き出すか、書き出し後にTinyPNG等の圧縮サービスを使用することでファイルサイズを削減できます。
まとめ: Figmaトリミングを使いこなす3つのポイント
Figmaのトリミングは「レイヤー選択→塗りの画像モード変更→ハンドル調整→確定」の4ステップで完了します。四角い切り抜きならトリミング、形状を自由に指定したいならマスク、という使い分けを軸にすれば、どのケースでも迷わず操作を進められます。ショートカット（⌘/Control、Option/Alt）を組み合わせると、同じ操作でも作業時間を短縮できるため、案件ごとに少しずつ試してください。
慣れてしまえばトリミング操作自体は10秒以内に完了します。最初の数回だけ丁寧に手順を確認し、その後は体で覚えていく流れが最短です。
| 状況 | 次の一歩 | 所要時間 |
| 四角トリミングが初めて | 手順1〜4を公式ヘルプを参照しながら1回通しで実践 | 5分 |
| 丸抜きをしたい | EllipseツールでOキーを押して円を描き、マスクを試す | 5分 |
| 複数画像を統一したい | ハック4の塗りのコピーを1ペアで試す | 3分 |
| 背景切り抜きが必要 | Remove.bgで透過PNGを1枚作成してFigmaに貼る | 5分 |
| 書き出しまで完了したい | 書き出しセクションで2x・PNG設定を確認する | 3分 |
Figma 画像 トリミングに関するよくある質問
Q: Figmaのトリミングは元の画像データを壊しますか？
A： 壊しません。Figmaのトリミングは非破壊編集です。トリミング後に再び塗りの画像サムネイルをクリックすることで、いつでも元の範囲に戻したり再調整したりできます。
Q： マスクをかけた後に元の状態に戻せますか？
A： 戻せます。マスクグループを右クリックして「マスクを解除」を選ぶか、Ctrl+Z（Mac: ⌘+Z）でアンドゥすることで元の状態に戻せます。
Q： トリミングとフィルモードはどう違いますか？
A： トリミングは「フレームの中に収める画像の範囲を手動で指定する」モードです。フィルは「フレームを画像で塗りつぶすように自動拡縮する」モードで、範囲の手動指定ができません。見せたい部分を自分で決めたい場合はトリミング、フレームを画像で埋めるだけで良い場合はフィルを使います。
Q： WindowsとMacで操作に違いはありますか？
A： アスペクト比固定のキーがMacでは⌘（Command）、WindowsではControlになります。反対側の同時操作はMacがOption、WindowsがAltです。それ以外の操作手順は共通です。
Q： ショートカットKキーのスケールツールはどの場面で使いますか？
A： トリミング完了後にフレームサイズを変更したい場合に使います。通常の選択ツール（Vキー）でリサイズするとトリミング設定が崩れることがあるため、スケールツールで拡縮することでトリミング設定を維持したままサイズを変更できます。
【出典・参照元】
Figma公式ヘルプ – 画像のトリミング – トリミング操作・画像モード・ショートカットの公式リファレンス
個人メモ形式の実体験解説 – Figmaの背景切り抜き方法 – ペンツールを使った背景切り抜きの実践解説
Adobe Express – 背景削除ツールの代表例
TinyPNG – 書き出し後の画像圧縮ツール