Figma で画像を背景透過する方法 — 背景削除・切り抜きにプラグインが必要な理由

「画像の背景を透明にしたいのにやり方が見つからない」「被写体だけ残して背景を消したい」「そもそも Figma に背景透過のボタンはある？」— Figma で背景透過を行う際につまずく原因は、たいてい同じです。「背景透過」という言葉が、実は 3 つの違うやりたいことを指しているからです。元から透明な PNG を使いたいのか、画像全体を薄くしたいのか、被写体だけ残して背景を消したいのか — このどれなのかで、使う機能がまったく変わります。

そして最後の「被写体だけ残して背景を消す」は、Figma の標準機能だけではできません。本記事では、3 パターンを切り分けたうえで、それぞれの手順と、背景削除にプラグインが必要な理由を整理します。最後に Adobe XD から移行した画像で透過・マスクが崩れる問題への備えもまとめました。

先に結論：Figma に「背景削除ボタン」はない

Figma には、Photoshop のような被写体を自動検出して背景を消す標準機能はありません。やりたいことが「透過 PNG を使う」ならそのまま配置、「画像を薄くする」なら不透明度（Opacity）、「被写体だけ残して背景を消す」なら背景削除プラグインまたは外部処理を使います。この 3 つを切り分けるのが最短ルートです。

この記事で得られること

「背景透過」の 3 パターン（透過 PNG・不透明度・背景削除）の見分け方
透過 PNG を Figma で正しく扱う方法
画像を半透明にする不透明度の調整と、画像透過 の誤解の整理
被写体の背景削除にプラグインが要る理由と、外部処理との使い分け
XD → Figma 移行で画像の透過・マスクが崩れる原因と防ぎ方

🗺️ あなたの「背景透過」はどれ？

「背景透過」で検索してたどり着く先は、人によってまったく別の操作です。まず自分のケースがどれかを確かめましょう。

やりたいこと	使う機能	難易度
元から透明な画像を使う	透過 PNG をそのまま配置	いちばん簡単・手堅い
画像全体を薄く（半透明）に	不透明度（Opacity）	数値を変えるだけ
被写体だけ残して背景を消す	背景削除プラグイン / 外部処理	標準機能では不可
図形の形で一部だけ見せる	マスク（後述・記事リンク）	中

ポイントは、「透過」には『元から透明』『全体を薄く』『背景だけ消す』の 3 種があるということ。混同しやすいのは「画像全体を薄くする不透明度」と「背景だけ消す背景削除」で、この 2 つは使う機能がまったく違います。順に見ていきましょう。

🖼️ 透過 PNG をそのまま使う（最も手堅い）

すでに背景が透明な画像（アルファチャンネル付きの PNG や SVG）を持っているなら、Figma にそのまま配置するだけで透過は保たれます。Figma は画像の透明部分をそのまま扱うため、特別な操作はいりません。

透過 PNG / SVG をキャンバスにドラッグ＆ドロップ、または Shift + Ctrl/⌘ + K で配置します。
透明だった部分は、そのまま透けて背景（下のレイヤーやキャンバス）が見えます。
必要なら下に色やシェイプを敷いて、被写体の見え方を確認します。

JPG には透過がない

背景が白いままで透けない場合、その画像が JPG である可能性が高いです。JPG は透明部分（アルファチャンネル）を保持できない形式なので、白や黒の背景が「絵の一部」として焼き込まれています。透過させたいなら、透過 PNG を用意し直すか、後述の背景削除でアルファを作る必要があります。

ロゴやアイコンのように、配布元から透過 PNG を入手できるなら、これがいちばん手堅く、画質も安定します。

🌫️ 画像を半透明にする — 不透明度（Opacity）

「画像を透過させたい」が、実は画像全体を薄く（半透明に）したいケースもよくあります。背景に画像を敷いて文字を読みやすくする、ウォーターマーク風に重ねる、といった用途です。これは「背景削除」ではなく 不透明度（Opacity） の調整です。

レイヤーの不透明度: 画像を選択し、右パネルの Opacity（不透明度）の数値を下げます。レイヤー選択中に数字キーを押すと素早く変えられます（5 で 50%、0 で 100%、0 を素早く 2 回で 0%）。
塗りの不透明度: 画像を塗り（Fill）として使っている場合は、塗りごとの不透明度を個別に下げることもできます。

「不透明度を下げる」と「背景を消す」は別もの

不透明度を下げると、被写体も背景もまとめて薄くなります。被写体はくっきり残したまま背景だけを消したい場合は、不透明度では実現できません。その場合は次の「背景削除」が必要です。やりたいのが「全体を薄く」なのか「背景だけ消す」なのかを最初に切り分けてください。

🪄 被写体だけ残す「背景削除」はプラグインで

ここが多くの人のゴールです。被写体（人物・商品など）だけを残して、背景を透明にしたい — この「背景削除」は、Figma の標準機能だけではできません。不透明度は全体が薄くなるだけ、マスクやクロップは自分で描いた形でしか切れないため、被写体の輪郭を自動で判定して背景を抜く処理は対象外です。

被写体の輪郭に沿った背景削除をしたい場合は、次のいずれかになります。

背景削除プラグインを使う: Figma Community には、AI で被写体を検出して背景を透明にするプラグインが複数あります（無料のものもあります）。画像を選んでプラグインを実行すると、背景を抜いた画像に置き換わります。Figma の中で完結させたいときに便利です。
外部で処理してから取り込む: Photoshop や画像編集サービスで背景を透過にした PNG を作り、それを Figma に配置します。輪郭やエッジを細かく詰めたいときは、こちらのほうが仕上がりを制御しやすいです。

プラグインと外部処理の使い分け

ラフな確認やスピード重視なら Figma の背景削除プラグイン、印刷やヒーロー画像のようにエッジの品質が重要なら外部処理 → 透過 PNG を配置、が目安です。どちらの場合も、最終的に Figma に置くのは「背景が透明になった画像」なので、配置後の扱いは前述の透過 PNG と同じになります。

⭕ 図形の形に隠すならマスク

「背景を消す」のではなく、円や任意の図形の範囲だけ画像を見せたい（プロフィールを丸く切り抜く等）なら、背景削除ではなくマスクの出番です。マスクは下に置いた形の範囲だけ画像を表示する仕組みで、被写体の自動検出はしませんが、決まった形に整えるのは得意です。

マスクやクロップ（四角いトリミング）の具体的な手順は、Figma で画像を切り抜き・トリミングする方法に詳しくまとめています。背景の「形」を整えたいだけなら、まずそちらを確認してください。

🚀 XD の透過画像・マスクを保ったまま Figma へ — Pixel Fine Converter

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

🔄 XD から移行した画像の透過・マスク

Adobe XD から移行したファイルでは、画像の透過にもう 1 点の注意が必要です。XD 上で透過させていた画像（透過 PNG やシェイプマスクで背景を隠したデザイン）は、その透過・マスク構造ごと Figma へ移行される必要があります。ここがずれると、移行後に背景が戻ってしまったり、マスクが外れて画像全体が出てしまうことがあります。

透過 PNG はアルファ情報を保ったまま移行できれば、Figma 側でもそのまま透けます。
シェイプマスク（図形で背景を隠していた切り抜き）は、Figma のマスクグループとして再構成される必要があります。

なお Pixel Fine Converter は背景を自動で消すツールではなく、XD 側ですでに作ってある透過・マスクの構造を Figma にそのまま変換するためのものです。手作業で 1 枚ずつ構築し直す手間を減らせるため、移行時の透過崩れを防ぐのに役立ちます。移行作業全体の進め方は XD → Figma 移行プレイブックに、図形やパスの変換の詳細は XD の図形を Figma に変換するにまとめています。

💬 よくある質問

Q: Figma で画像の背景を透明にできますか？

Figma の標準機能だけでは、被写体だけ残して背景を消すことはできません。背景削除プラグインを使うか、外部で透過 PNG を作って配置します。すでに透過 PNG を持っているなら、そのまま配置すれば透けます。

Q: 透過 PNG を置いたのに背景が白いままです。

その画像が JPG の可能性があります。JPG は透明部分を保持できないため、白背景が絵に焼き込まれています。透過 PNG を用意し直すか、背景削除で透明部分を作ってください。

Q: 画像を薄く（半透明に）したいだけです。

それは背景削除ではなく不透明度（Opacity）です。画像を選択して右パネルの Opacity を下げるか、数字キー（5 で 50% など）で調整します。被写体も背景もまとめて薄くなる点に注意してください。

Q: 被写体だけ残して背景を消す無料の方法は？

Figma Community の背景削除プラグインに無料のものがあります。画像を選んで実行すると、AI が被写体を検出して背景を透明にします。エッジの品質を詰めたい場合は外部の画像編集で透過 PNG を作る方法もあります。

Q: 円形や図形の形に切り抜きたいです。

それはマスクの担当です。手順は Figma で画像を切り抜き・トリミングする方法を参照してください。背景を「消す」のではなく「形で見せる」操作になります。

Q: XD で透過させた画像が、Figma 移行後に背景が戻りました。

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

🎯 まとめ

Figma の「背景透過」は、まず自分のやりたいことがどれかを切り分けるのがコツです。本記事の要点は次の 4 つです。

#	やりたいこと	使う機能
1	元から透明な画像	透過 PNG をそのまま配置（JPG は不可）
2	画像全体を薄く	不透明度（Opacity / 数字キー）
3	被写体だけ残して背景を消す	標準機能では不可 — 背景削除プラグイン or 外部処理
4	図形の形で見せる	マスク（別記事で解説）

「全体を薄く」なら不透明度、「背景だけ消す」ならプラグイン — この区別さえ押さえれば、Figma の背景透過で迷いにくくなります。そしてファイルのベースが Adobe XD で作成されたものなら、透過とマスクの構造を保ったまま移行することが、背景崩れを避けるいちばんの近道です。

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

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