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

Figmaのデフォルトでも色調補正や描画モードの変更はできますが、最低限という感じです。
すべてスライダを左右に動かして効果量を調整します。
| 名称 | 内容 |
|---|---|
| Exposure(露光量) | スライダをに右に動かすと明るくなり、左に動かすと暗くなる |
| Contrast(コントラスト) | スライダを右に動かすとハイライトとシャドウの差が大きくなり、 左に動かすと差が小さくなる |
| Saturation(彩度) | スライダを右に動かすと色が鮮やかになり、 左に動かすとねむい画像になる |
| Temperature(色温度) | スライダを右に動かすと黄色っぽく(暖色系)なり、 左に動かすと青っぽく(寒色系)なる |
| Tint(色かぶり補正) | スライダを右に動かすとマゼンタが強くなり、 左に動かすと緑色が強くなる |
| Highlights(ハイライト) | 右に動かすと画像内の明るい部分が明るくなり、左に動かすと暗くなる |
| Shadows(シャドウ) | 右に動かすと画像内の暗い部分が明るくなり、左に動かすと暗くなる |
今回は、それ以外に様々なエフェクトが使えるプラグインの「Filter / effects」についてまとめておきます。
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」をクリックすると、効果が適用された画像が、選択画像の上に追加されます。
元画像が残るので、自分で元画像をコピーして残しておく必要がありません。
エフェクトの詳細設定
エフェクトの名前部分をダブルクリックすると、そのエフェクトの詳細設定画面が表示されます。

プリセットの設定
よく使う効果の組み合わせや詳細設定は[Presets]タブに移動して「プリセット(Preset)」という形で保存しておけば、「Apply」ですぐに適用できます。
追加したい場合は「+」ボタンを押して追加できて、プリセット名をダブルクリックで詳細画面へ移動し、プリセットに追加するエフェクトを編集できます。

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



Figmaで文字色と背景色のコントラスト比をチェックするプラグイン「Contrast」
Figmaで画像からカラーパレットを生成するプラグイン「Image Palette」
Figmaの図形周りの基本操作|図形の作成方法から細かい設定項目まで
Figmaでプラグインを使わずに複数のレイヤー名を一括変更する方法
今から始めるUIデザインツールSketch入門 Sketchの特徴と使う理由
Figmaのバージョン管理機能を使って、デザインの変更点を管理する
Figmaのプロトタイプ機能の基本|作成したデザインに実際に画面遷移を設定する
Figmaで使っている色やフォントなどを一括変更する「Batch Styler」
Figmaでロゴやアイコンなどのビットマップ画像をベクターデータにトレースするプラグイン「Image tracer」
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
「とりあえず無料版!」ではなく、機能を知った上で判断したいMAMPとMAMP PROの比較
CSS Nite in Kobe, vol.51「すべての人がカメラを持つ時代の SNS映え・ウェブ映えする写真撮影テクニック と 写真撮影の基礎」に参加してきました
コーディング時に「アノテーションコメント」を使ってコードを見やすく管理する
HyperSwitchでアプリ・ウインドウ間の切り替えを素早く行う
mds?kernel_task?アクティビティモニタで表示されるパッと見なにか分からないプロセス名まとめ
時間に合わせてディスプレイの色温度を調節してくれるアプリ「f.lux」の導入方法
Macのホームディレクトリにある設定ファイルをDropboxで管理する
Visual Studio Codeでできる最低限のGit操作方法
文章を書くことだけに集中できる、高機能でシンプルなデザインのテキストエディタ「Ulysses」