Figma で画像を背景透過する方法 — 背景削除の 4 つの選択肢（標準機能・プラグイン・外部処理）

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

そして最後の「被写体だけ残して背景を消す」には、Figma AI の Remove background という標準機能があります（ただし公式が示す対象条件は有料プランで、AI クレジットを消費します）12。本記事では、3 パターンを切り分けたうえで、それぞれの手順と、標準機能・プラグイン・外部処理の使い分けを整理します。最後に Adobe XD から移行した画像で透過・マスクが崩れる問題への備えもまとめました。

先に結論：3 つを切り分ける

やりたいことが「透過 PNG を使う」ならそのまま配置、「画像を薄くする」なら不透明度（Opacity）、「被写体だけ残して背景を消す」なら Figma AI の Remove background（有料プラン対象・AI クレジット消費）か、背景削除プラグイン / 外部処理を使います。この 3 つを切り分けるのが最短ルートです。

🔴 2026-08-20 更新：Figma に背景削除機能が入りました

本記事は当初「Figma には被写体を自動検出して背景を消す標準機能はない」と説明していましたが、これは現在の Figma には当てはまりません。公式ヘルプは Remove background を Figma AI の機能として明記しており、画像を選んでセカンダリツールバーの Remove background を押すだけで背景が抜けます。複数画像をまとめて選択することもできます1。 ただし条件があります。同ページの対象条件は 有料プラン・編集権限ありと記載され、実行には AI クレジットを消費します1。⚠️ 一方で AI クレジットの解説ページには「クレジットはすべてのプランの全シートに付与される」（Starter は月 500・1 日 150 まで）とあり2、無料プランで使えるかは公式記述だけでは確定できません。自分の画像を選んだときにツールバーへ Remove background が出るかで判断してください。出なければ、以下のプラグイン / 外部処理が引き続き有効な選択肢です。

この記事で得られること

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

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

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

やりたいこと使う機能難易度
元から透明な画像を使う透過 PNG をそのまま配置いちばん簡単・手堅い
画像全体を薄く（半透明）に不透明度（Opacity）数値を変えるだけ
被写体だけ残して背景を消すFigma AI の Remove background / 背景削除プラグイン / 外部処理標準機能あり（有料プラン対象・クレジット消費）
図形の形で一部だけ見せるマスク（後述・記事リンク）中
背景を消さずに目立たなくするレイヤーブラー / 背景のぼかし（後述）簡単（ただし詰まりどころあり）

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

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

すでに背景が透明な画像（アルファチャンネル付きの PNG や SVG）を持っているなら、Figma にそのまま配置するだけで透過は保たれます。Figma は画像の透明部分をそのまま扱うため、特別な操作はいりません。なお配置後の見え方は右サイドバーの塗り（Fill）のスウォッチから調整でき、公式ヘルプは Fill mode として Fill / Fit / Crop / Tile の 4 種を挙げています3。透過画像が意図せず引き伸ばされているときは、まずここを確認してください。

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

JPG には透過がない

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

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

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

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

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

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

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

🪄 被写体だけ残す「背景削除」— 4 つの選択肢（標準機能・プラグイン・外部処理）

ここが多くの人のゴールです。被写体（人物・商品など）だけを残して、背景を透明にしたい — 不透明度は全体が薄くなるだけ、マスクやクロップは自分で描いた形でしか切れないため、この 2 つでは実現できません。被写体の輪郭を自動で判定する処理が必要になります。

現在は選択肢が 4 つあります。

  • Figma AI の Remove background を使う（標準機能）: 画像を 1 枚以上選び、セカンダリツールバーの Remove background をクリックします1。FigJam では AI tools > Remove background、Figma Buzz では Edit > Remove background です。公式が示す対象条件は有料プラン・編集権限ありで、実行には AI クレジットを消費します12。
  • Figma AI の Select area で被写体を切り出す（標準機能）: 背景を消すのではなく必要な部分だけを取り出す方法もあります。投げ縄（lasso）で対象をドラッグして囲み、Isolate をクリックすると、その範囲が新しい画像レイヤーになります1。輪郭の自動判定が思うようにいかないときの手動ルートとして使えます。
  • 背景削除プラグインを使う: Figma Community には、AI で被写体を検出して背景を透明にするプラグインが複数あります（無料のものもあります）。画像を選んでプラグインを実行すると、背景を抜いた画像に置き換わります。AI クレジットを消費せずに済ませたいときや、標準機能が自分のプランで使えないときの選択肢です。
  • 外部で処理してから取り込む: Photoshop や画像編集サービスで背景を透過にした PNG を作り、それを Figma に配置します。輪郭やエッジを細かく詰めたいときは、こちらのほうが仕上がりを制御しやすいです。

標準機能・プラグイン・外部処理の使い分け

自分のプランで使えるなら標準機能（Remove background）が最短です。ラフな確認やスピード重視で、クレジットを使いたくない / 標準機能が出てこない場合は 背景削除プラグイン、印刷やヒーロー画像のようにエッジの品質が重要なら外部処理 → 透過 PNG を配置、が目安です。どちらの場合も、最終的に Figma に置くのは「背景が透明になった画像」なので、配置後の扱いは前述の透過 PNG と同じになります。

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

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

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

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

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

🌁 背景を消さずに「ぼかす」— レイヤーブラーと背景のぼかし

背景を透明にしたいのではなく、背景を目立たなくしたいだけなら、消すよりぼかすほうが早いことがあります。写真の上に文字を載せる、パネルの背後を柔らかく落とす、といった用途です。

ここでの最初のつまずきどころは、Figma のぼかしが 2 種類あることです。

  • レイヤーブラー: 選択したレイヤー自身をぼかします。画像そのものをぼかしたいときはこちらです。
  • 背景のぼかし: そのレイヤーの背後にあるものをぼかします。半透明のパネルを重ねて、すりガラスのように背景を透かすときはこちらです。

追加は、レイヤーを選択して右パネルのエフェクト（Effects）の + から行います。

やりたいこと使うエフェクト
画像そのものをぼかすレイヤーブラー
パネルの背後を透かしてぼかす（すりガラス）背景のぼかし
下端に向かって徐々にぼかすなど、効き方に方向をつけるプログレッシブ（下記）

🔴 背景のぼかしが効かないときは、塗りの不透明度を見る

「背景のぼかしを追加したのに何も起きない」は、この機能でいちばん多い詰まり方です。公式ヘルプは、背景のぼかしを表示するにはそのレイヤーの塗りの不透明度を 0.10〜99.99% の範囲にする必要があると明記しています4。塗りが不透明度 100% のままだと背後が完全に隠れているため、ぼかしをかけても見えるものがありません。パネルの塗りを少し透かしてから確認してください。

ユニフォームとプログレッシブ: ぼかしを追加すると、効き方として ユニフォーム / プログレッシブ を選べます。ユニフォームは全体へ均一にかかり、プログレッシブはぼかしのサイズ・方向・強さと、どこで始まりどこで終わるかを指定できます4。画像の下端に向かって徐々にぼかしてテキストを読ませる、といった表現はプログレッシブ側の担当です。

ぼかしは 1 レイヤーにつき各 1 つまで

公式ヘルプの上限では、1 つのレイヤーに追加できるのはレイヤーブラー 1 つ・背景のぼかし 1 つです4（ドロップシャドウとインナーシャドウは各 8 つまで）。強さの違うぼかしを重ねたいときは、レイヤーを分けるか、プログレッシブで効き方に幅をつけます。

なお「画像の一部分だけをぼかしたい」場合は、ぼかし単体ではなくマスクと組み合わせます。画像を複製し、上に重ねた側をマスクで必要な範囲だけに切ってから、そのレイヤーにレイヤーブラーをかけます。マスクの作り方は Figma でマスクをかける方法 を参照してください。

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

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

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

なお Pixel Fine Converter は背景を自動で消すツールではなく、XD 側ですでに作ってある透過・マスクの構造を Figma にそのまま変換するためのものです。手作業で 1 枚ずつ構築し直す手間を減らせるため、移行時の透過崩れを防ぐのに役立ちます。移行の段取りをこれから決める段階なら、変換前の準備から順序立てた XD → Figma 移行 実践ガイド を先に読むと、透過崩れをどの工程で防ぐかがはっきりします。図形やパスの変換の詳細は XD の図形を Figma に変換する にまとめています。

💬 よくある質問

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

できます。Figma AI の Remove background（画像を選んでセカンダリツールバーからクリック）が標準機能として用意されています1。ただし公式が示す対象条件は有料プランで、実行には AI クレジットを消費します12。ツールバーに出てこない場合は、背景削除プラグインを使うか、外部で透過 PNG を作って配置してください。すでに透過 PNG を持っているなら、そのまま配置すれば透けます。

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

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

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

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

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

Figma Community の背景削除プラグインに無料のものがあります。画像を選んで実行すると、AI が被写体を検出して背景を透明にします。エッジの品質を詰めたい場合は外部の画像編集で透過 PNG を作る方法もあります。⚠️ 標準機能の Remove background は AI クレジットを消費し、公式ページの対象条件は有料プランと記載されています1。

Q: 背景のぼかしを追加したのに、見た目が何も変わりません。

そのレイヤーの塗りの不透明度が 100% のままである可能性が高いです。公式ヘルプは、背景のぼかしを表示するには塗りの不透明度を 0.10〜99.99% の範囲にする必要があると明記しています4。塗りが完全に不透明だと背後が隠れきってしまい、ぼかす対象が見えません。パネルの塗りを少し透かしてから再確認してください。

Q: 画像の一部分だけをぼかしたいです。

ぼかし単体ではできないため、マスクと組み合わせます。画像を複製し、上に重ねた側をマスクでぼかしたい範囲だけに切ってから、そのレイヤーにレイヤーブラーをかけます。マスクの手順は Figma でマスクをかける方法 を参照してください。

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

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

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

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

🎯 まとめ

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

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

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

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

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

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

出典

  1. Make or edit an image with AI — Figma AI が画像の生成・背景削除・解像度向上・拡張に対応すること、Remove background の手順（画像を選択 → セカンダリツールバー / FigJam は AI tools > Remove background / Buzz は Edit > Remove background）と複数画像の同時選択、Select area の投げ縄 → Isolate で新しい画像レイヤーになること、対象条件が有料プラン・編集権限ありで AI クレジットを消費すること（2026-08-20 確認） ↩ ↩2 ↩3 ↩4 ↩5 ↩6 ↩7 ↩8 ↩9

  2. How AI credits work — AI クレジットが全プランの全シートに付与されること、Starter は月 500 クレジット + 1 日 150 の上限、クレジットは毎月リセットされ繰り越し・譲渡ができないこと（2026-08-20 確認） ↩ ↩2 ↩3 ↩4

  3. Adjust the properties of an image — 画像プロパティへの入口（Fill / Stroke のスウォッチ）と Fill mode の 4 種（Fill / Fit / Crop / Tile）（2026-08-20 確認） ↩

  4. Apply effects to layers — エフェクトの種類、1 レイヤーあたりの上限（ドロップシャドウ 8 / インナーシャドウ 8 / レイヤーブラー 1 / 背景のぼかし 1）、背景のぼかしを表示するには塗りの不透明度を 0.10〜99.99% にする必要があること、ぼかしにユニフォームとプログレッシブの 2 種があり、プログレッシブではぼかしのサイズ・方向・強さと開始/終了位置を制御できること（2026-08-28 確認） ↩ ↩2 ↩3 ↩4

関連ページ