figma-remove-bg-plugin
公開日: 2021.04.09  | 更新日: 2023.01.20

Figmaで写真やイラストの背景を簡単に切り抜き・透過する方法

2023年1月追記

Figmaでの画像の背景透過を、無料で複雑な設定や回数制限なしに一括処理できる別のプラグインについて、以下の記事で新たに紹介していますので、こちらも参考にしてください。

Figmaで複数の画像素材から一括で背景を透過する方法

今回は、複数の画像の背景を透過する処理を一括で実行できるプラグイン「Icons8 Background Remover」の紹介です。JPEGなどの画像からアイコンを透過させたり、複数のプロフィール写真から被写体を切り抜くなどの作業を効率化できます。 ... 続きを読む

figma-icons8-background-remover-plugin

今回は、Figmaで画像から背景を簡単に切り抜いてくれるプラグイン「Remove BG」の紹介です。画像を組み合わせてコラ画像(コラージュ画像)を作りたい時や、写真から人物を抜き出したい時などに便利なプラグインです。

「Remove BG」というプラグインは、同名のWEBサービスが提供している公式プラグインで、サービス自体はFigmaを利用しなくても直接Webサイト上で利用することもできます。

remove-bg

この記事のターゲット

  • Figmaで画像の背景を透明に切り抜きたい方

  • バナーやイラスト用に、素材の白背景を削除したい方

  • ポートレートなどから人物だけを切り抜きたい方

ちなみに、Figmaを使わずに写真の切り抜きをする方法については、こちらの記事に非常にわかりやすくまとめられていましたので、ご参考まで。

写真の切り抜き・合成も自由自在!誰でもデザイナーになれる神ツール【4選】を紹介


1. 「Remove BG」プラグインをインストールする

figma-remove-bg-plugin

Figmaのプラグインページから「Remove BG」をインストールします。ページ右上の「Install」をクリックすると自動的にインストールされます。

このサービスを利用するには、アカウント登録が必要ですが、月に50枚までは無料で利用できます(2021年3月現在)。無料版の場合、さらに25メガピクセルまでという制限がありますので、大きすぎる画像は無効になります。そして、Figma上でプラグインを通じて利用する場合も、同様の制限があります。

月に数件の記事を各ブロガーやマーケティング担当者、趣味で画像コラージュを作成する分には問題ない数だと思います。それ以上使用したい場合は有料プランを契約しましょう。

2. プラグインを開いてAPIをセットする

remove-bg-set-api

Figmaのファイルを開いて、プラグインがインストールされているか確認しましょう。

右クリックでメニューを開き「Plugin」から「Remove BG」を探し、見つけたら「Set API Key」をクリックします。

remove-bg-set-api-option

すると「API Key」を入力するように表示されるので、URLをクリックしてRemove BGの公式サイトでアカウントを作成し、API Keyを取得します。

remove-bg-website-api-key

API Keyを取得したらFigmaに戻って、入力し「Save」を押します。

これで準備は完了です。

3. プラグインを実行する

プラグインの実行は非常にシンプルです。

背景を消したい画像を選択して、Pluginから「Remove BG」の「Run」をクリックするだけです。処理が始まってしばらくすると、背景が自動的に削除されます。

remove-bg-cat

ご覧ください。ネコチャンも驚きの表情です。

切り抜かれたネコチャンに別の背景画像を合わせることで、コラージュ作品があっという間に出来上がりますね。

space-cat

もう少し複雑な背景でも試してみましょう。

木に寄りかかる女性の画像から背景を削除してみます。

remove-bg-woman

手と木の境界が曖昧でしたが、見事に切り抜かれていますね。驚きの精度です。

explosion-woman

このクオリティなら、SNSでの不意な爆発オチのニーズにも対応できそうです。


いかがでしたか。最近はPhotoshopやスマホのツールの画像処理技術もかなり発達していて驚かされるばかりですが、いざ業務で使うとなると使えるツールはなぜか限られてしまいますよね。

そんな中でも、無料でここまで提供してくださる神々には全く頭が上がりませんね。そんなツールを見つけたら、また紹介したいと思います。

この記事を読んだ方には、こちらの記事もおすすめです。

Figmaで簡単にスマホやPCのモックアップに画像をはめ込む方法

今回は、Figmaのプラグイン「Mockup」を使って、スマートフォンやPCなどのデバイスの画面に、スクリーンショットなどの画像を簡単にはめ込む方法を紹介します。 はめ込みたいデバイスの画面が斜めになっている場合でも対応できますので、サービス紹介用の素材作りにおすすめです。 ... 続きを読む

figma-mobile-and-destop-mockup


最新の記事を見る
広告
この記事を書いた人
うえんつ

うえんつ

X a.k.a Twitter
B2B領域のSaaS・アプリケーション開発などを組織で取り組むことが得意なプロダクトデザイナーで、このブログのオーナーです。
今の関心事
Figma・UIデザイン・UXリサーチ・QOL・旅行
広告