How can we use Liquid Glass on UIKit or/and AppKit

Asked on 06/30/2025

1 search

To use Liquid Glass in UIKit and AppKit, you can follow these guidelines:

UIKit

  1. Interactive Layer: Liquid Glass is designed to be an interactive layer that floats above your content. It should be used for the most important elements of your app, such as main controls that the user interacts with frequently.

  2. UIVisualEffectView: To use Liquid Glass with custom views, create a UIVisualEffectView and apply a new UI glass effect. You can customize the shape using properties like corner radius.

  3. System Views and Controls: Where possible, use system views and controls to ensure the best experience. For example, Maps uses Liquid Glass for custom buttons that float above the map, providing a distinct control layer.

  4. Avoid Overlapping: Ensure that glass elements do not overlap with other glass elements to maintain the illusion of a single floating layer.

For more detailed guidance, you can refer to the session Build a UIKit app with the new design (19:15).

AppKit

  1. NSGlassEffectView: Use the NSGlassEffectView API to place your content on Liquid Glass. Set a content view to allow AppKit to apply necessary visual treatments, ensuring legibility as the glass adapts to its surroundings.

  2. Hierarchy: Limit the use of Liquid Glass to the most important elements in your app, such as controls that belong in the top level of the hierarchy.

  3. Customization: Customize the appearance of the glass using properties like corner radius and tint color.

  4. Auto Layout: Use auto layout to constrain the glass effect view and its content view together, allowing for clean integration into your existing layout.

For more detailed guidance, you can refer to the session Build an AppKit app with the new design (17:30).

By following these guidelines, you can effectively integrate Liquid Glass into your UIKit and AppKit applications, enhancing the visual depth and expressiveness of your app's UI.