透明なガラスに“液体っぽさ”を感じさせる質感デザインで、単なる「透けガラス」よりも、とろっとした奥行きや光の揺らぎを足した感じがとっても綺麗ですね☺️

グラスモーフィズムの次に来るトレンドとして注目されているようです。
グラスモーフィズムも半透明の透け感やレイヤー感のあるデザインでしたが、より質感、存在感があり綺麗だなーと思いました☺️
スキューモーフィズムを思い出してエモい感じも良いです☺️

今日はAppleの歴史を振り返り懐かしみつつ、Figmaで使えるエフェクトについて書いてみたいと思います✍️

• 🍏 Appleの歴史からデザインを振り返ってみる！

常にデザインの最先端を走るAppleのデザインを歴史から振り返ってみました。

【Appleデザインの変遷 年表と特徴】

📱スキューモーフィズム（2007〜2012）

iPhone初期〜iOS6
本物そっくりの質感や立体感（革のカレンダー、木目の本棚など）
「現実をデジタルに持ち込む」ことで直感的に使えるUI

🎨フラットデザイン（2013〜2019）
iOS7登場以降
グラデや質感を捨てて、色面＋アイコンで構成
シンプル＆ミニマル。情報をすっきり見せるのが特徴

💡ニューモーフィズム（2020頃〜）
デザイントレンドとして浮上
やわらかい光と影で“ふわっと浮いて見える”
ボタンやカードが背景からなめらかに浮き上がる演出

🪟現在：グラスモーフィズム（2020〜）
iOSやmacOSでも採用
透過ガラス風で、背景がぼんやり見える
透明感と奥行きを演出し、未来的な雰囲気をつくる

💧リキッドグラス（Liquid Glass）（2025〜）
最新トレンドとして登場！！
ガラスの透明感＋液体のようなゆらめきを表現
光の分散や屈折を加え、よりリアルで有機的なUI体験を目指す

時代と共にAppleがあるって感じですね😭

FigmaでLiquid Glassデザインに挑戦！

きっと今後デザインのトレンドとなるであろうLiquid Glass、試してみたいですね！Figmaではすでに公式からeffectが追加されているので、試してみました👀🙏✨

https://www.figma.com/community/file/1522715486231239473

使い方は、簡単です。#フレームに対して、右側のサイドバーの「エフェクト」パネルの下側「ガラス」を選択することでエフェクトを適用することができます。

エフェクトを適用するだけで、簡単にLiquid Glassのような見た目に変身します。凄すぎて感動レベル😭✨

エフェクトを使いこなす！細かく設定できるパラメータ

いろんなパラメータも用意されているので、自分の好みに調整して使うことができます。色々試してみたいですね☺️

エフェクト利用における注意点

便利ですが、まだまだベータ版ということで注意点もあるみたい。
下記のことには注意してエフェクトを利用する方が良さそうです。

そして、何より注意したいのが、
”実装で再現するのは難しい”
せっかく丁寧にデザインしても今のところは、実装で再現するには難易度がかなり高いようです。今後エンジニアさん達がいろんな実装方法を考えてくれることにに期待です🫶

さっそくLiquid Glassエフェクトで遊んでみた！

画像で使う分には実装関係ないので、自由にこのエフェクトを使うことができますね！UI以外でも色々と遊べそうです。
実際のデザインの現場で綺麗なLiquid Glassを使ってみたいなと思います☺️✨

虫眼鏡にして遊んでみた

窓ガラスにして遊んでみた

Liquid GlassはUIを未来的に美しく見せるだけじゃなく、ちょっと遊ぶだけでもワクワクできるデザイン手法です。
ぜひFigmaで触ってみて、「液体のガラス感」を体験してみてください〜☺️