ろぼいんブログ
AppleFigmaHowToデザインニュース

FigmaがiOS 26のLiquid Glassに対応　使い方は？

FigmaのGlassエフェクトの設定ウィンドウが右に表示されており、エフェクトが適用された透明の円形図形が左に表示されている
画像：Figma

Appleは、iOS 26で液体ガラス風のエフェクトの「Liquid Glass」を導入しました。

デザインツールとして知られるFigmaが、簡単にLiquid Glassを再現できるガラスエフェクトに対応しました。

広告

また、ガラスエフェクトの動作を学べるGlass effect playgroundや、iOS and iPadOS 26 UI Kitも公開されています。

FigmaでLiquid Glassを再現する方法

今回Figmaに追加されたガラスエフェクトを使うことで、iOS 26のLiquid Glassを再現できます。

なお、記事執筆時点でFigmaのガラスエフェクトはフレームにのみ適用できます。

  1. ガラスエフェクトを適用したいフレームを作成するか、既存のフレームを選択します

  2. フレームの背景色の不透明度を下げるか、背景色を削除します

    Figmaの中央に画像が表示されており、その画像の中央に正方形のフレームが表示されている。中央の正方形のフレームを選択した状態で背景色のカラーピッカーが表示されており、不透明度が0になっている

  3. ［エフェクト］から［ガラス］を選択します

    Figmaの中央に画像が表示されており、その画像の中央に正方形のフレームが表示されている。中央の正方形のフレームを選択した状態でエフェクトのドロップダウンメニューが表示されており、その中で［ガラス］が選択されている

  4. エフェクトの設定からパラメーターを調整します

    • ライト
      • 角度：光の当たる角度を調整します
      • 強度：光の強さを調整します。数値を上げると、フレームの端が明るくなります
    • 屈折：数値を上げるとガラス部分の屈折率が上がり、フレームの端における背景のゆがみが大きくなります
    • 奥行き：ガラスの厚みを調整します。数値を上げるとフレームの端における背景のゆがみが大きくなります
    • 散布度：数値を上げると、フレームの端における背景のゆがみ部分での色のにじみが大きくなります
    • フロスト：数値を上げると、すりガラス風になります
    Figmaの中央に画像が表示されており、その画像の中央に正方形のフレームが表示されている。中央の正方形のフレームを選択した状態でガラスエフェクトの設定が表示されている

記事をシェア

Xに共有するBlueskyに共有するMisskeyに共有するLINEに共有するThreadsに共有する

フォローして最新情報を入手

Googleの優先ソースに追加すると、このサイトの記事をGoogleで見つけやすくなります。また、ぜひXやRSSフィードもフォローしてください。

Googleの優先ソースとして追加するGoogleの優先ソースとして追加するXのロゴ
広告
著者のアイコン画像
ろぼいん
XMisskeyGitHubQiita

生まれた時から、母国語よりも先にJavaScriptを使っていました。ネットの海のどこにもいなくてどこにでもいます。

Webフロントエンドプログラマーとして、TypeScriptを用いたWebアプリやブラウザー拡張機能を制作。Xのシャドウバン検知ツール「Shadowban Scanner」やリンクカード復活ツール「Restore Link Card」を公開し、国内外のメディアで紹介されました。iGEM 2023ではJapan-UnitedチームのWikiを制作してGrand Prizeの獲得に貢献。ブログではXやSNSの最新ニュース、不具合の検証と対処法、フロントエンド開発の知見を発信しています。