새로운 디자인 시스템과 더 친숙해지는 법

Hi! I’m Maria, a designer on the Apple Design Team. In this session, I’ll cover everything you need to know about what’s new in our design system across visual design, information architecture, and core system components. If you haven’t yet, I recommend starting with the companion talk, Meet Liquid Glass, by my colleagues Chan, Shubham, and Bruno. It lays the groundwork for everything we’ll cover here by introducing its principles, behaviors, and how to use them effectively and inclusively in your own apps. Liquid Glass marks the most extensive software design update we’ve made, reshaping the relationship between interface and content through a brand new set of heuristics. The result? A harmonized design language that’s more cohesive, adaptive and expressive.

Approaching systems holistically is a powerful opportunity. It allows us to scale these principles across every surface and interaction within the Apple ecosystem.

And with technologies like SwiftUI, Mac Catalyst, and new software capabilities like iPad Window Resizing, we’re moving toward a shared design foundation— and evolving the system alongside it to maintain flow across devices, screen sizes, and input modes.

Whether you’re designing individual features or shaping entire systems, the flexibility of Apple frameworks makes designing across devices more seamless, scalable and powerful than ever before. There’s a lot for you to explore in this release, so I won’t spoil the fun of discovering it on your own. To highlight the most impactful updates, I’ll focus on three main areas: First, the new design language and how it builds a foundation for cohesion at scale. Then, the structure that guides navigation and content engagement.

And lastly, how continuity makes interactions feel familiar no matter where they happen. Let’s dive in.

Liquid Glass played a major role in shaping Apple’s evolving design language, by creating familiarity across platforms while tailoring each experience to feel just right.

In designing this system, we focused on the impact of the smallest details.

A systematic approach means designing with intention at every level, ensuring that all elements, from the tiniest control to the largest surface, are considered in relation to the whole. Our family of system colors has been adjusted in subtle but meaningful ways across Light, Dark and Increased Contrast appearances, so that they work in harmony with Liquid Glass, improving hue differentiation, without loosing the optimistic spirit that makes them uniquely Apple. Typography has been refined to strengthen clarity and structure, now bolder and left-aligned to improve readability in key moments like alerts and onboarding.

One of the most meaningful changes comes in how we use shapes Apple’s hardware features a consistent bezel and that same precision now guides the UI, with curvature, size, and proportion aligning to create a unified rhythm between what you hold and what you see.

There’s a quiet geometry to how our shapes fit together, driven by concentricity.

By aligning radii and margins around a shared center, shapes can comfortably nest within each other. And to preserve optical balance, views are mathematically centered when it makes sense— and subtly offset when it doesn’t. We use three shape types to build concentric layouts: fixed shapes have a constant corner radius.

Capsules use a radius that’s half the height of the container. And concentric shapes calculate their radius by subtracting padding from the parent’s.

The capsule’s geometry naturally supports concentricity. Which is why you’ll see it throughout the system—in the mirrored proportions of sliders and switches, and echoed in bars, buttons, and the rounded corners of grouped table views. Capsules bring focus and clarity to touch-friendly layouts, but in dense desktop environments, they’re best used for standout actions. On macOS, Mini, Small, and Medium controls will continue using rounded rectangles, making them a great fit for compact, high-density layouts like inspector panels. Large controls will now use capsule shapes, alongside with the new X-Large size, which takes advantage of Liquid Glass to provide emphasis in more spacious areas.

Used together, they create hierarchy and balance across complex desktop layouts. It’s important that your own visual design language and interface elements harmonize with Liquid Glass. Think of it like playing in the same music key—your interface elements should complement the system’s rhythm and tone, not clash with it.

And this is where things can get tricky, especially when you're managing your own design system. Using the three shape types we covered earlier helps keep your components aligned with the system—and makes it easier to work with Apple’s APIs.

As you’re updating your apps, keep an eye out for corners that feel too pinched— or flared. They can create tension and break the sense of balance.

One place this often shows up in is nested containers—like artwork in a card. If something feels off, the answer is simple. Its shape probably needs to be concentric to allow the system to calculate the inner radii automatically.

You also might notice it near device edges, like this button. For phone layouts, use a capsule with extra margin to create space near the screen edge.

For iPad and Mac, use a concentric shape that aligns with the window edge for better balance.

And here’s a neat trick for managing components that need to work both inside a container and on their own: use a concentricShape with a fallback radius.

The concentric value adapts when nested, and the fallback kicks in when the component stands alone.

With the foundation in place, the next step is understanding how to structure your app to make the most of Liquid Glass.

As apps become more immersive and content-focused, the UI should support interaction where needed, and remain unobtrusive when it’s not. Liquid Glass defines a new functional layer in the UI, floating above your content to bring structure and clarity, without ever stealing focus.

One of the ways this comes to life is by clearly depicting relationships between surfaces— how they appear and stay connected to their source in a way that feels spatial yet grounded.

Take the Action Sheet. It used to appear at the bottom of the screen, no matter where the action came from. Now, it springs from the action itself, which serves as the source for the action sheet. Clearly defined roles help the system understand that relationship, anchoring the interaction as it extends directly from the tapped element.

When making custom controls, use the same approach, and make sure to apply the material directly to the control, not its inner views.

Liquid Glass helps reflect navigation focus by introducing subtle material variation that reinforces intent as navigation deepens or shifts.

While it might sound complicated, it builds on familiar cues, like using a dimming layer to signal modality when a sheet appears. When a task interrupts the main flow, pair Liquid Glass with a dimming layer to help center attention, making the sheet feel like a clear, purposeful space.

On the other hand, when a task happens in parallel, Liquid Glass creates a natural separation to help keep things clear without breaking the flow. And when focus shifts, like dragging a sheet upward, Liquid Glass subtly recedes, becoming more opaque and gently growing in size to signal a deeper level of engagement. Alongside its role in focus and depth, Liquid Glass also helps elevate navigational controls. Previously, they would blend into the background when the interface was at rest. Liquid Glass helps lift them, creating more separation from your content while reinforcing interactivity.

First things first: if you’ve customized your bars, now’s the time to clean them up. We've all added extra backgrounds or borders to give buttons the right weight. This was common, and totally valid, for a long time. But with the new system appearance, we’re all relearning where emphasis comes from, making customizations like these unnecessary.

Instead of relying on decoration, hierarchy should be expressed through layout and grouping.

Part of creating strong structure is organizing bar items for legibility and spatial clarity.

As you update to the new look, items grouped using the correct API will automatically update to share a background and preserve their spatial relationship.

If things aren’t grouping the way you expect, here’s a few tips to get you going.

If your bar is feeling too crowded, use it as a cue to remove anything unnecessary and move secondary actions into a more menu to keep things clean and accessible. Group bar items by function and frequency. Buttons that perform related actions should generally go together. Just be sure to not group symbols with text, like “Select” and the share icon you see here, since it could be perceived as a single button. If you have a need for text buttons, allow them to sit on their own containers.

A primary action, like Done, stays separate and appears tinted, often as a blue checkmark on iOS and iPadOS, or as a prominent text button on macOS, creating a clear focal point that’s easy to spot and interact with.

The tab bar is one of the most persistent parts of your app. Organizing it well gives people a clear sense of layout and helps them move smoothly between sections. When content isn’t visible upfront, Search becomes essential.

That’s why iOS now includes a dedicated Search tab at the bottom, making it quicker to access and easier to reach.

Tab bars can also support persistent features using accessory views, like media playback controls that stay visible across your app. Avoid placing screen-specific actions here—a checkout button, for example, belongs with the content it supports. Mixing elements from different parts of the UI can blur hierarchy and make it harder to distinguish what’s persistent from what’s contextual. Next, let’s look at how visual effects help prioritize content and keep interactions clear.

Elements using Liquid Glass require clear separation from content to maintain legibility.

Like in Safari today, controls sit on top of a system material, not directly on content. Without that separation, contrast can suffer.

Scroll edge effects reinforce that boundary, replacing hard dividers with subtle blur to reduce clutter and keep UI legible.

And remember, scroll edge effects are not decorative.

They don’t block or darken like overlays.

They simply clarify where UI and content meet, and shouldn’t be used where there aren’t any floating UI elements.

Scroll views automatically show an edge effect when pinned controls overlap them. You'll see two styles across the system, soft and hard. You should avoid mixing or stacking them on top of each other. Soft is the default and the one you’ll use in most cases, especially on iOS and iPadOS. It provides a subtle transition and works well for interactive elements, like buttons or inputs, using Liquid Glass.

Hard is mostly used on macOS. It creates a stronger, more opaque boundary—ideal for interactive text, controls without backgrounds, or pinned table headers that need extra clarity.

Apply one scroll edge effect per view. In Split View layouts on iPad or macOS, each pane can have its own— just keep them consistent in height to maintain alignment.

The focus on content carries over to sidebars, where it can now be extended to the edge. To support this, you will notice sidebars are now inset and built with Liquid Glass, allowing content to flow behind them for a more immersive feel. Background extension effects let content expand behind the sidebar, filling the full width while keeping visuals centered in the layout. Use it for hero images, tinted backgrounds, or any surface meant to feel expansive.

Just make sure any text and controls are layered above to avoid unwanted visual distortion.

And it doesn’t stop there! Scroll views now extend beneath the sidebar by default, so carousels glide through naturally, supporting discovery without interruption.

You can apply background extension effects per view, which gives you a lot of flexibility to build richer layouts. Here, the top and bottom views use the background extension effect, while the scroll view in the middle stays separate. Where design language builds cohesion and structure shapes action, continuity connects it all into one fluid experience. It’s a simple idea—when someone moves between devices or resizes a window, they’re not starting over, they’re continuing the same task. Your app should carry that moment forward without interruption, keeping the moment alive. One decision, whether in layout, hierarchy, or interaction, should carry across every device your design appears on. This actually simplifies your design process! Instead of starting from scratch for each platform, you only need to design the anatomy of your app once. It’s not a new concept, but one we’re doubling down on. So let’s start with a quick refresher on how we think about device context. As you update your app to adopt the new design system, this is your moment to re-evaluate how well your experience carries across platforms.

On iPhone, you’re zoomed in to a narrow, vertical layout.

On Mac, everything unfolds into a wide, expansive canvas.

iPad is the middle layer of the system stack—bridging the focused utility of iPhone with the spacious depth of Mac.

It’s where your design learns to scale.

With that foundation in mind, let’s talk about how shared content brings that sense of continuity to life.

Remember the earlier examples of spatial organization? This is where it really matters. When content is intentionally grouped, it should stay together, even as the layout adapts. Use the same symbols across devices to preserve meaning and build familiarity through repetition.

However, not every action spells itself out. A pencil might suggest annotate, and a checkmark can look like confirm— making actions like Select or Edit easy to misread.

When there’s no clear shorthand, a text label is always the better choice.

You may have noticed earlier—bars now rely more on symbols than text, and this shift is happening across the platform, including menus. We recommend populating your menus with symbols where it helps recognition. When actions are closely related, such as multiple ways to copy, don’t repeat or tweak icons. Use the symbol once to introduce the group, and let text do the rest.

The Icons page on the Human Interface Guidelines has also been updated to include a list of preferred glyphs for common actions. It’s a helpful starting point whether you’re using SF Symbols directly or mapping them to your own system. For continuity to hold across devices, structure components to scale, treating platform variation as an expression of a shared framework— not an exception to it.

Making them work across environments often comes down to two things: how they’re built, and how they behave. Start by defining a shared anatomy. Similar to symbols, pieces of a component layout should persist and be reused in familiar placements. You’ve already seen this in action on sidebars and table items, and we’ve brought a similar approach to menus. A popup menu on macOS and a context menu on iOS might not look the same, but both include a selection indicator, icon, label, and accessory item.

And even when structure shifts, behavior fills the gap.

Components should always support the same set of core interactions.

For example, components like tab bars, segmented controls, and sidebars all signal selection, navigation, and state in consistent ways— providing the same function and feedback cues, regardless of form.

This isn’t just about bridging platforms—it’s also about bringing related components closer together within each one.

When those components behave and feel connected, everything clicks into place.

That’s everything new in the design system—updates to visual design, architecture, and components, all tied together by Liquid Glass. Now it’s your turn. We’re excited to share this new chapter of Apple design with you. Explore the Human Interface Guidelines, check out the new UI kits on Apple Design Resources, and start bringing these ideas to life in your own apps. Thanks for watching— and see you next time!