Figmaでおすすめの写真・画像加工のTipsまとめ

今回はFigmaで写真や画像を加工するときにおすすめの方法を目的別に紹介します。Figmaの基本機能でできることから無料のプラグインを使用する方法など、当サイトでも人気の解説記事をまとめましたので、参考にしてみてください。

• 写真・画像の切り抜き

• 写真・画像の変形

• 写真・画像にエフェクトを適用する

• 写真・画像の書き出し

この記事のターゲット

• Figmaの初心者

• Figmaでできる写真や画像加工の種類が知りたい方

• Figmaでの具体的な画像加工の方法が知りたい方

写真・画像の切り抜き

写真や画像から背景を取り除いたり、任意の形に切り抜く方法です。

Figmaで画像を○や□などの好きな形に切り抜く方法

Figmaで画像をトリミングしたり、好きな形にくり抜く方法の紹介です。アプリのユーザーアイコンをデザインする際に円形にくり抜いたり、WEBやスライド資料などに差し込む画像の加工などに便利です。 ... 続きを読む

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

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

写真・画像の変形

写真や画像を、デバイスに合わせてはめこんだり変形させる方法です。

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

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

Figmaで簡単にテキストや図形を斜めに変形する方法

今回は、Figmaで簡単にテキストや図形オブジェクトを斜め方向に変形させることができるプラグイン「SkewDat」を紹介します。オブジェクトを斜め方向に変形させることで、奥行きを出したり躍動感を表現できます。 ... 続きを読む

写真・画像にエフェクトを適用する

写真や画像の色やコントラストを調節したり、装飾やエフェクト（効果）を適用する方法です。

Figmaのプラグイン「Filter」でPhotoshopのようなエフェクトを使う方法

今回は、Figma で Photoshop のような多様なエフェクト（写真効果）を利用できるプラグイン「Filter」を紹介します。セピアやモノクロといったオーソドックスなものや、ズーム風のぼかしやドットスクリーンといったリッチなエフェクトも利用できるのでおすすめです。 ... 続きを読む

Figmaで画像をドット絵のようなモザイクに変換する方法

今回は画像をモザイク化し、ピクセルドットを個別に分解したベクターデータに変換できるプラグイン「Pixels」を紹介します。画像を8bitドットアート風に変換したり、プライバシーに配慮したような画像を作成でき、どんな画像でも簡単にモザイク加工できるので、ぜひ試してみてください。 ... 続きを読む

Figmaでオブジェクトや画像にぼかしを入れる方法

今回は、Figmaでオブジェクトや画像をぼかす「Layer blur」機能を使って、グラフィック作成に活用できる便利なテクニックをいくつかご紹介します。プラグインと組み合わせると、Photoshopを使ったような高度なグラフィックも制作できますので、覚えておいて損はないです。 ... 続きを読む

Figmaで画像の色をセピアや単色のモノクロに変換する方法

今回は、SNSやブログなどで使用するバナー画像にすぐ使える、モノクロ画像をFigmaで簡単に作成する方法をまとめました。 ... 続きを読む

写真・画像の書き出し

写真や画像を指定したファイル形式で書き出し保存（ダウンロード）する方法です。

Figmaでファイル形式を指定して画像に書き出す方法

Figmaで作成した画像やイラストなどのオブジェクトを、ファイルサイズを指定したり、PNGやSVGなどのファイル形式を指定して書き出し・エクスポートする方法の紹介です。 ... 続きを読む

Figmaで画像を圧縮したりwebp形式で保存する方法

今回はFigmaで画像をエクスポート（画像出力）する際に、ファイル形式をwebp形式を指定できるプラグイン「Olive Press」を紹介します。webpの他に、PNG・JPG・SVGでの出力に対応し、圧縮率も1~100%で指定できるのでファイルサイズを調整したい時に便利です。 ... 続きを読む

いかがだったでしょうか。

Figmaは常に機能が追加・更新され続けているので、ここで紹介した方法もどんどん古くなっていくと思われます。更新を追いかけるのも一苦労ですね。

質問や情報共有は、twitterなどでお気軽にご連絡ください。雑なメンションも大歓迎です。

この記事を読んだ方におすすめの記事

UIデザインの作業を加速するFigmaプラグイン10選

今回は、WebサービスやアプリのUI/UXのデザインFigmaを利用する中で、冗長な作業を効率化する上で特に便利だったプラグインを厳選して紹介したいと思います。プラグインの使い方が知りたい方は、プラグインの探し方とインストール方法も紹介していますので、参考にしてください。 ... 続きを読む

Figmaで簡単にコンテンツマーケティング用のバナー画像を作ってみよう

今回は、商品紹介やイベントの告知など、顧客にリーチするためのコンテンツマーケティングで利用するベーシックなバナー画像（ヘッダー画像）を、Figmaを使って作ってみようという試みになります。 ... 続きを読む

Figma初心者が使い方に困った時に試してほしいTips

今回は、納品されたり引き継いだFigmaのデザインデータを、修正・変更して再利用しようとした時によく発生するトラブルと、その対応方法をいくつか紹介したいと思います。 ... 続きを読む