Apple iOS 27 Design Kit Update: Liquid Glass Components Get a Major Overhaul

Apple has released official Design Kit updates for iOS, iPadOS, and macOS 27, targeting designers working within the Apple ecosystem. Available now for both Figma and Sketch, these resources bring continued refinement to the Liquid Glass design language, along with meaningful improvements to component coverage, naming conventions, and cross-platform consistency. For teams building interfaces within the Apple ecosystem, this is an iteration worth paying close attention to.

The Ongoing Evolution of Liquid Glass

The centerpiece of this update is the further refinement of the Liquid Glass design language.

Liquid Glass was formally introduced at WWDC 2025 alongside iOS 26/macOS 26 (later renamed iOS 27/macOS 27), and is widely regarded as the most significant system-level visual overhaul since iOS 7's flat design revolution. The effect relies on the real-time GPU rendering capabilities of Apple Silicon, layering three core technologies — Dynamic Blur, Refraction, and Ambient Light Awareness — to achieve a genuinely tactile, material-like UI. Unlike the earlier Frosted Glass effect, Liquid Glass dynamically adjusts transparency and color refraction based on background content in real time, making interface elements appear as if actual glass panes are floating above the content, rather than simple semi-transparent overlays.

This visual direction emphasizes translucent textures, dynamic light and shadow, and clearly defined depth — giving system components a lightweight feel while maintaining strong visual coherence.

The official component showcase includes core UI elements such as the keyboard, Tab Bar, Action Menu, Alert Dialog, buttons, Toggles, and Sliders — all re-interpreted according to the latest Liquid Glass specifications. These components display a layered, luminous aesthetic in dark mode, giving designers a highly faithful starting point that closely mirrors actual device rendering.

For teams looking to get ahead of Apple's design direction, these updates enable more accurate previews of how a product will look on the new OS, effectively narrowing the gap between design mockups and final implementation.

Expanded Component and State Support

Beyond the visual upgrades, this release also brings notable functional expansion. Apple explicitly highlights "expanded component and state support" as a key improvement.

The practical value here is significant. In real-world product design, a single component typically needs to cover multiple states — default, hover, pressed, disabled, selected, and more. Designers have historically had to build these state variants manually, a time-consuming process prone to inconsistencies. It's worth noting that Figma's Variables and Component Properties features give it a natural advantage when handling multi-state components — and this aligns closely with Apple's direction of natively supporting more states in the official kit. As the official resources cover more states out of the box, repetitive work in the design process will decrease substantially, and the visual and interaction logic across states will better conform to Apple's official guidelines.

A more complete component library also lowers the barrier for less experienced designers — rather than building foundational elements from scratch, they can immediately reach for high-fidelity, standards-compliant components and focus their energy on product innovation.

Naming Aligned with Code: Bridging the Design-Development Gap

This update also includes component naming changes — described as "naming changes to better align with code." This may seem like a minor adjustment, but its implications run deep.

Why Naming Matters

Understanding this change requires some context on the evolution of Apple's development framework naming conventions. Apple's iOS development frameworks have undergone a significant transition from UIKit to SwiftUI: UIKit, released in 2008 with the iPhone SDK, follows an imperative programming paradigm with component names prefixed by UI — such as UIButton, UITabBar, and UIAlertController. SwiftUI, introduced at WWDC 2019, uses a declarative syntax with cleaner, more intuitive names like Button, TabView, and Alert. Aligning the design kit's naming with code is essentially about finding the greatest common denominator between these two naming systems — and it hints at Apple's push toward deeper integration between design tooling and the Swift ecosystem.

In modern product teams, the efficiency of design-development collaboration directly determines delivery quality. When component names in Figma match their counterparts in SwiftUI or UIKit, engineers can more directly map interface elements to their corresponding code implementations after receiving a design handoff — reducing misunderstandings and the back-and-forth communication overhead of repeated clarifications.

This adjustment reflects Apple's sustained effort to advance a "design as code" philosophy, in line with the industry-wide Design Tokens standardization movement. By establishing shared naming conventions, design decisions can be passed to engineering implementations in a machine-readable way — making design deliverables not isolated visual references, but tightly coupled specification sources for engineering. For larger teams with complex collaboration structures, the long-term benefits of this consistency are especially pronounced.

Smarter Resizing and macOS Dark Mode Support

This update also includes two practical improvements. The first is "improved resizing."

The responsive design challenge within the Apple ecosystem is far more complex than on the web. The iPhone lineup alone spans multiple screen sizes — from the iPhone SE (4.7 inches) to the iPhone 16 Pro Max (6.9 inches) — and that's before accounting for iPad's Split View and Stage Manager multi-window modes, or macOS's freely resizable windows. The "improved resizing" capability likely introduces more refined Constraints and content priority settings, allowing components to intelligently protect key visual elements during stretching — consistent with the design philosophy behind SwiftUI's layoutPriority and fixedSize modifiers. A smarter resizing mechanism means components more naturally adapt to target dimensions when layouts are adjusted, avoiding distortion or element misalignment — particularly valuable in responsive design scenarios.

The second improvement is Dark Mode support for the macOS Design Kit — filling a long-standing gap in macOS resources. Designers can now complete design and validation for both light and dark modes within a single toolkit, ensuring a consistent, high-quality experience across different display environments.

How to Get It and Usage Recommendations

All updated Design Kits are available as free downloads from Apple's official Design Resources page, with support for both Figma and Sketch.

Figma, founded by Dylan Field in 2016, is known for its browser-based collaboration and cross-platform compatibility. Sketch, launched by Bohemian Coding in 2010, has long been the standard design tool for the macOS platform, with a Symbol-based component system that integrates deeply with the Apple ecosystem. Apple's decision to maintain parallel resources for both tools reflects respect for different workflows, as well as the irreplaceable role each tool plays in its respective domain.

For design teams, it's worth integrating the new kit into your workflow as early as possible. On one hand, it's an opportunity to get familiar with the latest Liquid Glass specifications ahead of the new OS release. On the other hand, the naming alignment and expanded component states can deliver immediate efficiency gains in day-to-day collaboration.

For independent designers and solo developers, the official kit is an invaluable learning resource. Studying how Apple organizes components and defines states is a fast track to deepening your understanding of system-level design standards.

Overall, this Design Kit update for iOS, iPadOS, and macOS 27 may not be a ground-breaking overhaul, but it reflects Apple's sophisticated understanding of design workflows at every level of detail — from unifying the visual language, to seamlessly connecting design and development, to delivering consistent cross-platform experiences. Each improvement points toward the same goal: making high-quality interface design faster and more reliable.

Key Takeaways