Liquid Glass in SwiftUI: How to Modernize an iOS App Template
A focused modernization pass for real SwiftUI apps, not a visual rewrite.
Liquid Glass is not just a shiny material. It changes how iOS apps express depth, hierarchy, translucency, motion, and icon identity across Apple platforms.
For teams starting from an existing SwiftUI template, the question is not "How do we add glass everywhere?" The better question is: "Which parts of this app should feel more native while still preserving the product's brand?"
This guide gives you a practical modernization path for SwiftUI templates:
- audit navigation and surfaces before touching colors;
- update reusable components instead of one-off screens;
- prepare app icons with Icon Composer;
- test legibility, motion, and accessibility settings;
- ship the redesign in small, reversible steps.
If you are choosing a base app before modernizing, start with the SwiftUI Starter or browse the full iOS templates catalog.
What Liquid Glass Changes for SwiftUI Apps
Apple's Liquid Glass guidance focuses on making interfaces feel cohesive across the system while still letting apps keep their identity. In practice, that means your SwiftUI app should stop treating backgrounds, navigation bars, tab bars, sheets, controls, and icons as unrelated design jobs.
The biggest practical changes for a template are:
- surfaces need clearer hierarchy;
- icons need layered source assets;
- custom controls need stronger contrast checks;
- screenshots need to match the new visual language;
- older hard-coded colors may look heavier than expected.
This is exactly where templates help. A good template already centralizes navigation, buttons, cards, typography, colors, and common layout primitives. Modernizing those primitives updates most of the app without rewriting every feature.
Start With a Design Audit
Before changing code, open the template and classify each screen:
| Screen area | What to inspect | Typical update |
|---|---|---|
| Navigation | Tab bars, toolbars, large titles | Prefer system components where possible |
| Content | Feed cells, cards, lists, detail views | Reduce heavy backgrounds and borders |
| Actions | Primary buttons, floating buttons, menus | Keep contrast and hit targets strong |
| Modals | Sheets, paywalls, filters, profile editors | Recheck blur, dimming, and hierarchy |
| Brand | App icon, launch image, screenshots | Move to layered assets and current screenshots |
Do not start with isolated color tweaks. Start with structural UI decisions. Liquid Glass looks best when the app uses clear layers: content, controls, navigation, and transient overlays.
Refactor the Template Around Design Tokens
If your template has repeated color literals, repeated button modifiers, or screen-specific card styles, modernizing will become slow. Create a small design system layer first.
enum AppColor {
static let background = Color("AppBackground")
static let surface = Color("AppSurface")
static let primary = Color("BrandPrimary")
static let textPrimary = Color("TextPrimary")
static let textSecondary = Color("TextSecondary")
}
struct PrimaryActionButtonStyle: ButtonStyle {
func makeBody(configuration: Configuration) -> some View {
configuration.label
.font(.headline)
.frame(maxWidth: .infinity)
.padding(.vertical, 14)
.foregroundStyle(.white)
.background(AppColor.primary)
.clipShape(RoundedRectangle(cornerRadius: 14, style: .continuous))
.opacity(configuration.isPressed ? 0.82 : 1)
}
}
This keeps your Liquid Glass pass controlled. You can modernize the shared button, list surface, toolbar, or modal once and let feature screens inherit the change.
Update Navigation Before Cards
Most app templates are organized around high-frequency navigation:
- tab bar for consumer apps;
- sidebar for dashboard-style apps;
- stack navigation for onboarding and checkout;
- modal flows for profile editing, filters, and creation forms.
Update navigation first because it defines the app's perceived system fit. Then move to content cards and custom surfaces.
For example, a social app should prioritize:
- feed navigation;
- profile and compose flows;
- media preview surfaces;
- comments and message sheets.
An ecommerce app should prioritize:
- category browsing;
- product detail surfaces;
- cart and checkout;
- account and order history.
If your app is template-based, map these priorities to real modules instead of global styling guesses.
Use System Components Where They Carry the Experience
SwiftUI gives you a lot of native behavior for free when you let system components do their job.
Good candidates for system-first modernization:
NavigationStackTabViewListFormMenuToolbarItemSheetand presentation modifiers
Custom UI still matters, but it should be reserved for product identity, brand-specific empty states, media layouts, custom dashboards, and app category moments.
If a custom tab bar only exists because the old template needed a fixed look, consider whether the current platform components now provide a better baseline.
Modernize the App Icon With Icon Composer
Liquid Glass is not limited to screens. Apple's Icon Composer lets developers create layered icons that work across appearance modes and platform surfaces.
For a template, treat the icon as a source asset, not a final PNG only.
Your app icon pass should include:
- a clean background layer;
- one or two foreground concept layers;
- enough separation for system effects;
- a fallback flattened export for marketing use;
- App Store screenshots that match the updated icon.
Do not leave the template's demo icon in place during QA. It makes screenshots and TestFlight feedback harder to interpret.
Apply Liquid Glass Carefully to Custom Views
Custom views are where teams usually overdo redesigns.
Use this rule: if the view is already visually dense, reduce before adding effects.
Dense screens include:
- feeds;
- finance dashboards;
- chat lists;
- product grids;
- maps with overlays;
- analytics screens.
In these contexts, too much translucent layering makes the interface feel busy. Use clearer spacing, stronger typography, and fewer competing containers.
Accessibility Is Part of the Modernization
Liquid Glass depends on material, transparency, depth, and motion. That means your accessibility checks need to be stricter, not looser.
Test with:
- Increase Contrast;
- Reduce Transparency;
- Reduce Motion;
- Dynamic Type sizes;
- VoiceOver navigation;
- light and dark appearance;
- low-brightness device settings.
Modernization is not complete until important text, controls, and navigation remain usable under these settings.
What to Update in Common Template Categories
Social and community apps
Focus on feed readability. Profile headers can carry more visual treatment, but feed cells should stay scannable.
Template references:
Dating apps
Dating apps can use richer motion and card presentation, but actions need to remain obvious. Swipe affordances, match modals, and chat entry points should survive accessibility settings.
Template reference:
Ecommerce apps
Product information should win over decoration. Use the redesign to improve navigation, category structure, product cards, and checkout clarity.
Template reference:
Dashboard and finance apps
Charts and account balances need clear contrast. Avoid layering glass effects behind high-density numbers.
Template references:
Release Checklist
Before shipping a Liquid Glass modernization, verify:
- shared design tokens are updated;
- navigation uses current SwiftUI patterns;
- custom cards still meet contrast expectations;
- app icon source assets are prepared in Icon Composer;
- screenshots show the updated UI;
- light and dark mode both look intentional;
- accessibility settings do not break layout;
- older supported devices still feel responsive.
Official References
- Apple: Liquid Glass overview
- Apple: Adopting Liquid Glass
- Apple: Landmarks with Liquid Glass
- Apple: Icon Composer
- Apple: Creating your app icon using Icon Composer
Mega Bundle Sale is ON! Get ALL of our React Native codebases at 90% OFF discount 🔥
Get the Mega BundleFinal Takeaway
The best Liquid Glass modernization is not a cosmetic pass over every pixel. It is a system update: navigation, reusable components, icon assets, accessibility, and screenshots all moving together.
Start with the template's shared UI layer. Then update the category-specific screens that users touch most often. That gives you a modern iOS app without turning a working template into a fragile redesign project.
Looking for a custom mobile application?
Our team of expert mobile developers can help you build a custom mobile app that meets your specific needs.
Get in Touch