# Figmaで画像加工の幅を広げるプラグイン「Filter / effects」

URL: https://webrandum.net/figma-plugin-filter-effects/
公開日: 2022-07-15
更新日: 2022-07-14
カテゴリー: デザイン
タグ: Figma, Figmaプラグイン
出典: Webrandum（著者: サイトウ マサカズ）

Figmaのデフォルトでも色調補正や描画モードの変更はできますが、最低限という感じです。

すべてスライダを左右に動かして効果量を調整します。

| 名称 | 内容 |
| --- | --- |

| Exposure（露光量） | スライダをに右に動かすと明るくなり、左に動かすと暗くなる |
| --- | --- |

| Contrast（コントラスト） | スライダを右に動かすとハイライトとシャドウの差が大きくなり、 左に動かすと差が小さくなる |
| --- | --- |

| Saturation（彩度） | スライダを右に動かすと色が鮮やかになり、 左に動かすとねむい画像になる |
| --- | --- |

| Temperature（色温度） | スライダを右に動かすと黄色っぽく（暖色系）なり、 左に動かすと青っぽく（寒色系）なる |
| --- | --- |

| Tint（色かぶり補正） | スライダを右に動かすとマゼンタが強くなり、 左に動かすと緑色が強くなる |
| --- | --- |

| Highlights（ハイライト） | 右に動かすと画像内の明るい部分が明るくなり、左に動かすと暗くなる |
| --- | --- |

| Shadows（シャドウ） | 右に動かすと画像内の暗い部分が明るくなり、左に動かすと暗くなる |
| --- | --- |

[![](https://www.google.com/s2/favicons?domain=webrandum.net)Webrandum![](//webrandum.net/mskz/wp-content/uploads/2021/11/eyecatch-3.jpg)Figmaの画像周りの基本操作｜画像の追加方法や色補正、切り抜き方法までhttps://webrandum.net/figma-image今回はFigmaの画像関連の操作についてまとめておきます。画像配置の基本画像を配置する方法は下記の3つあります。 ドラッグアンドドロップで追加 画像ツール（shift + command + K）で追加 画像ツールで図形マスクをする形で追加 Fillに画像を設定他のデザインツールの場合は、画像の追加方法によってふるまいが変わることもありますが、Figmaの場合は現状どんな方法を使っても同じ振る舞いになるので、やりやすい方法でOKです。ドラッグアンドドロップで追加まずは画像をFinderなどから直接ドラッグアンドドロップで追加する方法です...](https://webrandum.net/figma-image)

今回は、それ以外に様々なエフェクトが使えるプラグインの「Filter / effects」についてまとめておきます。

## Filter / effects

![Filter / effects](https://webrandum.net/mskz/wp-content/uploads/2022/07/image_1-5.png)

[![](https://www.google.com/s2/favicons?domain=www.figma.com)Figma![](//webrandum.net/mskz/wp-content/uploads/pz-linkcard/cache/a6d2a9b61bcdf45556d875d619ca89d88f32f158faf69133f4d66b5f967df661.webp)Figmahttps://www.figma.com/community/plugin/792025380269016893/Filter-/-effectsExplore, install, use, and remix thousands of templates, plugins, and widgets published to the Figma Community by designers and developers.](https://www.figma.com/community/plugin/792025380269016893/Filter-/-effects)

用意されているフィルターの数は2022年7月現在で54種類あります（そのうち3種類は有料版にすると使用可能）。

## 基本的な使い方

画像か要素を選択したあとにメニューバーの［Plugins］→［Filter / effects］でパネルを表示します。

![［Plugins］→［Filter / effects］の効果追加](https://webrandum.net/mskz/wp-content/uploads/2022/07/image_2-6.png)

あとは「＋」ボタンをクリックしてエフェクトを追加するだけです。

エフェクトは複数重ね掛けすることもできます。

「Save as New Image」をクリックすると、効果が適用された画像が、選択画像の上に追加されます。

元画像が残るので、自分で元画像をコピーして残しておく必要がありません。

### エフェクトの詳細設定

エフェクトの名前部分をダブルクリックすると、そのエフェクトの詳細設定画面が表示されます。

![効果の詳細設定画面](https://webrandum.net/mskz/wp-content/uploads/2022/07/image_3-1.png)

### プリセットの設定

よく使う効果の組み合わせや詳細設定は［Presets］タブに移動して「プリセット（Preset）」という形で保存しておけば、「Apply」ですぐに適用できます。

追加したい場合は「＋」ボタンを押して追加できて、プリセット名をダブルクリックで詳細画面へ移動し、プリセットに追加するエフェクトを編集できます。

![プリセット画面](https://webrandum.net/mskz/wp-content/uploads/2022/07/image_4-1.png)

プリセットを下の「Global Presets」にドラッグアンドドロップすれば、そのFigmaファイルを開いている他のユーザーも同じプリセットが使えるようになるので「自分しかその画像を編集できない」なんてことが起こらなくなります。