▶ 3日で初案件PR
この記事でわかること
Figmaで背景を透過する4つの手順(透過PNG配置・Opacity調整・Remove background・プラグイン)を目的別に使い分ける方法がわかります。書き出し設定3点を確認するだけで、透明部分が消える書き出しミスをゼロにできます。無料プランでも使えるプラグイン導入から、有料プランのRemove backgroundまで、コストと精度の比較を数値で把握できます。
Figmaで背景を透過するには、目的に合った4つの手順から選ぶだけで完了します。透過PNGの配置、不透明度調整、Remove background、プラグインの4択を知れば迷わず選べます。
今の仕事について、一番近いものは?
この記事の結論
Figmaで背景透過を実現するには「目的を先に決める」ことが最優先です。画像を薄く見せたいだけなら不透明度調整で30秒、被写体を切り抜きたいならRemove backgroundかプラグインの2択に絞られます。透過PNGをすでに持っているならFigmaに配置するだけで作業は終わります。
今日やるべき1つ
手元の画像を開き、右クリックメニューに「Remove background」が表示されるか確認してください。表示される場合は有料プランで最速、表示されない場合はプラグイン経由の無料ルートに進みます(所要時間:1分)。
状況別ショートカット
| 状況 | 読むべきセクション | 所要時間 |
| 透過PNGを配置したい | 透過PNGはFigmaで配置するだけで完結 | 3分 |
| 画像を薄く見せたい | 不透明度調整はOpacityで即解決 | 1分 |
| 被写体を切り抜きたい | Remove backgroundで被写体を2クリック切り抜き | 5分 |
| 無料でまとめて処理したい | 背景削除プラグインは無料で複数枚対応 | 10分 |
| うまく透過できない | Figma背景透過は4段階で原因を特定 | 3分 |
| 書き出しで失敗している | 透過画像の書き出しはPNG一択で設定3点 | 3分 |
Figma背景透過は4手順で目的別に使い分け
「背景透過」という言葉が指す作業は、実際には4つの異なる手順を指しています。目的を間違えると作業をやり直すことになるため、まず4択の全体像を把握してください。
4手順の全体像は目的で決まる
Figmaで背景に関する操作は、大きく4つに整理できます。
第一は「透過PNGの配置」で、すでに透明背景の画像ファイルを持っている場合はFigmaに配置するだけで完了します。第二は「不透明度(Opacity)調整」で、画像を半透明にして薄く見せる操作であり、背景削除とは別物です。第三は「Remove background」で、Figmaの有料プランで使えるAI機能を使って被写体だけを残す処理です。第四は「背景削除プラグイン」で、無料または低コストで同様の処理をプラグイン経由で実行する方法です。
4手順の中でどれを選ぶかは、手元の画像の状態と目的によって決まります。すでに透過済みの画像があるなら配置のみ、画像を薄くしたいだけならOpacity調整のみで十分です。被写体の輪郭を残して背景だけ消したい場合にはじめて、Remove backgroundかプラグインが必要になります。多くのケースで「プラグインを入れなくてもよい」という判断が正解です。
なお、画像の書き出し形式についても正確に把握しておくことが重要です。画像トリミング無料サイト7選|登録不要でプロ級に仕上げる方法では、SNS媒体ごとの推奨サイズや複数枚処理の方法も紹介しており、Figmaと外部ツールを組み合わせるフローの参考になります。

4手順の特性を数値で比較
| 手順 | コスト | 処理時間 | 仕上がり精度 | 複数枚対応 |
| 透過PNGを配置 | 無料 | 30秒 | 元ファイル依存 | 可 |
| Opacity調整 | 無料 | 10秒 | 背景が残る | 可 |
| Remove background | 有料プラン+AIクレジット | 10秒 | 高 | 1枚ずつ |
| 背景削除プラグイン | 無料〜APIキー費用 | 30秒〜1分 | 中〜高 | プラグイン次第 |
精度と速度でトップのRemove backgroundはコストがかかる一方、プラグインルートは無料で使えるものの設定に数分かかります。フリーランスとして納品頻度が高い場合は初期設定のコストを払ってプラグインを整備しておく方が、長期的な作業時間の短縮につながります。
マスクは背景削除と目的が異なる
Figmaのマスク機能は、画像の一部を見せる範囲を図形で制御する機能であり、背景ピクセルを削除するものではありません。画像レイヤーと図形レイヤーを選択して右クリックから「Use as Mask」を実行すると、図形の形状に沿って画像が切り抜かれたように見えます(Figmaのマスク利用に関する質問・回答)。
ただしこれは「見せ方の制御」であり、書き出した画像には透明部分が正しく含まれる場合と含まれない場合があります。人物写真の背景を細かく削除したい用途には不向きで、ロゴや図形の形状に合わせてクリッピングしたい用途に向いています。マスクと背景削除を混同してやり直しが発生するケースは珍しくないため、用途を事前に確認してから選んでください。
CHECK
▶ 今すぐやること: 上の4手順の表を見て、自分の目的に該当する手順を1つ選んでください(1分)
Q: 有料プランに入っていないとRemove backgroundは使えませんか?
A: はい、FigmaのRemove background機能は有料プランでAIクレジットを消費する仕様です。無料プランの場合は後述のプラグインルートを使うと同様の処理が可能です。
Q: マスクで切り抜いた画像はPNGで書き出せますか?
A: 書き出し自体は可能ですが、マスクの形状によって透明部分の精度が変わります。人物写真のような細かい輪郭には背景削除機能の方が適しています。
透過PNGはFigmaで配置するだけで完結
透過PNGを持っているのに「背景が消えていない」と感じる場合、多くのケースでFigmaの操作ではなくファイル自体の確認と配置方法の確認で解決します。
透過PNGのアルファチャンネルとは
PNG形式にはアルファチャンネルと呼ばれる透明度の情報が含まれており、背景が透明なPNGファイルはそのまま配置するだけでFigmaのキャンバス上に透明部分が再現されます。ただし「透過PNG」と説明されていても、実際には白い背景が塗られていてアルファチャンネルが存在しないファイルが多くあります。
確認の手順はシンプルです。ファイルをFigmaに配置したあと、キャンバスの背景色を濃い色(例:グレー#999999)に変更してみてください。透明部分が正しく保持されていれば、背景色が透けて見えます。白いままに見える場合はファイル自体が透過されていないため、別途背景削除の処理が必要です。
SVGも透明部分をそのまま保持する
SVG形式も透明背景をサポートしており、Figmaへの配置後に透明部分がそのまま維持されます。ロゴやアイコンをSVGで書き出している場合、Figmaに配置するだけで背景のない状態を保てます。ただしSVGファイル内にbackground要素が含まれている場合は、その要素が背景として描画されるため、ファイルの中身を確認してください。
なお、ロゴやアイコン素材を選ぶ際は、画像フリーアイコン選びは3条件で即決|商用利用安全サイト8選も参考になります。SVG形式でダウンロードすることで、Figmaへの配置後も透明部分を保持したまま活用できます。

Windowsでの透過画像アップロードの問題
Windowsのデスクトップアプリを使う場合、ドラッグ&ドロップで透過PNGを配置すると透明部分が正しく認識されないケースがあります。
「Windowsでは透過画像の取り込みで問題があったが、メニューからの挿入では透明が保たれた」という声もあります(透明背景画像のアップロード問題に関する体験談)。ドラッグ&ドロップで透明が保たれない場合は、メニューバーの「ファイル」から「画像を配置」を選んでインポートする方法に切り替えてみてください。この操作だけで解決するケースが多くあります。
CHECK
▶ 今すぐやること: 配置済みのPNG画像を選択し、キャンバス背景を濃い色に変更して透明部分が正しく見えるか確認してください(2分)
Q: JPEGファイルを透過PNG代わりに使えますか?
A: JPEG形式はアルファチャンネルを持たないため、透過表現に使えません。背景透過が必要な場合は必ずPNGまたはSVGで用意してください。
Q: ブラウザ版とデスクトップ版で透過の挙動は違いますか?
A: 配置後の表示に関しては同じですが、Windowsデスクトップ版ではドラッグ&ドロップ時に透明部分が失われる事例があります。不具合が出た場合はブラウザ版でのインポートを試してみてください。
不透明度調整はOpacityで即解決
「画像を透明にしたい」という要望の多くは、実際には「画像を薄く見せたい」という意図であることが少なくありません。その場合、背景削除の操作は不要で、Opacityを下げるだけで目的を達成できます。
Opacityの操作は右パネルから10秒
Figmaで画像や要素を選択すると、右パネルの上部に「Opacity」または「不透明度」の数値が表示されます。この数値を100から任意の値(例:50)に変更すると、画像全体が半透明になります。操作は数値を直接入力するか、スライダーで調整するだけです。
Opacity調整は背景を削除しているのではなく「全体を薄くしている」処理です。Opacityを下げた画像はPNGで書き出しても背景が透明にはならず、半透明の画像として出力されます。納品物として「背景なし・被写体のみ」のPNGが必要な場合はOpacity調整では対応できないため、Remove backgroundかプラグインの利用が必要です。
重ね合わせ表現にはOpacity調整が最適
透明感のあるデザインや、画像を背景として薄く敷くレイアウトでは、Opacity調整が最も手軽で効果的な手法です。たとえばヒーロー画像を20%の不透明度で配置してテキストを重ねる表現は、Opacity調整なしでは実現が難しいデザインです。背景削除と混同してプラグインを使う必要はなく、シンプルな数値変更だけで完結します。
CHECK
▶ 今すぐやること: 薄く見せたい画像を選択し、右パネルのOpacityを50に変更して見た目を確認してください(1分)
Q: 特定のレイヤーだけOpacityを変えられますか?
A: はい、FigmaではレイヤーごとにOpacityを個別に設定できます。グループ化した場合はグループ全体に適用されるため、個別調整したい場合はグループ化を解除して操作してください。
Q: Opacityを下げた画像は書き出すとどうなりますか?
A: PNG書き出しの場合、Opacityの設定が反映された半透明の画像として出力されます。背景が完全に透明なPNGにはなりません。
Figma背景透過は4段階で原因を特定
「透過の設定をしたはずなのに、なぜか背景が残っている」という状況は、操作方法の問題ではなくレイヤー構造や書き出し設定の問題であることがほとんどです。自分のケースが4段階のどこに該当するか確認してください。
Q1: 使用している画像ファイルの形式はPNGまたはSVGですか?
Yesの場合はQ2へ進んでください。Noの場合(JPEGなど)はJPEGが透明情報を持てないため、まず画像を透過PNG形式で用意してください。外部ツール(後述のプラグイン等)で背景削除を行いPNGとして書き出してからFigmaに配置してください。
Q2: Figmaのキャンバス背景を濃い色に変更して、画像の透明部分が見えますか?
Yesの場合は画像の透過が正常です。書き出し設定の問題の可能性があるため、Q3へ進んでください。Noの場合は画像ファイル自体に透明情報が含まれていないか、Windowsのドラッグ&ドロップ問題が発生しています。メニューから再インポートするか、Remove backgroundまたはプラグインで背景削除を実行してください。
Q3: 書き出し形式はPNGまたはSVGを選択していますか?
Yesの場合はQ4へ進んでください。Noの場合(JPEGなど)は書き出し形式をPNGに変更してください。JPEG形式では透明部分が白く塗りつぶされて出力されます。
Q4: 書き出し時に「背景色を含める」や「Include background」の設定がオンになっていますか?
Yesの場合はその設定をオフにして書き出してください。この設定がオンだとキャンバスの背景色が書き出し画像に含まれます。Noの場合は書き出したPNGファイルをFigmaとは別の画像ビューアや背景が確認しやすいアプリで開いて確認してください。Figmaのキャンバス設定によって見た目が変わる場合があります。
CHECK
▶ 今すぐやること: Q1から順番に答えて、自分のケースが4段階のどこで止まるかを特定してください(3分)
Q: Figmaのキャンバス背景色はどこで変更できますか?
A: 右パネルの「ページ」エリアにキャンバスの背景色設定があります。レイヤーを何も選択していない状態で右パネルを確認してください。
Q: 書き出し時に「Include background」の設定が見当たりません。
A: このオプションはFigmaのバージョンや書き出し設定のUIによって表示が異なります。書き出しパネルで「+」ボタンを押して書き出し設定を追加し、オプションを展開して確認してください。
PR提供: 日本デザインスクール(デザスク)
Remove backgroundで被写体を2クリック切り抜き
Figmaの有料プランを使用している場合、Remove backgroundは最も手軽に被写体を切り抜ける機能です。ただしAIクレジットを消費するため、頻繁に使う場合はプラグインとのコスト比較が必要です。
Remove backgroundの操作手順
Remove backgroundを使う手順は2ステップで完了します。第一ステップとして、Figmaのキャンバス上で背景を削除したい画像を選択します。第二ステップとして、右クリックメニューから「Remove background」を選択して実行します。処理が完了すると、背景部分が自動的に削除されて被写体のみが残ります(処理時間:5〜10秒)。
処理の精度は画像の内容によって異なります。人物写真や単純な背景の場合は高い精度で切り抜けますが、髪の毛の細部や複雑な背景の場合は境界線に若干のノイズが残ることがあります。精度に不満がある場合は外部ツール(後述)で処理してからFigmaに配置するルートを検討してください。
AIクレジットの消費とコスト感
FigmaのRemove backgroundはAIクレジットを1回の実行ごとに消費します。月に数枚程度の処理であれば有料プランの範囲内で十分ですが、週に10枚以上の処理が必要な場合はプラグイン経由の方がコスト効率がよい場合があります。AIクレジットの具体的な付与量やプラン詳細はFigma公式サイトで確認してください。
クライアント案件で写真を多用するバナー制作では、毎回Remove backgroundを使うよりも初期にプラグインを設定しておいた方が月次のコストを抑えられます。
Adobe Fireflyとの連携
Adobe Fireflyを使ったFigmaでの背景除去も選択肢の一つです。Figmaとの連携方法はAdobe公式サイトで案内されており(Adobe公式のFigma連携背景除去案内)、画像を選択して処理するフローはRemove backgroundと同様です。Adobe Creative Cloudのサブスクリプションを持っているフリーランスであれば追加費用なく利用できる場合があります。
CHECK
▶ 今すぐやること: 有料プラン利用中の場合は画像を右クリックして「Remove background」の項目があるか確認し、あれば1枚テスト実行してください(2分)
Q: Remove backgroundで処理した後に元の状態に戻せますか?
A: Figmaの「元に戻す(Ctrl/Cmd+Z)」で直後の操作であれば戻せますが、ファイルを閉じて再度開いた後は戻せません。処理前に画像レイヤーを複製しておいてください。
Q: Remove backgroundは選択範囲を指定できますか?
A: 現時点のFigmaのRemove backgroundは画像全体に対して自動的に処理を行うため、削除範囲を手動で指定することはできません。範囲を細かく指定したい場合は外部ツールを使ってから配置する方法が確実です。
背景削除プラグインは無料で複数枚対応
無料プランを使っている場合や、まとめて大量の画像を処理したい場合は背景削除プラグインが最も実用的な選択肢です。ただしプラグインによってはAPIキーの設定が必要なため、最初の5分間はセットアップに時間を使います。
プラグインの導入手順
背景削除プラグインの導入から実行までを3ステップで説明します。
第一ステップとして、Figmaのメニューから「プラグイン」を選択し、「プラグインを検索」でRemove BGやBG Removerなどのプラグインを検索してインストールします(Figma公式コミュニティの透明化プラグイン)。第二ステップとして、プラグインを起動するとAPIキーの入力を求められる場合があります。APIキーが必要な場合は、対応するサービスのサイトで無料登録してキーを取得し、プラグインのSettings画面に入力します。第三ステップとして、背景を削除したい画像をFigmaキャンバス上で選択し、プラグインを実行します。処理が完了すると背景が削除された状態になります。
「プラグインの管理からRemove BGを入れ、APIキーを設定して実行すると背景が透過された」という報告もあります(Figmaでの背景透過手順の実践記事)。APIキーの取得と入力が唯一のハードルで、一度設定すれば以降は画像を選んで実行するだけです。最初の5分間だけ準備に時間をかければ、その後の作業は毎回30秒以内に完了します。
複数枚の一括処理方法
複数の画像をまとめて背景削除する場合は、Figmaキャンバス上で複数の画像を選択してからプラグインを実行します。ただしプラグインによっては1枚ずつしか処理できないものもあるため、プラグインの説明ページで「Batch processing」や「複数選択対応」の記載があるものを選ぶと効率的です。
APIキーが不要なプラグインの選び方
多くの背景削除プラグインはremove.bgなどの外部APIを使用するためAPIキーが必要ですが、Figma公式コミュニティには設定不要で使えるプラグインも存在します(Figma公式コミュニティの背景削除プラグイン一覧)。APIキーの設定が面倒に感じる場合は、プラグイン一覧ページで「APIキー不要」と説明されているものを優先して試してみてください。APIキーが必要なプラグインは処理精度が高いというトレードオフがあります。
CHECK
▶ 今すぐやること: Figmaのプラグイン検索で「Remove BG」と入力して表示されるプラグインのレビュー数を確認し、最もレビューが多いものをインストールしてください(5分)
Q: プラグインのAPIキーは無料で取得できますか?
A: remove.bgのAPIキーは月50枚まで無料で利用できます(remove.bg公式サイト)。月50枚を超える場合は有料プランへの移行が必要ですが、通常のフリーランス業務であれば無料枠で十分なケースが多いです。
Q: プラグインを使った場合の処理精度はRemove backgroundと比べてどうですか?
A: 使用するAPIや画像によって異なりますが、remove.bg系のAPIを使ったプラグインはRemove backgroundと同等かそれ以上の精度が出ることもあります。複数のプラグインをテストして自分の用途に合ったものを選んでください。
Figma背景透過の実務ノウハウは5つの仕組みで定着
競合記事が取り上げる「手順の説明」だけで終わらせず、フリーランスの実務に即した再現性の高いノウハウを5つ紹介します。各ハックを一度設定すれば、以降の案件で毎回悩む必要がなくなります。
ハック1: 処理前の複製習慣で作業ロスをゼロにする
【対象】: 背景削除後に元の状態に戻せなくなった経験がある方
【手順】: 第一ステップとして、背景削除を行う画像レイヤーを右クリックして「複製」を選択します(所要時間:10秒)。第二ステップとして、複製したレイヤーを非表示にして元のレイヤーとは別の場所に移動します。第三ステップとして、表示中の元レイヤーに対してRemove backgroundまたはプラグインを実行します。失敗した場合は非表示にしていた複製レイヤーを再表示して最初からやり直せます。
【コツと理由】: ファイルを閉じた後や複数回の操作後は元に戻せないため、処理前の複製が唯一の確実な保険になります。複製の10秒を惜しんだせいで画像の再手配に数十分かかるケースが実務では頻発します。「戻せる前提で進める」という考え方をやめて「戻せない前提で保険を作る」習慣に切り替えることが長期的な作業効率を高めます。
【注意点】: 複製レイヤーを非表示ではなく削除してから処理を開始しないでください。削除してしまうと保険が失われるため、必ず非表示のままにしておいてください。
ハック2: 濃色背景レイヤーで透過確認を30秒で完了させる
【対象】: 透過できているか毎回書き出して確認している方
【手順】: 第一ステップとして、Figmaキャンバス上に黒(#000000)または濃いグレーの矩形レイヤーを作成します(所要時間:15秒)。第二ステップとして、その矩形レイヤーを処理済み画像の背面(下のレイヤー)に配置します。第三ステップとして、画像の透明部分から矩形の色が透けて見えれば透過は正常、画像の輪郭に白いノイズや不自然な色が残っていれば再処理が必要です。
【コツと理由】: 白背景では白い元素材の透過確認ができないため、実際には濃色の矩形レイヤーを画像の背面に置く方法が確実です。黒背景で問題なく見えれば、どんな背景色の上に配置しても透過が正しく機能している証明になります。書き出してからビューアで確認するという手間を毎回省けます。
【注意点】: Figmaのキャンバス背景色の変更と矩形レイヤーの配置は別の操作です。矩形レイヤーは書き出し時に含まれるため、確認後は非表示にするか削除してから書き出してください。
ハック3: 外部ツールとFigmaの組み合わせで精度を最大化する
【対象】: プラグインの切り抜き精度に満足できていない方
【手順】: 第一ステップとして、切り抜き精度を要求する画像(人物の髪の毛、細かいロゴなど)はremove.bgやCanvaの背景削除機能を使って処理します(所要時間:1分)。第二ステップとして、処理済みのPNGをダウンロードしてFigmaに「画像を配置」のメニューからインポートします(所要時間:30秒)。第三ステップとして、Figma内で配置した画像のサイズや位置を調整して完成です。
【コツと理由】: 切り抜き精度において専用ツールはFigmaのプラグインを上回る場合があります。外部処理をワークフローに組み込むことを「手間」と捉える必要はなく、「精度の高い分業」と捉えると納品品質が上がります。ブラウザタブを一つ追加するだけで完結するため、作業の複雑さは実質的に増えません。
【注意点】: 外部ツールでの処理後にFigmaへドラッグ&ドロップするとWindowsで透明部分が失われる事例があります。必ずメニューの「画像を配置」から読み込んでください。remove.bgは月50枚まで無料のため、ほとんどのケースで追加費用なしで使えます。
ハック4: 書き出し設定を一度テンプレート化して毎回の設定ミスをゼロにする
【対象】: 書き出すたびにJPEGで保存してしまう方やフォーマット設定を忘れる方
【手順】: 第一ステップとして、Figmaの右パネル下部の「書き出し」セクションで「+」をクリックし、書き出し設定を追加します(所要時間:30秒)。第二ステップとして、形式を「PNG」、解像度を「2x」に設定します(解像度は用途に応じて調整。Web用は1x〜2x、印刷用は確認が必要です)。第三ステップとして、この書き出し設定はフレームやレイヤーに保存されるため、次回以降は「書き出し」ボタンを押すだけで毎回同じ設定で書き出せます。
【コツと理由】: 書き出すたびに「PNG形式を選ぶ」手順を踏むのは一見小さな作業ですが、プロジェクト内で何十枚もの画像を処理する場面では設定ミスが発生します。Figmaの書き出し設定はレイヤー単位で保存されるため、一度設定しておけばその後は設定選択が不要になり、JPEG誤書き出しによる透明部分の消失をゼロにできます。
【注意点】: 印刷物向けに300dpiのTIFF形式が必要な案件では、PNG固定設定では対応できません。クライアントの指定形式を毎回確認してから設定を上書きする習慣も同時に持っておいてください。
ハック5: 背景削除後の修正は選択範囲の調整で仕上がりを改善する
【対象】: 背景削除後に輪郭の白い縁や不自然なノイズが残って困っている方
【手順】: 第一ステップとして、背景削除後の画像を選択し、右パネルの「画像を編集」からFigmaの画像編集モードに入ります(所要時間:30秒)。第二ステップとして、残った背景部分が小さい面積の場合はFigmaのベクターツールを使ってマスクレイヤーを組み合わせ、残存する背景部分を隠す処理を行います。第三ステップとして、大きくノイズが残る場合は外部ツールで再処理してから再インポートする方が確実です(所要時間:2〜5分)。
【コツと理由】: AIによる自動処理の精度は元画像のコントラストに依存するため、再実行しても結果が変わらないことが多いです。輪郭のノイズが細かい場合はマスクで隠す方が現実的な対処法で、広範囲に残る場合は別ツールで処理する判断が正解です。再実行を繰り返すことでAIクレジットを消費するだけになるため、1〜2回試して改善しない場合は外部ツールへ切り替えてください。
【注意点】: Figmaのベクターマスクを使った修正は画像の透過情報そのものを変えるのではなく、見せ方を変えているだけです。最終納品前に必ず濃色背景(ハック2)で確認してから書き出してください。
CHECK
▶ 今すぐやること: 次に背景削除作業を行う前に、ハック1の複製習慣を実行してください(10秒)
Q: プラグインで処理した後に輪郭がギザギザになります。対処法はありますか?
A: プラグインのAPIによって精度が異なります。ハック5の方法でマスクによる修正を試した上で改善しない場合は、remove.bgなど精度の高い外部ツールで処理してFigmaに再インポートする方法が最も確実です。
透過画像の書き出しはPNG一択で設定3点
書き出し設定の誤りは、透過処理を完璧に行った後でも透明部分を失う原因になります。確認する設定は3点だけです。
書き出し形式の選び方
透明部分を保持した書き出しに対応している主な形式はPNGとSVGです。PNGはビットマップ形式でWebや印刷物に広く対応しており、SVGはベクター形式でロゴやアイコンに適しています。JPEG形式は透明部分を白または指定背景色で塗りつぶして出力するため、背景透過の目的では使えません。WebPはFigmaの書き出しでサポートされており、透明部分を保持しながらPNGより小さいファイルサイズで書き出せますが、対応ブラウザや用途を確認してから使用してください。
なお、書き出し後の画像を活用する場面でサイズ調整が必要な場合は、画像圧縮で画質落とさない方法|5つの仕組みで軽量化が参考になります。JPEG圧縮率や可逆圧縮の考え方を理解しておくと、Figmaからの書き出し後のファイル管理がスムーズになります。

書き出し設定で確認する3点
Figmaで透過画像を正しく書き出すために確認する設定は3点です。第一に形式がPNGまたはSVGになっているか、第二に「背景色を含める」がオフになっているか(デフォルトはオフです)、第三に書き出し対象のレイヤーまたはフレームが正しく選択されているかです。フレームを書き出す場合、フレームの背景色設定がオンになっているとその色が書き出し画像に含まれるため、フレームの設定も確認してください。
書き出し後の確認方法
書き出したPNGファイルをFigmaとは別の環境で確認することで、設定の正確性を検証できます。Windowsであればペイントアプリ、Macであればプレビューアプリで開くと、透明部分が市松模様やグレーのパターンで表示されます。このパターンが表示されない場合(白または別の色で塗りつぶされている場合)は、透明情報が正しく書き出されていないため設定を見直してください。
また、こんなに簡単だったの!? 画像の背景透過は無料で3秒完了では、FigmaとあわせてWindowsやOfficeの標準機能を使った背景透過の方法も紹介されています。Figmaを使えない環境での代替手段として覚えておくと便利です。

CHECK
▶ 今すぐやること: 透過PNGを一枚書き出して、ペイントまたはプレビューで開き透明部分の市松模様が表示されるか確認してください(3分)
Q: SVGで書き出した場合も透明部分は保持されますか?
A: はい、SVGは透明部分を保持する形式です。ただし受け取り側の環境(ブラウザや印刷サービス)がSVGの透明表現に対応しているか事前に確認してください。
Q: 複数の画像をまとめて書き出す方法はありますか?
A: Figmaでは書き出し設定を追加したレイヤーを複数選択してから「すべて書き出す」を実行することで、まとめて書き出しが可能です。事前に各レイヤーにPNG書き出し設定を追加(ハック4参照)しておく必要があります。
まとめ:Figma背景透過は目的別4手順で完結
Figmaの背景透過は、目的に合った4手順のうち1つを選ぶだけで完結します。透過PNG配置・Opacity調整・Remove background・プラグインの4択を覚えておくことで、毎回の判断に迷わなくなります。書き出し時はPNG形式で3点の設定を確認すれば、透明部分が失われる書き出しミスはゼロにできます。
フリーランスとして案件ごとに画像処理の方法を毎回調べ直す時間は、1回の初期設定(プラグイン導入・書き出し設定の固定・複製習慣の定着)で大幅に削減できます。最初の10分間の準備が、その後の全案件の作業時間を短縮します。今日から5つのハックを1つずつ取り入れていってください。
| 状況 | 次の一歩 | 所要時間 |
| 透過PNGを初めて配置する | ファイルをメニューから挿入して濃色背景で確認 | 3分 |
| Remove backgroundを初めて使う | 画像を右クリックしてメニューを確認 | 1分 |
| プラグインを設定していない | FigmaコミュニティでRemove BGを検索してインストール | 5分 |
| 書き出しで失敗したことがある | 書き出し設定をPNGに固定して一枚テスト | 3分 |
Figma背景透過に関するよくある質問
Q: 無料プランでFigmaの背景透過はできますか?
A: 透過PNGの配置とOpacity調整は無料プランでも使えます。被写体を切り抜く処理については、Remove backgroundは有料プランのみですが、背景削除プラグインは無料で使えるものがあります(Figma公式コミュニティの背景削除プラグイン一覧)。
Q: 背景削除した後で元の画像に戻せますか?
A: Figmaの「元に戻す」(Ctrl/Cmd+Z)は直後の操作であれば有効です。ファイルを閉じて再度開いた後は戻せないため、処理前にレイヤーを複製しておいてください(ハック1参照)。
Q: スマートフォンの写真からFigmaで背景削除できますか?
A: スマートフォンで撮影した写真をFigmaにインポートした後、Remove backgroundまたはプラグインで処理できます。ファイル形式はJPEGでもインポートは可能ですが、背景削除後の書き出しはPNG形式を選んでください。
【出典・参照元】
Figma公式コミュニティの背景削除プラグイン一覧 – 背景削除プラグイン一覧・無料プランでの利用方法
Figma公式コミュニティの透明化プラグイン – 透明化プラグインの導入先
Adobe公式のFigma連携背景除去案内 – Adobe FireflyとFigmaの連携による背景除去
Figmaのマスク利用に関する質問・回答 – Use as Maskの操作に関する体験談
透明背景画像のアップロード問題に関する体験談 – Windowsでの透過画像インポートに関する体験談
Figmaでの背景透過手順の実践記事 – Remove BGプラグインのAPIキー設定と実行の体験談
remove.bg公式サイト – APIキー無料枠(月50枚)の料金情報
Figma公式サイト(料金プラン) – AIクレジットを含むプラン詳細