こんにちは、ぬいぬい(@opitech_web)です！
近年トレンドのデザイン手法「ニューモーフィズム（Neumorphism）」。
「ニューモーフィズム（Neumorphism）」とは、要素が背景から押し出されている、または、凹んでいるように見えるデザイン手法のことを指します。
シンプルだけど立体的なデザインは、洗練された美しい印象を、見る側に与えてくれるので
特にカードデザインや、アイコンデザインの時には使用することが多々！
今回は、そんなニューモーフィズムデザインがFigmaで簡単にできてしまう、
プラグイン「Neumorphism」をご紹介します！
ぬいぬいまずは、CSSで作成するときによく使用している有名ツールをご紹介します！
Neumorphism.io
■Neumorphism.io
CSSコードで作成するときは、よく「Neumorphism.io」にお世話になっております。
「Neumorphism.io」は、直感的にスライダーで凹凸感やバランスを調節して
CSSコードを作成できる無料のWEBツール。
作成したデザインのCSSコードは簡単にコピーできるようになっているので、
そのまま貼り付けるだけで、ニューモーフィズムデザインを簡単に再現できてしまう
有難いツールです…！！（大感謝）
Figmaのプラグイン「Neumorphism」
CSSでは上記ツール等を利用して、割かし簡単に
ニューモーフィズムを取り入れることが出来ることが分かりましたが…
FigmaでWebデザイン制作をしている際に、
「はて、どうやってニューモーフィズムを作成するか？」
と思った方、多いのではないでしょうか？（私もその一人です）
そこで行き着いた方法が、「Neumorphism」プラグインを使用する方法です！
ぬいぬいインストール方法から順に紹介します
インストール方法
インストール方法はどちらでも可能です◎
①Figmaコミュニティで検索してインストール
②下記URLをクリック
→「open in」から使用したいFigmaページを開き、「Run」をクリック
で使用することができます。
■プラグインURL：https://www.figma.com/community/plugin/810863251895788520/neumorphism
Figmaで使用してみる
①まずは、要素を準備
背景と、ニューモーフィズムデザインとする予定の要素を準備します。
（作例では、背景をフレームで、要素を四角形で作成しました。
分かりやすいように、この画像では背景と要素の色を変えていますが、色が近い方がより立体的・シンプルさがでますよ！）
②プラグインを起動して、要素を指定する
プラグイン＞「Neumorphism」を起動して、
要素を選択した状態で、「Neumorph’ it！」をクリック！
すると…
ワンクリックで、ニューモーフィズムデザインになりました！
③好みで各種調整
プラグインでは、以下の部分をお好みで調整可能◎
- Elevation：背景の距離
- Intensity：影の濃さ
- Shape:凹凸の形
- Light source：光の角度
以上で完成です！思った以上に簡単にできました！
凹凸の形も簡単に調整できるので、
今後ON/OFFなどの表現に、凹凸感を使って出すのにもかなり使えそうです。
まとめ
デザイン制作の際に、自分で計算しながらshadowを作る必要はもうない…！
Figmaユーザーの方で、ニューモーフィズムデザインを使用してみたい方には、
是非利用してほしいプラグインです。
