Figmaに新しく搭載された「ガラス（Glass）」エフェクト（現在ベータ版）。
まるで本物のガラスのように光を屈折させ、UIデザインに深みと高級感を与えてくれる注目の機能です。
以前紹介した以下記事の効果が公式に実装されました。
この記事では、Figma公式が提供するプレイグラウンドファイルを和訳して、
ガラスエフェクトの使い方を操作GIF画像を交えて分かりやすく解説します。
「Figmaの最新機能をいち早く試したい」「英文を和訳しながら作業するのは手間」という方は、
ぜひ本記事を参考に、ダイナミックなガラス表現をマスターしましょう。
Figmaのガラスエフェクトとは？
Figmaのガラスエフェクトは、オブジェクトにガラスのような質感を与える新しい機能です。
レイヤーの背後にある要素をぼかしたり、光の当たり方によって歪ませたりすることで、リアルな半透明表現を生み出します。
まずは、ガラスエフェクトの基本的な特徴を3つ押さえておきましょう。
- フレームに適用するエフェクト:
ガラスは、下にあるレイヤーの見え方を変化させるラスターエフェクトの一種で、
フレームオブジェクトにのみ適用できます。 - Apple製品で知られるスタイル:
このようなガラス調のUIは、AppleがiOSなどで採用したことで広く知られるようになりました。
Figmaの公式iOS & iPadOS UI Kitでも活用されています。 - ベータ版としての提供:
ガラスエフェクトは現在ベータ版であり、今後も機能改善が予定されています。
ガラスの概要
- デザインモードで利用可能:
Figmaのデザインモードが使えるすべての製品（Figma Design, FigJamのDrawモードなど）で
利用可能です。 - ガラスはフレームにのみ適用可能:
ガラス効果を使用するには、フレームにのみ適用できます。
シェイプやテキストに直接設定することはできません。 - エフェクトパネルで設定:
フレームを選択した状態で、右側のデザインパネルから「エフェクト」を追加し、
ドロップダウンメニューから「ガラス」を選択します。
ガラスエフェクトの設定
ガラスエフェクトには、質感を細かく調整するための5つのパラメーターがあります。それぞれの効果を理解し、組み合わせることで理想の表現を目指しましょう。
- ライト (Light):
ガラスに当たる光の角度と強さを調整します。
フレームの縁に現れるハイライトの位置が変わります。 - 屈折 (Refraction):
ガラスの縁で光がどれだけ曲がるかを制御します。
値が高いほど、背景の歪みが大きくなります。
- 奥行き (Depth):
ガラスの厚みを表現し、フレームの縁を際立たせます。 - 分散 (Dispersion):
光の分散を表現し、ガラスの縁にわずかな色収差（虹色のにじみ）を加えます。
屈折と組み合わせることで、よりリアルな表現になります。 - フロスト (Frost):
すりガラスのような「ぼかし」の強さを調整します。
背景が複雑な場合でも、この数値を上げることで要素の視認性を高め、
コントラストを確保できます。
UIデザインにおけるガラス表現
ガラスエフェクトの追加
まずは、フレームにガラスエフェクトを適用してみましょう。
- フレームを選択します。
- エフェクトの「+」アイコンを押し、ドロップダウンから「ガラス」を選択します。
- フレームを動かして、背景の見え方がどう変化するか確認してみましょう。
ガラスエフェクトの調整
次に、背景との関係性を意識しながら、UIが引き立つように各パラメーターを調整します。
- メニューコンポーネントを選択します。
- エフェクト設定のアイコンをクリックして、調整パネルを開きます。
- 「ライト」「屈折」「奥行き」「分散」「フロスト」の各スライダーを動かし、背景オブジェクトへの影響を確認してみましょう。コンポーネントを背景の上で動かすと、エフェクトの効果がリアルタイムに変化する様子がよく分かります。
プロトタイプでの活用法
デザインしたガラスUIは、プロトタイプで実際に動かしてみることで、
その魅力をより深く理解できます。
スクロールするUIでのプレビュー
他のUI要素の上に重なるメニューバーなどにガラスエフェクトを適用し、
プロトタイプで動作を確認します。
試してみましょう
- メニューのコンポーネントを選択し、ガラスエフェクトの「フロスト」の値を0から25%に上げます。
- 同じフレームに白（#FFFFFF）の塗りつぶし色を追加します。これにより、背景とのコントラストが生まれ、UIのアクセシビリティ（見やすさ）が向上します。
- エフェクトパネルからドロップシャドウを追加し、立体感を加えます。
プロトタイプをプレビュー
iPhoneフレームを選択し、Shift + Spaceキーでプロトタイプをプレビューします。スクロールした際に、メニューバーがコンテンツの上を滑らかに通過していく様子を確認できます。
Shift + Spaceキーでプレビュー動画とブレンドモードを組み合わせる
ガラスエフェクトと描画モード（ブレンドモード）を組み合わせることで、ユニークな表現が可能です。背景にアニメーション動画を配置すると、その効果はさらに際立ちます。
試してみましょう
- UIコンポーネント内の各アイコンの不透明度を30%に設定します。
- アピアランスパネルで、描画モードを「パススルー」から「プラス（明るく）（Add）」に変更します。これにより、アイコンが背景のアニメーション動画の色と混ざり合い、明るく発色するようになります。
プレビューで確認
iPhoneフレームを選択し、Shift + Spaceキーでプレビューします。背景のアニメーションの変化に合わせて、アイコンの色がインタラクティブに変わる様子が見て取れます。
スマートアニメートとの連携
ガラスエフェクトは、状態が変化する際のアニメーションにも対応しています。「スマートアニメート」機能と組み合わせることで、滑らかなインタラクションを実現できます。
ステップ・バイ・ステップ
- 変化前と変化後の両方のUIフレームの検索バーに、ガラスエフェクトを追加します。
- プロトタイプモードで、検索バーをタップした際に変化後のフレームに移動するよう設定し、アニメーションを「スマートアニメート」にします。
プレビューで確認
iPhoneフレームを選択し、Shift + Spaceキーでプレビューします。検索バーをタップしたときに、ガラスの質感が滑らかに変化するアニメーションを確認できます。
グラフィック作成への応用
ガラスエフェクトはUIデザインだけでなく、よりクリエイティブなグラフィックアセットの作成にも活用できます。水滴やシャボン玉、あるいは独創的なオブジェクトの作成にも挑戦してみましょう。
活用法の紹介
現実世界のオブジェクトを再現したり、フレーム上でガラス効果をいじって、様式化されたグラフィックアセットを作成してみましょう。
ガラスのスノードーム
ここでは応用例として、スノードームのガラス部分を作成する手順を紹介します。
- ガラス部分になる円形のフレームを選択します。
- そのフレームを、右側にあるスノードームのイラストの上にドラッグして重ねてください。
- ガラスの「奥行き」パラメーターを100%に調整し、ガラスの厚みを表現します。
- さらに、「屈折」や「フロスト」などのパラメーターや、フレーム自体の色や不透明度を調整して、オリジナルのスノードームを完成させましょう。
使用上の注意点と制限事項
ガラスエフェクトは現在ベータ版のため、いくつかの制限事項があります。
- フレームのみ対応:
エフェクトを適用できるのはフレームのみです。 - 角丸は均一に設定が必要:
角ごとに異なる半径の角丸が設定されたフレームには、エフェクトが正しく適用されません。
すべての角の半径を同じ値に揃える必要があります。
- ガラス効果の重ねがけは不可:
ガラス効果を適用したフレーム同士を重ねても、奥のガラスは手前のガラスに影響を与えません。 - SVG形式での書き出しは不可:
ガラスエフェクトはラスター効果のため、ベクター形式であるSVGでの書き出しには対応していません。PNGなどの画像形式で書き出してください。 - Figma Sitesでの制限:
現状、Figma Sitesでは完全にはサポートされておらず、公開時にエラーが発生する可能性があります。
- 環境反射（リフレクション）は未対応:
周囲のオブジェクトがガラス面に映り込むような表現はできません。 - パフォーマンスへの影響:
ガラスエフェクトは計算処理が複雑なため、マシンのスペックやデザインの複雑さによっては、Figmaの動作が重くなる可能性があります。
公式リソース
Figmaのガラスエフェクトについて、さらに深く学ぶための公式リソースも活用しましょう。
- Figma Help Center: ガラスエフェクトに関する詳細な公式ドキュメント（英語）。
https://help.figma.com/hc/en-us/articles/360041488473-Apply-effects-to-layers - Official Figma iOS 26 UI Kit: FigmaとAppleが共同開発したUIキット。実際の適用例を学ぶのに最適です。
https://www.figma.com/@apple - Apple’s developer documentation on Liquid Glass: より技術的な詳細を知りたい方向けのApple公式開発者ドキュメント。
https://developer.apple.com/documentation/technologyoverviews/liquid-glass - Glass effect playground（公式プレイグラウンドファイル）
https://www.figma.com/community/file/1522715486231239473
まとめ
Figmaの新機能「ガラスエフェクト」は、あなたのデザインに新たな次元をもたらす強力なツールです。この記事を参考に、ぜひ様々な表現に挑戦し、ユーザーを魅了するUIを作成してみてください。
h.koyama
2025.07.23 更新この記事を共有する
この記事を共有する
Pinterest
で保存するLINE
で共有するX
で共有するこのページのURLをコピー
https://kasoudesign.com/knowledge/effect-glass/
Close