Liquid Glass
Learn how to design and develop beautiful interfaces that leverage Liquid Glass.
Introduction to Liquid Glass
Interfaces across Apple platforms feature a new dynamic material called Liquid Glass, which combines the optical properties of glass with a sense of fluidity. Learn how to adopt this material and embrace the design principles of Apple platforms to create beautiful interfaces that establish hierarchy, create harmony, and maintain consistency across devices and platforms.
[Image]
Standard components from SwiftUI, UIKit, and AppKit like controls and navigation elements pick up the appearance and behavior of this material automatically. You can also implement these effects in custom interface elements.
Adopting Liquid Glass
If you have an existing app, adopting Liquid Glass doesn’t mean reinventing your app from the ground up. Start by building your app in the latest version of Xcode to see the changes. Then, follow best practices in your interface to help your app look right at home on Apple platforms.
Sample code
The Landmarks app showcases how to create a beautiful and engaging user experience using SwiftUI and Liquid Glass. Explore how the Landmarks app implements the look and feel of the Liquid Glass material throughout its interface.
[Image]
Configure an app icon with Icon Composer.
Create an edge-to-edge content experience with the background extension effect.
Enhance the edge-to-edge content experience by extending horizontal scroll views under a sidebar or inspector.
Make your interface adaptable to changing window sizes.
Explore search conventions across platforms.
Apply Liquid Glass effects to custom interface elements and animations.
To learn more, see Landmarks: Building an app with Liquid Glass.
Design principles
The Human Interface Guidelines contains guidance and best practices that can help you design a great experience for any Apple platform. Browse the HIG to discover more about adapting your interface for Liquid Glass.
Define a layout and choose a navigation structure that puts the most important content in focus.
Reimagine your app icon with simple, bold layers that offer dimensionality and consistency across devices and appearances.
Be judicious with your use of color in controls and navigation so they stay legible and allow your content to infuse them and shine through.
Ensure interface elements fit in with software and hardware design across devices.
Adopt standard iconography and predictable action placement across platforms.
To learn more, read the Human Interface Guidelines.