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

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

「Morph」プラグインで作れるエフェクトは以下の通りです。

• Skeuo（スキューモーフィズム）：立体的な質感のエフェクト

• Neon（ネオン）：ネオンライトのようなエフェクト

• Glitch（グリッチ）：バグって壊れたようなエフェクト

• Reflect（反射）：床に反射したようなエフェクト

• Glassy（ガラス）：ガラスのような質感のエフェクト

• Gradient（グラデーション）：単色の濃淡や色の混ざったグラデーションのエフェクト

この記事のターゲット

• Figmaの初心者

• Figmaで簡単にハイクオリティなエフェクトを適用したい方

• Figmaでシャドウやグラデーションを手軽に適用したい方

1. 「Morph」プラグインをインストールする

Figma Communityの「Morph」ページから無料でインストールできます。

インストールの方法がわからない方は、以下の記事でも紹介しているので参考にしてください。

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

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

2. ファイルを開いてベクターオブジェクトを用意する

Figmaを開いてファイルを新しく作成し、エフェクトを適用したいベクターオブジェクトを用意します。

今回は、わかりやすいように正円、三角形、星形、文字のベクターオブジェクトを複合パスに変換（Flatten）して、一つのオブジェクトにして色々適用したいと思います。

3. ベクターオブジェクトにエフェクトを適用する

用意したベクターオブジェクトに対して、Morphのエフェクトを適用していきます。

やり方は以下の通りです。

1. 右クリックメニューのPluginから「Morph」を選択

2. 「Morph」のメニューから適用したいエフェクトを選択（例ではSkeuo）

3. 表示されたポップアップの設定でエフェクトを調節する

非常に簡単にエフェクトが適用できましたね。

以下では、エフェクトごとにどんなことができるか紹介していきます。

Skeuo（スキューモーフィズム）

スキューモーフィズムとは、木や紙といった、実世界に存在する質感を再現した表現技法を指す造語です。

設定できる項目は以下の通りです。

• Intensity：エフェクトの強さ

• Light direction：光の方向（影の方向）

• Surface：面の立体感

Neon（ネオン）

ネオンは、蛍光色のネオンライトのようなエフェクトが再現できます。

設定できる項目は以下の通りです。

• Intensity：エフェクトの強さ

• Color Swatches：適用できる色の変更

• Without Background：背景色の有無

Glitch（グリッチ）

グリッチは、ゲーム画面がバグった時のような、グラフィックが壊れたような表現のエフェクトです。

設定できる項目は以下の通りです。

• Offset：二重に重なる効果の強さ

• Glitch Amount：崩れたようなエフェクトの強さ

• Color Combo：二重に重なる効果の色の組み合わせ

Reflect（反射）

反射は、床や壁などに実像が反射して映ったようなエフェクトです。

設定できる項目は以下の通りです。

• Direction：反射する方向

• Roughness：反射する面のぼかし具合

• Distance：実像と反射像の距離

Glassy（ガラス）

ガラスは、透けたガラスのような清涼感のある質感のエフェクトです。

設定できる項目は以下の通りです。

• Bluriness：背景に対するぼかし具合

• Opacity：背景に対する透過度

• Edge Surface：面の形状ごとの質感

Gradient（グラデーション）

グラデーションは、単色の明暗を濃淡変化させたり、複数の色を二次元領域にグラデーション表現ができるエフェクトです。

設定できる項目は以下の通りです。

• Gradient Harmony：グラデーションの種類

• Color Palette：設定された色（shuffleコマンドで色をランダムに変更可能）

• Position：グラデーションの位置

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

これだけリッチでハイクオリティのエフェクトが簡単に量産できて、しかも無料で利用できるのは本当にありがたいですね。

グラフィックのパターン出しでいろんな効果を試して発散してみたり、色々な使い方ができると思うのでぜひ試してみてください。

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

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

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

Figmaで角丸を使った便利なテクニック集

今回は、Figmaでシェイプやパスに角丸を適用するテクニックを紹介します。シェイプに角丸を適用することで、丸っこいUIやグラフィックを実現できるため、柔らかさ・滑らかさを演出することに役立ちます。 ... 続きを読む

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

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

Figmaでマスクを適用・解除する方法

今回はFigmaでマスクを適用・解除する方法を解説します。Figmaのマスクは、Adobe Illustratorのクリッピングマスクのように、画像やベクターデータを組み合わせたオブジェクトをマスクで任意の形に切り抜くことができる機能になります。 ... 続きを読む