新しいデザインによるAppKitアプリの作成

新しいデザインによるAppKitアプリの作成

AppKitアプリをアップデートして、新しいデザインシステムを最大限に活用しましょう。タブビュー、スプリットビュー、バー、プレゼンテーション、検索、コントロールなどの重要な変更について詳しく説明し、カスタムUIでLiquid Glassをどのように使用するかのデモを行います。このビデオの内容を十分理解できるよう、まず一般的なデザインガイダンスとして「Get to know the new design system」を視聴することをおすすめします。

関連する章
- 0:00 - Introduction
- 1:23 - App structure
- 9:27 - Scroll edge effect
- 11:10 - Controls
- 17:30 - Glass
- 21:30 - Next steps
リソース
関連ビデオ

WWDC25
- 新しいデザインシステムの理解
- Liquid Glassの紹介
AppleのFrameworks Engineering ManagerのJeff Nadeauです本セッションは「Build an AppKit app with the new design」です macOSの新しいデザインは Macアプリの外観と雰囲気の共通基盤となりシステム全体にフレッシュな素材とコントロールをもたらしますこの新デザインの核となるのは Liquid Glass素材ですそれは光を反射して屈折させる半透明のサーフェスでありユーザーインターフェイスに奥行きとダイナミズムを与えます AppKitにはこの新デザインの導入に必要な機能がすべて揃っています本セッションではフレームワークの重要な変更点について確認し macOS Tahoeで想定される動作の概要を説明した後新デザインの導入方法を細かく調整する際に利用できる新しいAPIをご紹介します重要な変更点を順番に説明していきますがまずはアプリの基本的な構造上のコンポーネントから始めます次にスクロールエッジエフェクトを紹介しますがこれは端から端まで表示されるスクロールコンテンツの上での読みやすさを向上させるエフェクトです新デザインではコントロールの外観とレイアウトも大きく変更されます最後に Liquid Glass素材について詳しく解説しその仕組みとそのデザインをカスタムUI要素に取り入れる際に使用できる AppKit APIをご紹介しますまずはアプリの構造です新しいデザインシステムは Macのウインドウの外観を変革しますウインドウの形状を変更し構造上の主な領域をガラスで枠付けしますそれらの領域の1つがツールバーです新しいデザインシステムではツールバーの要素はガラス素材の上に重ねられツールバー全体がコンテンツの上に浮いているように見えるのでウインドウ内の階層構造を印象付けることができますまたガラスデザインではコントロールが論理的グループにまとめられますグループは各々固有のアクションに基づいてまとめられるもので AppKitは複数のツールバーボタンを 1枚のガラスに自動的にまとめます異なるタイプのコントロールは各々のガラス要素に分割されますセグメントコントロール、ポップアップボタン、検索コントロールといった感じです AppKitは各項目のコントロールビューのタイプに基づいてどのようにグループ化するか自動的に判断しますこの自動での動作を変更するには NSToolbarItemGroupを使用して項目をグループ化するかスペーサを挿入して項目を分離します Liquid Glass素材は適応性に優れておりコンテキストに応じてインテリジェントに反応し背景のコンテンツの明るさに合わせて外観を変更しますツールバーのガラスはスクロールしたコンテンツが特に明るいか暗い場合ライト／ダークの外観も切り替えますこの外観の変更は NSAppearanceのシステムを使用してツールバーのコンテンツに伝達されるのでダークモードをサポートするために行った作業はここにも適用されます NSToolbarはすべてのツールバー項目の背景にガラス素材を自動配置しますしかしすべての項目をガラスの上に配置すべきではありませんカスタムタイトルや状態の表示などの操作不能の項目ではガラス素材の使用は避けましょう
この写真アプリのツールバーの情報テキストがよい例ですガラス素材の背景によりボタンのように見えてしまいますガラス素材を除去するには NSToolbarItemで isBorderedプロパティをfalseに設定しますだいぶよくなりました
ツールバーの他の項目に適したもう1つの便利なガラス素材の機能は色付けです NSToolbarItemの新しいstyleプロパティを使用して prominentスタイルを指定します prominentスタイルはディスプレイに最適なアクセントカラーでガラスに色を付けます状態の表示や重要なアクションの強調に使うのに最適な機能です prominentを指定したツールバー項目の外観をさらにカスタマイズするには backgroundTintColorプロパティを使用してガラスに使う特定の色を選択しますツールバー項目に注意を引きつけるもう1つの方法はバッジです NSItemBadge APIを使うとツールバー項目から新規または保留中のコンテンツに移動できることを示せます例えばバッジを使って未読メッセージの数を表示したり新しい通知の受信を知らせたりできますガラスのツールバーの説明は以上で次はウインドウのメインコンテンツですメインコンテンツは通常分割ビューを使って整理します新デザインではサイドバーはウインドウのコンテンツの上に浮かぶガラスのペインとして表示されます一方インスペクタは端から端までガラスで覆われコンテンツと並べて配置されますアプリでこの効果を利用するには NSSplitViewControllerを使用しますサイドバーやインスペクタの動作で項目間を分割する場合 AppKitは適切なガラス素材を各項目に自動的に適用しますサイドバーをガラスの上に配置したので従来のサイドバーの素材は不要になりましたサイドバー内の素材を表示するために NSVisualEffectViewを使用している場合ガラス素材でコンテンツが透けて見えるのを妨げますこれらの視覚効果ビューはビュー階層から削除する必要があります
サイドバーのガラスはウインドウの上に浮いているように見えるので隣接する分割領域のコンテンツの上に表示できますこれがうまく機能するのは水平スクロールコンテンツやスライドするとスワイプアクションが表示される項目の一覧表示マップや映画のポスターなどサイドバーの領域にまで及ぶリッチコンテンツなどです分割コンテンツをサイドバーの下に表示するには automaticallyAdjustSafeAreaInsets プロパティをtrueに設定しますこれを設定する対象はサイドバーの下に拡張したいコンテンツですサイドバー自体ではありませんこのプロパティがtrueの場合 NSSplitViewはそのアイテムのフレームをサイドバーの下に拡張した上でセーフエリアのレイアウトガイドを適用しコンテンツを隠されない領域に配置しやすいようにします写真やアートワークなどのリッチコンテンツでは浮かぶガラス素材のサイドバーの価値がよくわかりますがこの効果を利用するためにコンテンツの一部が隠れるようにするのは通常望ましくありませんこのApp Store用ポスターは端から端まで表示すると印象的な効果を生み出しますがアートワークには元々サイドバーのサイズに見合った無駄な領域は含まれていませんサイドバーを非表示にすると何が実際に問題なのかわかりますアートワークの一部を隠すのではなくコンテンツがミラーリングされてぼかされ画像自体を拡張しています AppKitにはこのエフェクトを提供する新しいAPIがあります
NSBackgroundExtensionViewですこのビューではセーフエリアを使用してコンテンツをビュー内の隠れていない場所に配置するとともにビジュアルエフェクトを適用して画像自体を端から端まで拡張します実際に使用するには NSBackgroundExtensionViewを作成し分割された項目のフレーム全体を埋めるように配置しますそれにContentViewを割り当てるとフローティングサイドバーを避けるようにセーフエリアに配置されますこれで完了です BackgroundExtensionViewはコンテンツビューのレプリカを自動的に作成してセーフエリアの外のスペースを埋めますフローティングサイドバーとツールバーには新デザインの重要な要素である同心性が反映されていますこれらの要素はそれぞれコンテナ（ここではウインドウ）の角の半径にすっきり収まる曲率でデザインされていますそしてこの関係は双方向的です新しいデザインシステムでは角の半径はより緩やかでゆとりがあります角の半径はウインドウのスタイルによって様々ですツールバーのあるウインドウはより半径が大きくなりガラスのツールバー要素を同心的に囲むようにデザインされておりツールバーのサイズに応じ拡大／縮小しますタイトルバーのみのウインドウの角の半径はより小さくウインドウコントロールをコンパクトに囲みます大きな角はウインドウにソフトな印象とエレガントな同心性をもたらしますがウインドウの端に近いコンテンツが切れてしまう場合もありますコンテンツを角に適切に収めるには新しいNSView.LayoutRegion APIを使いますレイアウト領域はビューのエリアをセーフエリアと同様に記述しますが角を回避する機能などが組み込まれています角のサイズに応じて領域を横向きまたは縦向きに挿入できます APIをご紹介しましょうセーフエリアまたは標準のレイアウト余白を持つエリアのいずれかの領域を取得できます領域には角への適応機能が含まれ領域に横向きまたは縦向きのインセットを適用します LayoutRegionから layoutGuideメソッドを使用して Auto Layoutの制約を適用するためのガイドを取得しますこの領域の生のジオメトリを端のインセットまたは現在の四角形の形式で取得できます
こちらはこの新しいAPIの実際の使用例ですボタンが角と重なっていますこれに制約を追加して領域が角と重ならないようにします updateConstraintsメソッドで横向きの角への適応を含むセーフエリアのレイアウトガイドを取得しますこのレイアウトガイドはいわばセーフエリアのレイアウトガイドの典型ですしかし角のエッジに余分なインセットが含まれています
次にレイアウト制約をいくつか作成しボタンのジオメトリをセーフエリアガイドに結び付けますほんの数行のコードのみでボタンが角の横にうまく収まるようになりました次にスクロールエッジエフェクトを紹介します新デザインでの推奨方法ではコンテンツの全体を端から端まで表示しその上にLiquid Glass要素を重ねます Liquid Glassとコンテンツを分離するためにシステムはこれら2つが重なる領域にビジュアルエフェクトを適用しますこのエフェクトには2種類があります 1つはソフトエッジスタイルでコンテンツを徐々にぼかしフェードさせますもう1つのハードエッジスタイルはより不透明な背景を使用してコンテンツとフローティング要素をより明確に分離します
スクロール可能なコンテンツではスクロールエッジエフェクトは NSScrollViewにありますスクロールビューはビューの上に浮かぶコンテンツに基づいてエフェクトのサイズと形状を変更しますフローティング要素の移動に応じてエフェクトは自動的に適応しますエフェクトが自動適用されるのはツールバー項目、タイトルバーアクセサリ、および新しいタイプのアクセサリである分割項目アクセサリの下です分割項目アクセサリはタイトルバーアクセサリとよく似ていますが分割ビューコントローラ内の1つのみの分割領域にまたがる点が異なり分割領域の上端または下端のいずれかに配置できます分割項目アクセサリを追加するには NSSplitViewItemAccessoryViewController を作成して addTopAlignedAccessoryViewControllerか addBottomAlignedAccessoryViewController メソッドを使用して分割ビュー項目にアタッチします分割項目アクセサリとタイトルバーアクセサリはフローティングコンテンツをスクロールエッジエフェクトに統合する最良の方法ですこれらのアクセサリはエフェクトのサイズと形状に影響しコンテンツのセーフエリアを挿入してコンテンツのレイアウトを簡素化しますさてどんなデザインシステムも私の好きな要素であるコントロールなしには不完全です macOS Tahoeではコントロールはまったく新しい外観になります新デザインは各種のデバイスをまたいでファミリーの共通性を高めますボタン、スイッチ、スライダなどの要素の外観を macOS、iOS、iPadOSの間で統一しますこの変更では Macのコントロールならではの特徴と機能が保持されるよう十分な注意が払われています
macOSのコントロールではミニからラージまで様々な標準サイズを利用できますこれらの異なるサイズによりコントロール間に幅広いレベルの密度と階層が確立されています macOS Tahoeではこのリストにもう1つサイズが追加されます最も重要なアクションを強調するために使用できるエクストララージですエクストララージのサイズはアプリで最も重要なアクションを目立たせる上で最適です対象はユーザーがアプリを起動する目的となるようなアクションです例えばメディアプレーヤーで音楽をキューに入れる操作や通信アプリで電話をかける操作などです新サイズ導入のほかに今回の刷新を機会としてコントロールの高さも見直しました
macOSの過去のリリースと比較してミニ、スモール、ミディアムのコントロールの高さを少し拡張しましたコントロールラベルの周りにもう少し余白をもたせクリックターゲットのサイズも大きくしています様々なコントロールの高さに適応させる際は AutoLayoutを使用します高さをハードコーディングしないでください複雑なインスペクタやポップオーバーなど既存の高密度レイアウトとの互換性を維持するには AppKitが提供する mac OSの過去のリリースと一致するコントロールサイズをリクエストする APIを使用できます prefersCompactControlSizeMetrics という新しいプロパティを NSViewで使用しますこのプロパティはビュー階層において継承されます trueに設定すると AppKitコントロールは macOSの過去のリリースと互換性のあるサイズに戻ります新デザインシステムではいくつかの新しいコントロール形状も導入されていますミニからミディアムまでのサイズでは角丸長方形の形状が維持されるため水平方向の密度が高くなります一方ラージとエクストララージはカプセルのような丸みのある形状になり生じたスペースを活用できますカスタムデザインで同心性を実現するにはコントロール形状の推奨設定を変更しますこの例では誤字チェックを行うカスタムのコールアウトバーをミディアムのコントロール形状で作成しましたバーのコンテナはカプセルの形状ですが中にある角丸長方形のコントロールとマッチしませんこれは新しいborderShapedプロパティを使用する最適なユースケースですこのAPIを使用するとボタン、ポップアップボタン、セグメント化されたコントロールの形状を上書きできます
上書きによりカプセル形状を使用するようにするとカスタムコンテナにうまく収まるようになりました
形状のほかにボタンの素材も新しいガラスベゼルスタイルを使用してカスタマイズできますこのベゼルスタイルは標準のボタンの背景を Liquid Glass素材で置き換えます他のコンテンツの上に浮かばせる必要があるボタンに最適ですガラスベゼルスタイルは既存の bezelColorプロパティと互換性がありこれにより指定した色でガラスに色付けできます新デザインシステムではコントロールの強調度の概念もAppKitに導入されますボタンの強調度を変更することでボタンの色に付与する視覚的な重みのレベルを制御できますこれにより同じインターフェイス内にあるデフォルトボタンなどのより強調したいボタンを目立たなくさせずにボタンに色を付けることができますこの手法は注意を要するボタンに使用できます赤は目立つ色で注意を要するアクションを示すサインとして有効ですが近くのコントロールを目立たなくさせない強調度レベルに設定する必要があります
色の強調度のタイプは4つあります automaticはコントロールのスタイルと構成に応じて適切な強調度のレベルを選択する必要があることを示します noneは色がほぼないかまったくないことを示します secondaryは色をより抑えたレベルで適用することを示します primaryは最も顕著なレベルで色を適用することを示します
より強調度の低い色をボタンに適用するには tintProminenceプロパティを secondaryに設定しますこの場合デフォルトではアクセントカラーが使用されますこの例ではボタンを他よりも少し際立たせますデフォルトボタンとして機能させたいためですそのため returnキーでも同等の操作ができるようにしましたこれでボタンがキーボード入力に予測可能な方法で応答しますデフォルトボタンなので最も強調度の高いレベルの色が自動適用されます
色の強調度はスライダにも適用できます tintProminence APIによりトラックをアクセントカラーで塗りつぶすか選択できます noneに設定するとスライドのトラックは塗りつぶされません secondaryまたはprimaryに設定すると塗りつぶされます macOS Tahoeではもう1つ興味深いスライダの塗りつぶし機能があります塗りつぶしの起点として最小点の端のほかにトラックの任意の場所を指定できます新しいneutralValueプロパティを使ってトラック塗りつぶしの起点となる値を設定しますこの再生速度コントロールの例では neutralValueを「1x」に設定したので再生速度がそれよりも遅くなったり速くなったりすると青い塗りつぶしにより選択した値とデフォルト値の間の差異がわかります新しいデザインシステムではメニューもアップデートされます外観がリフレッシュされアイコンの使用方法も大きく拡張されます
メニューバーのメニューとコンテキストメニューの両方がアイコンで重要なアクションを示すようになりましたメニューの各セクション内でアイコンが一列に並び見つけやすくなりますメニュー項目に明瞭で認識しやすいシンボルを追加することでメニュー内の重要なアクションをユーザーが素早く発見できるようになります
「Get to know the new design system」ではメニュー項目のシンボルを選択する際に役立つ追加のガイダンスをご紹介しますぜひご確認ください最後に Liquid Glass要素をアプリに統合する方法を解説します Liquid Glass素材をカスタムUI要素に統合する前にこの新素材の背景となるデザイン上の意図を認識することが重要です
Liquid Glass要素は UIの最上位層に配置されコントロールとナビゲーションは特別な機能上のレイヤーに属するようになりますこの認識に基づき Liquid Glassを使用する対象はアプリの中でも最も重要な要素である階層の最上位レベルのコントロールのみに限定する必要があります対象の好例はフリーボードのインライン編集コントロールですコンテンツと並ぶのではなくそれらの上に浮かんでおり Liquid Glass素材により美しく動作します
コンテンツをガラスに配置するには NSGlassEffectView APIを使用します contentViewを設定すると AppKitが必要なすべての視覚的処理を適用しガラスが周囲に適応する際にもコンテンツの読みやすさを確保しますそのため NSGlassEffectViewはビューとしてコンテンツの背景に置けません角の半径と色のプロパティを使用してガラスの外観をカスタマイズできます NSGlassEffectViewを既存の要素に導入する方法の例を見てみましょう
このフィットネスアプリでは毎日のトレーニングの統計とワークアウトの種類を選択するカスタムコントロールがあります横向きのNSStackViewを使用してそれらを表示していますこれらはUIの重要な部分なので両方ともガラスの上に配置します Liquid Glass素材を導入するには新しいコードを数行書く必要がありますまず表示したいガラス要素の各々に NSGlassEffectViewを作成してからそれぞれのcontentViewプロパティを目的のビューに設定します GlassEffectViewはAuto Layoutを使用してジオメトリをcontentViewに結び付けるので同期を維持するための作業は不要です
次に GlassEffectViewをビュー階層内に配置しますこの例ではStackViewを更新して新しいGlassEffectViewに置換しました近くに複数のガラス要素がある場合 NSGlassEffectContainerViewを使ってグループ化します GlassEffectContainerViewは複数のガラス要素を結合し単一のレンダリングエフェクトにしますこの処理のメリットを説明します
まずグループ化したガラス要素はリキッドビジュアルエフェクトにより柔軟に結合／分離できる点です複数のガラス要素は互いの近さと spacingプロパティの値に基づき融合しますこの値はNSGlassEffectContainerViewで取得できます
また周囲環境に適応するガラスの外観はグループ化した要素間で共有されますそれにより背景のコンテンツが変化しても外観の統一感が要素間で維持されますさらにグループ化は視覚的な正確さの面でも重要です Liquid Glass素材は光を反射および屈折させ近くのコンテンツの色を反映します
この効果を利用するためにガラス要素は自身より広い領域からコンテンツをサンプリングしますがそのサンプリング領域に別のガラス要素が含まれる場合はどうなるでしょう実はガラス要素は他のガラスを直接はサンプリングできませんこの場合視覚効果の一貫性は損なわれますガラスエフェクトをグループ化するとそのグループの要素はサンプリング領域を共有しますこれにより視覚的な一貫性が高まるだけでなくガラスエフェクトのパフォーマンスも向上しますサンプリングの送信がグループ全体で1回だけになるためです
先のサンプルアプリに戻るとこれら2つのガラス効果は同じ論理グループに属しているのでガラスエフェクトコンテナ内に入れる必要がありますコンテナの設定方法はシンプルですこの例では NSGlassEffectContainerViewを作成しスタックビューをコンテナの contentViewに設定しますコンテナとそのコンテンツビューには Auto Layoutを使用して一緒に制約を適用しますするとこのコンテナで既存のレイアウトをきれいに置換できます Liquid Glass素材はアプリの主要コントロールの存在感を高めコンテンツをウインドウの端から端までシームレスに表示できるようにしますこれはアプリの独自性を生み出す機能を目立たせる上で最適な方法です
次のステップとしてまずアプリの構築に Xcode 26を導入しましょう新デザインの大部分をすぐに利用できるようになりますコンテンツは可能な限り端から端まで拡張しましょうフローティングガラスのツールバーとサイドバーを最大限に活用できます新しいコントロールサイズに適応するためにアプリを見直し高さのハードコーディングや柔軟性のないレイアウトの制約が使用されていないか確認しますシンボルアイコンでメニューのアクションを強化しましょう最後にインターフェイスの重要な要素を特定して Liquid Glass素材でレベルアップさせましょうご視聴ありがとうございますデベロッパの皆さんに感謝します

// Removing toolbar item glass

toolbarItem.isBordered = false

3:30 - Tinted toolbar controls

// Tints the glass with the accent color.
toolbarItem.style = .prominent

// Tints the glass with a specific color.
toolbarItem.backgroundTintColor = .systemGreen

3:58 - Toolbar badges

// Numeric badge
NSItemBadge.count(4)

// Text badge
NSItemBadge.text("New")

// Badge indicator
NSItemBadge.indicator

5:25 - Content under the sidebar

// Content under the sidebar

splitViewItem.automaticallyAdjustsSafeAreaInsets = true

8:47 - Avoiding a window corner

// Avoiding a window corner


func updateConstraints() {
    guard !installedButtonConstraints else { return }

    let safeArea = layoutGuide(for: .safeArea(cornerAdaptation: .horizontal))

    NSLayoutConstraint.activate([
        safeArea.leadingAnchor.constraint(equalTo: button.leadingAnchor),
        safeArea.trailingAnchor.constraint(greaterThanOrEqualTo: button.trailingAnchor),
        safeArea.bottomAnchor.constraint(equalTo: button.bottomAnchor)
    ])
    installedButtonConstraints = true
}

15:31 - Levels of prominence

// Create buttons with varying levels of prominence

// Prefer a “secondary” tinted appearance for the shuffle and enqueue buttons
shuffleButton.tintProminence = .secondary
playNextButton.tintProminence = .secondary

// The "play" will automatically use primary prominence because it is the default button
playButton.keyEquivalent = "\r"

18:42 - Adopting NSGlassEffectView

// Adopting NSGlassEffectView

let userInfoView = UserInfoView()
let activityPickerView = ActivityPickerView()

let userInfoGlass = NSGlassEffectView()
userInfoGlass.contentView = userInfoView

let activityPickerGlass = NSGlassEffectView()
activityPickerGlass.contentView = activityPickerView

let stack = NSStackView(views: [userInfoGlass, 
                                activityPickerGlass])
stack.orientation = .horizontal

21:03 - Adopting NSGlassEffectContainerView

// Adopting NSGlassEffectContainerView

let userInfoView = UserInfoView()
let activityPickerView = ActivityPickerView()

let userInfoGlass = NSGlassEffectView()
userInfoGlass.contentView = userInfoView
userInfoGlass.cornerRadius = 999

let activityPickerGlass = NSGlassEffectView()
activityPickerGlass.contentView = activityPickerView
activityPickerGlass.cornerRadius = 999

let stack = NSStackView(views: [userInfoGlass, 
                                activityPickerGlass])
stack.orientation = .horizontal

let glassContainer = NSGlassEffectContainerView()
glassContainer.contentView = stack

- 0:00 - Introduction
- Learn about the updated design system for macOS. The new design introduces Liquid Glass, a translucent surface that adds depth and dynamism to the user interface. AppKit is now updated to support this new design, including changes to basic structural components, the introduction of a scroll edge effect for legibility, and updates to the appearance and layout of controls. Learn how to implement these changes and utilize new APIs to incorporate Liquid Glass into your custom UI elements.
- 1:23 - App structure
- The new Mac design system introduces Liquid Glass for toolbars and sidebars, enhancing hierarchy and visual appeal. Toolbar elements are automatically grouped on Liquid Glass, which adapts its appearance based on content brightness. Toolbar items can be customized. Sidebars appear as floating glass panes, while inspectors use edge-to-edge glass. The design system emphasizes concentricity, with softer window corner radii that vary based on style. To position content near corners, the new 'NSView.LayoutRegion' API provides corner-avoiding layout guides, ensuring a polished and elegant user interface.
- 9:27 - Scroll edge effect
- The new design introduces the scroll edge effect, a visual separation between edge-to-edge content and floating Liquid Glass elements. This effect manifests as either a soft fade or a hard opaque backing and dynamically adapts within 'NSScrollView' as floating elements change. The effect is automatically applied underneath toolbar items, titlebar accessories, and new split item accessories, which span one split within a split view controller and which you can place at the top or bottom edge. These accessories influence the effect's size and shape, insetting the content safe area for easier layout.
- 11:10 - Controls
- In macOS Tahoe, the control design system is updated to enhance consistency across Apple devices. The new system includes an extra-large control size for emphasizing primary actions, and slightly taller mini, small, and medium controls for better readability. Control shapes now vary based on size; smaller sizes are rounded rectangles, while larger ones are capsules. You can customize control shapes, materials, and prominence using the new APIs. The tint prominence property allows controls to have varying levels of visual weight, making it easier to distinguish between different actions. Sliders are also updated, with the ability to anchor the fill at any location and to use tint prominence. Menus are refreshed with a more modern appearance and now prominently feature icons in a single column for easier scanning and navigation.
- 17:30 - Glass
- To integrate Liquid Glass elements into your app, consider the design intent and limit its use to the most important controls that float at the top level of the UI hierarchy. The 'NSGlassEffectView' API provides functionality to place content on glass, and you can customize its appearance with corner radius and tint color properties. When multiple glass shapes are close together, group them by using 'NSGlassEffectContainerView' to ensure fluid visual effects, uniform appearance, and consistent sampling of nearby content.
- 21:30 - Next steps
- To leverage the latest design features, build your apps with Xcode 26. This allows for immediate implementation of edge-to-edge content, utilizing the floating glass toolbar and sidebar. Enhance menu actions with symbol icons and incorporating Liquid Glass material for key interface elements to modernize your app's look and feel.

関連する章

リソース

関連ビデオ

WWDC25