1. はじめに
お疲れ様です。25卒クリエイターのみんみんと申します。
初めての記事投稿となりますが、よろしくお願いいたします。
最近の iOS／macOS UI で多用される「ガラス（Glass / Frosted Glass）」表現を、Figma の「Glass エフェクト」だけで再現します。
この記事では、私が実際に作成した「ワンパターンのサンプル」を例に、手順と調整ポイントをまとめました。
ただし、現状の制限としては、Glass エフェクトは Frame オブジェクトでしか有効化できません。
Auto‑layout 内の要素や単なる Rectangle には適用していません。
将来的には、他のレイヤーにも対応すると、幅広いデザインで活用できると思います。
2. 完成サンプル
| 主な設定 | iOS Control Center 風ミニ UI | 300 × 100 px / 角丸 50 px / 外枠 #FFF 20% |
|---|
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 を使ってみて、「あ、これだけでちゃんと雰囲気出るんだな」とちょっと感動しました。
難しいことをしなくても、見た目にしっかり変化が出るのはやっぱり嬉しいですね。
今後は、コンポーネント単位やベクターシェイプにも使えるか試してみたいと思っています。もう少し遊びの幅が広がりそうなので、次回の記事ではそのあたりを掘り下げてみます。
