Figmaのプラグイン「Liquid Glass」。

Appleの新デザイン、Liquid Glass風エフェクト機能。

Liquid Glass風エフェクト。

Appleデバイスの新しいUIデザインとなる「Liquid Glass」。

Windows Vistaの再来となるか、新しいトレンドとなるかが試される。

Figmeのリキッドグラス用プラグイン。

Figme Communityに、Liquid Glass風のエフェクトをかけられるプラグインが、いくつかアップされている。

Liquid Glass | Figma

参照元：Liquid Glass | Figma
作者：Square One
作者：Dylan de Heer

Liquid Glassエフェクト機能の使用感。

スライダー操作でエフェクト処理が可能。

長方形や角丸は、Figmaデフォルトのデザインパネルから作成できるので、その後にLiquid Glassプラグインを使用する。

使い方はシンプルで、Liquid Glassプラグインのパネルで、スライダーで調整ができる。

Liquid Glassエフェクトの主な機能。

• Brightness（明度）
• Diffusion（拡散、広がり）
• Refraction（屈折）

良い感じになったら、Apply（適用）でエフェクト処理を実行する。

細かな調整はFigmaのデザインパネルからも。

エフェクト類はデザインパネルにも表示されるので、細部はあとからでも調整可能。

（※スクショはダークモードでのもの。）
（※バージョンアップなどで画面のデザインが変わっていることがあります。）

デフォルトではこのような感じに。

Liquid Glassプラグインのデフォルトでは下記のような感じとなる。

（※テキスト部分はノーマル。）

Figmaのプラグイン「Liquid Glass Effect」。

Liquid Glass Effect。リキッドグラスへの効果。

Liquid Glass風エフェクト。

Liquid Glass Effect | Figma

参照元：Liquid Glass Effect | Figma
作者：Sedat Çakır

Liquid Glass Effectの使用感。

Photoshopのような、細かな処理が可能。

Liquid Glass Effectはより、Photoshopのような効果が適用できる。

そもそもFigmaはPhotoshopなどのソフトを意識し、デザインをブラウザベースで行え、共同編集も可能になるように開発されたツール。

という経緯もあり、このプラグインはよりPhotoshopに近い機能があるように感じる。

Liquid Glass Effectの主な機能。

Fill Properties (塗りのプロパティ)

• Fill Color: 塗りの色
• Opacity: 不透明度
• Corner Radius: 角の丸み
• Blend Mode: 描画モード

Effects (エフェクト)

• Background Blur (背景のぼかし)
• Inner Shadows (シャドウ(内側)
  • Position X: X座標 (影の水平位置)
  • Position Y: Y座標 (影の垂直位置)
  • Blur: ぼかし
  • Spread: 広がり (影の大きさ)
  • Color: 色
  • Opacity: 不透明度
  • Blend Mode: 描画モード

デフォルトではこのような感じに。

Liquid Glass Effectプラグインのデフォルトでは下記のような感じで、Liquid Glassプラグインとは違ったエフェクトとなった。

（※テキスト部分はノーマル。）

以上、参考になれば幸いです。

※Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いているので「です・ます調」ではありません。（元々はメモ書きでした。） ※事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 ※写真は主にUnsplashやPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、もしくは自前のものを使用しております。

Figma 関連メモ。

使い方 & プラグインなど。

• FigmaのWebサイトデザイン画面の表示方法。画面が見つからないとき。
• Figmaの画像書き出し方法。PNGとJPG、WebPの違いと、画質やサイズの目安。
• Figmaでマスク作成。マスクができないときや解除の仕方。
• UI3 Figma Slidesの使い方やテンプレートの基本。シンプル版。
• UI3。Figmaの新しいUIで、Webやスライド、UI/UXをデザイン。
• Figmaで使える日本語フリーフォント一覧。商用利用も無料。
• Figmaでぼかしをかける方法。写真にぼかしを入れたいとき。
• Figmaのカラーパレットプラグインの使い方と、70:25:5の配色法則。
• Figmaの使い方が変わる？RGB入稿で印刷可能な時代に。

• Figmaでアウトライン化、フラット化をする方法と注意点。
• Figmaのツールバーやサイドバーが消えてしまったときの対応。
• Figmaのカーニング、文字詰めのショートカットの使い方。
• FigmaからCMYKでエクスポート。画像軽量化プラグイン「TinyImage Compressor」の使い方。
• FigmaとAI Genius。レイアウト作成、UI/UXデザインを一緒に。
• FigmaからWebPで書き出しす方法。Olive Pressの使い方
• Figma プラグインを削除する方法。追加も削除もシンプルに。
• Figmaがもし有料化されたら。Next Figmaのデザインツール。Pixso。
• Figma 削除したファイルを復元したいとき。復元の方法。
• Material SymbolsをFigmaへ。インストールしてすぐに使える。

• Figmaのルーラー（定規）の出し方。表示方法がイラレとちょっと違う！
• Figmaの背景切り抜き方法。ペンツールの使い方とプラグイン。
• Figmaで名刺を作ってみた結果。作成・入稿・仕上がりまで。
• Figmaを日本語化。言語切り替えの使い方。再起動も不要。
• Figmaで検索・置換する方法。ショートカットからでOK。
• Figmaでモザイクをかける方法。Pixelsでさらっと簡単に。
• Figmaの印刷データ用プラグイン「Print for Figma」の使い方。
• Figmaで名刺印刷。グラフィックで実際に発注、PDF入稿してみた手順。
• Figmaで名刺を作る方法。印刷用設定からCMYK化、入稿前の仕上げまで。
• Figmaがダークモードに対応。背景色設定も簡単、目に優しい！