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

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

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

Webrandum

Figmaの画像周りの基本操作｜画像の追加方法や色補正、切り抜き方法まで

https://webrandum.net/figma-image

今回はFigmaの画像関連の操作についてまとめておきます。画像配置の基本画像を配置する方法は下記の3つあります。 ドラッグアンドドロップで追加 画像ツール（shift + command + K）で追加 画像ツールで図形マスクをする形で追加 Fillに画像を設定他のデザインツールの場合は、画像の追加方法によってふるまいが変わることもありますが、Figmaの場合は現状どんな方法を使っても同じ振る舞いになるので、やりやすい方法でOKです。ドラッグアンドドロップで追加まずは画像をFinderなどから直接ドラッグアンドドロップで追加する方法です...

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

Filter / effects

Figma

Figma

https://www.figma.com/community/plugin/792025380269016893/Filter-/-effects

Explore, install, use, and remix thousands of templates, plugins, and widgets published to the Figma Community by designers and developers.

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

基本的な使い方

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

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

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

エフェクトの詳細設定

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

プリセットの設定

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

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

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