WWDC Quick Look đź’“ By SwiftGGTeam
中文 EN 日本語
Build a SwiftUI app with the new design system

Build a SwiftUI app with the new design system

SwiftUIDesign
Watch original video

Highlight

This is a code-along session. It walks developers through building a SwiftUI app from scratch that adapts to the new Liquid Glass design system, focusing on practical steps rather than design theory.

Core Content

Every year after WWDC, someone on the team gets a task: upgrade the existing SwiftUI app to the new system’s visual language. In past years, this meant changing a bunch of colors, tweaking a bunch of spacing, and reading through the Human Interface Guidelines — lots of work, little satisfaction. The 2025 Liquid Glass design system is more developer-friendly — most standard controls automatically get the new appearance, but to bring an app to full consistency you still need to understand the new modifiers and material rules.

This session breaks that upgrade process into code-along format: talk while coding. Starting from a basic SwiftUI app, it gradually introduces key capabilities of the new design system — navigation structure, toolbars, controls, glass material adaptation for custom views, cross-platform consistency. The companion resources include a complete Landmarks sample project for comparing what changed at each step. It solves the pain point of “scattered docs, don’t know where to start” — a complete app strings all the points together in order; developers follow along once and can replicate in their own projects.

Details

The session’s official resources are the main reference for following this code-along. Three resources, each with a role:

  • “Adopting Liquid Glass”: technical overview, explaining how the new design language affects overall app structure.
  • “Applying Liquid Glass to custom views”: how custom views adopt the new material, avoiding hardcoded color failures.
  • “Landmarks: Building an app with Liquid Glass”: complete downloadable sample project, the final product of the code-along.

The recommended code-along approach: run the sample project first, flip to the corresponding code position for each video segment timestamp, watch which line the Apple engineer changed at that moment. This loop of “watch video → check code → replicate in your app” is far more efficient than just reading docs.

Since this session leans toward design and workflow demonstration, technical API details are concentrated in sister Session 323 (Build a SwiftUI app with the new design), which provides 28 official code snippets covering Segmented Picker, Inspector, Tab bar collapsing, custom glass materials, and other typical scenarios. Treat 402 as “guide” and 323 as “API handbook” — watch both together.

Key Takeaways

  • Do this: Rebuild your existing SwiftUI app with Xcode 26 once, record which views automatically get the new appearance and which need manual adaptation
    • Why it’s worth it: 90% of Liquid Glass effects are free for standard controls; seeing default results first saves massive rework time
    • How to start: open a feature branch, replace only the Xcode version and deployment target, don’t touch business code, screenshot for comparison
  • Do this: Build a semantic color audit checklist, replace all hardcoded Color(red:green:blue:) in your project with semantic colors like .primary / .secondary / .tint
    • Why it’s worth it: under new appearances like Clear and Tinted, hardcoded colors have no contrast guarantees; semantic colors adjust automatically with the system
    • How to start: use Xcode search rules to match all Color(red: and UIColor(red:, group by view, replace one screen at a time
  • Do this: Add a “six appearance mode screenshot” checklist item to your PR template, covering Light/Dark/Clear light/Clear dark/Tinted light/Tinted dark
    • Why it’s worth it: Liquid Glass visual effects are sensitive to appearance switching; passing in single mode doesn’t mean passing in all modes
    • How to start: write a PreviewProvider template using SwiftUI Preview’s preferredColorScheme and appearance switching APIs, reuse across the team
  • Do this: Follow the Landmarks sample project chapter by chapter, note each chapter’s corresponding modifiers and resources in your team wiki
    • Why it’s worth it: the sample project strings together APIs scattered across multiple sessions into a complete app — the fastest entry point for beginners
    • How to start: download the Landmarks project from Apple docs, replicate each section in code-along chapter order while cross-checking against the video

Comments

GitHub Issues · utterances