WebDesigner's Memorandumウェブデザイナーの備忘録

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

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

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

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

名称内容
Exposure(露光量)スライダをに右に動かすと明るくなり、左に動かすと暗くなる
Contrast(コントラスト)スライダを右に動かすとハイライトとシャドウの差が大きくなり、
左に動かすと差が小さくなる
Saturation(彩度)スライダを右に動かすと色が鮮やかになり、
左に動かすとねむい画像になる
Temperature(色温度)スライダを右に動かすと黄色っぽく(暖色系)なり、
左に動かすと青っぽく(寒色系)なる
Tint(色かぶり補正)スライダを右に動かすとマゼンタが強くなり、
左に動かすと緑色が強くなる
Highlights(ハイライト)右に動かすと画像内の明るい部分が明るくなり、左に動かすと暗くなる
Shadows(シャドウ)右に動かすと画像内の暗い部分が明るくなり、左に動かすと暗くなる

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

Filter / effects

Filter / effects

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

基本的な使い方

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

[Plugins]→[Filter / effects]の効果追加

あとは「+」ボタンをクリックしてエフェクトを追加するだけです。
エフェクトは複数重ね掛けすることもできます。

「Save as New Image」をクリックすると、効果が適用された画像が、選択画像の上に追加されます。
元画像が残るので、自分で元画像をコピーして残しておく必要がありません。

エフェクトの詳細設定

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

効果の詳細設定画面

プリセットの設定

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

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

プリセット画面

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

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね