Figma でつくる「ガラスエフェクト」

1. はじめに

お疲れ様です。25卒クリエイターのみんみんと申します。
初めての記事投稿となりますが、よろしくお願いいたします。

最近の iOS／macOS UI で多用される「ガラス（Glass / Frosted Glass）」表現を、Figma の「Glass エフェクト」だけで再現します。
この記事では、私が実際に作成した「ワンパターンのサンプル」を例に、手順と調整ポイントをまとめました。

ただし、現状の制限としては、Glass エフェクトは Frame オブジェクトでしか有効化できません。
Auto‑layout 内の要素や単なる Rectangle には適用していません。
将来的には、他のレイヤーにも対応すると、幅広いデザインで活用できると思います。

2. 完成サンプル

3. 手順

1. Frame を作成

F キーで描画 → ⌘ + ⌥ + G で Frame 化

2. サイズ・角丸を設定

300×100 px / Corner Radius 50 px

3. Fill を追加（薄い白）

#FFFFFF / 10 %

4. Effect → Glass に変更

既定の Drop Shadow をクリック → Glass を選択

5. 5つのスライダーを調整

• Light Angle / Intensity　-30° / 80 %　光源方向 & 強度
• Refraction　40　屈折量（透明度感）
• Depth　75　ガラス板の厚み感
• Scatter　70　光の拡散・にじみ
• Frost　63　ぼかし（高いほどすりガラス）

6. テキストを載せる

文字色 #FFFFFF、必要に応じてドロシャド 1 px #000 / 25%

4. まとめ・改善アイデア

Frame + Glass を使ってみて、「あ、これだけでちゃんと雰囲気出るんだな」とちょっと感動しました。
難しいことをしなくても、見た目にしっかり変化が出るのはやっぱり嬉しいですね。

今後は、コンポーネント単位やベクターシェイプにも使えるか試してみたいと思っています。もう少し遊びの幅が広がりそうなので、次回の記事ではそのあたりを掘り下げてみます。