figma-filter-plugin
公開日: 2021.11.05  | 更新日: 2022.01.01

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

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

この記事のターゲット

  • Figmaの初心者〜中級者

  • FigmaでPhotoshopのようなエフェクトが使いたい方

  • Filterプラグインで使用できるエフェクトの種類が知りたい方


1. 「Filter」をインストールする

install-filter-figma

Figma Community の「Filter」のページからインストールします。

プラグインに関する説明と詳しいインストール方法はこちらの記事を参考にしてください。

Figmaのプラグインのインストール方法と使い方

今回はFigmaでプラグインをインストールする方法と使い方を解説します。あわせて、当サイトで紹介している便利なプラグインと使い方を解説したプラグイン集もまとめていますので、参考にしてみてください。 ... 続きを読む

figma-how-to-use-plugins

2. Filter を起動してエフェクトを適用する

使い方はシンプルで、Filter を起動してエフェクトを適用するだけです。

  1. 右クリックメニューを開き「Plugin」から「Filter」をクリック

  2. 開いたポップアップメニューの「Effects」で必要なエフェクトを追加する

  3. 「Save as New Image」とをクリックすると、新規画像(Rectangle)として出力される

filter1
filter2

とてもシンプルですね。デフォルトでチルトシフトが設定されているようです。

複数のエフェクトを同時に重ねがけることができます。

また、オブジェクトごとにどのエフェクトが適用されているかを保持しているようなので、後から編集することも可能です。

ほとんどのエフェクトを無料で利用できますが、一部のエフェクトを使用する場合は別途ライセンスを購入する必要があります。

Filter で使用できるエフェクトは以下の通りです。premium と付いているものが有料です。

  • Brightness Contrast / 輝度・コントラスト

  • Hue Saturation / 色相・彩度

  • Curves / トーンカーブ(RGB)

  • Curves HSL / トーンカーブ(HSL)

  • Gradient Map (premium) / グラデーションマップ

  • Gamma / ガンマ

  • Soft Contrast / ソフトコントラスト

  • Sepia / セピア

  • Denoise / ノイズ除去

  • Vibrance / 自然な彩度

  • Grayscale / グレースケース

  • Mono / モノクロ

  • Night / 黒レベル

  • Noise RGB / ノイズ(RGB)

  • Noise HSL / ノイズ(HSL)

  • Noise Displace / 手ブレ

  • Fluid Erosion / 流体侵食(溶けた油絵っぽくなる)

  • Sharpen / シャープネス

  • Sharpen Luminance / 輝度のシャープネス

  • Gaussian Blur / ガウシアンフィルタ(ぼかし)

  • Lens Blur / レンズフィルタ(ぼかし)

  • Triangle Blur / 三角ブラー(ぼかし)

  • Tilt Shift / チルトシフト(トイカメラっぽくなる部分的なぼかし)

  • Zoom Blur / ズームブラー(集中線のようなぼかし)

  • Ink / インク

  • Cartoon / カートゥーン(色数制限・階調補正)

  • Posterization (premium) / (色数制限・階調補正)

  • Crosshatch / (モノクロ・階調補正)

  • Unsharp Mask / アンシャープマスク

  • Lsd / 極端な色調補正・強調

  • Edge Work / エッジ強調

  • BlackWhite / 2値化(白黒)

  • Outline / 輪郭の強調

  • Lomo / 周辺減光

  • Night Vision / ナイトビジョン(暗視スコープっぽくなる)

  • Vignette / ビネット(ケラレ)

  • Color Halftone / カラーハーフトーン

  • Dot Screen / ドットスクリーン

  • Invert Color / 色の反転

  • Bulge / Pinch / 膨張・部分的な拡大

  • Swirl / 渦巻き(ねじれ)

  • Tunnel / トンネル(円領域を中心に集中線っぽくなる)

  • Perspective / 遠近法(台形補正)

  • Hexagonal Pixelate / 六角形のピクセレート(モザイク)

  • Quadrangular Pixelate / 四角形のピクセレート(モザイク)

  • Alpha / アルファ(明るさに応じて透明度を変化させる)

  • FXAA Antialiasing / アンチエイリアス

いっぱいありますね。

これだけのリッチな機能を無料で利用させてもらえるのはとてもありがたいですね。

3. エフェクトを試してみる

特徴的なエフェクトの一部を試してみたいと思います。

Noise Displace / 手ブレ

手ブレをした時のようなノイズを生成できるエフェクトです。

X軸方向、Y軸方向に適用できます。

filter3

Fluid Erosion / 流体侵食(溶けた油絵っぽくなる)

Photoshopの歪みフィルターをランダムに使用したようなエフェクトです。

溶けた油絵のような結果になります。

filter4

Tilt Shift / チルトシフト(トイカメラっぽくなる部分的なぼかし)

チルトシフトは、指定した2点を中心ぼかすフィルターです。

トイカメラのような遠近感のあるぼかしが可能です。

filter5

Zoom Blur / ズームブラー(集中線のようなぼかし)

ズームブラーは、レンズをズームした瞬間のようなエフェクトです。

集中線の代用として利用できそうです。

filter6

Cartoon / カートゥーン(色数制限・階調補正)

カートゥーンは、色数を絞って階調を減らし、マンガっぽい塗りに近づけるエフェクトです。

filter7

Edge Work / エッジ強調

エッジ強調は、画像を2値化し輪郭を強調するエフェクトです。

強弱を調節することでエンボスっぽく表現したりできます。

filter8

Night Vision / ナイトビジョン(暗視スコープっぽくなる)

ナイトビジョンは、赤外線暗視スコープで除いたようなエフェクトを適用できます。

ゲームコンテンツなどの演出で利用できそうですね。

filter9

Dot Screen / ドットスクリーン

ドットスクリーンは、画像を点の大小で表現したようなエフェクトです。

漫画や古い新聞印刷のようなレトロな印象になります。

filter10

Bulge / Pinch / 膨張・部分的な拡大

部分的に膨張させられるエフェクトです。

ネコさんの顔を中心に膨張することで、変顔を表現できます。

filter11

Swirl / 渦巻き(ねじれ)

渦巻きは、指定した点を中心にねじれさせるエフェクトです。

ネコさんの顔を中心に捻ることで、クトゥルフやSCPみを感じる表現になりますね。

filter12

Hexagonal Pixelate / 六角形のピクセレート(モザイク)

ピクセレートはいわゆるモザイク化です。Filterでは四角形と六角形が利用できます。

ピクセルの形が六角形になっているのが特徴です。

filter13


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

画像の加工や素材作りに役立ちそうな、シンプルで強力なエフェクトばかりでしたね。今回紹介できなかったエフェクトもぜひ試してみてください。

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

Figmaでネオンやガラスの質感を手軽に使えるプラグイン「Morph」の紹介

今回は、Figmaで簡単にハイクオリティなエフェクトを適用できるプラグイン「Morph」の紹介です。サムネイルのような様々な種類のエフェクトが、たった一つのプラグインで再現できるので、ちょっとした素材を作るのに大変便利ですのでおすすめです。 ... 続きを読む

figma-morph-plugin

Figmaで曲線パスに沿って文字やシェイプをはわせる方法

今回はFigmaで曲線パスに沿って文字やシェイプ(パーティクル)を配置させる方法を紹介します。Figmaの標準の機能では手作業で一つずつ配置する必要があるので、「To Path」というプラグインを使用します。 ... 続きを読む

figma-to-path-plugin

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

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

figma-remove-bg-plugin

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

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

figma-skewdat-plugin


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

うえんつ

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