At WWDC25 we launched a new type of Lab event for the developer community - Group Labs. A Group Lab is a panel Q&A designed for a large audience of developers. Group Labs are a unique opportunity for the community to submit questions directly to a panel of Apple engineers and designers. Here are the highlights from the WWDC25 Group Lab for Design.
Can you expand on how Liquid Glass helps with navigation and focus in the UI?
Liquid Glass clarifies the navigation layer by introducing a single, floating pane that acts as the primary navigation area. Buttons within this pane seamlessly morph as you move between sections, and controls can temporarily lift into the glass surface. While avoiding excessive use of glass (like layering glass on glass), this approach simplifies navigation and strengthens the connection between menus, alerts, and the elements that trigger them.
What should I do with customized bars that I might have in my app?
Reconsider the content and behavior of customized bars. Evaluate whether you need all the buttons and whether a menu might be a better solution. Instead of relying on background colors or styling, express hierarchy through layout and grouping. This is a good opportunity to adopt the new design language and simplify your interface.
What are scroll edge effects, and what options do we have for them?
Scroll edge effects enhance legibility in controls by lifting interactive elements and separating them from the background. There are two types: a soft edge effect (a subtle blur) and a hard edge effect (a more defined boundary for high-legibility areas like column sorting). Scroll edge effects are designed to work seamlessly with Liquid Glass, allowing content to feel expansive while ensuring controls and titles remain legible.
How can we ensure or improve accessibility using Liquid Glass?
Legibility is a priority, and refinements are ongoing throughout the betas. Liquid Glass adapts well to accessibility settings like Reduce Transparency, Increase Contrast, and Reduce Motion. There are two variants of glass: regular glass, designed to be legible by default, and clear glass, used in places like AVKit, which requires more care to ensure legibility. Use color contrast tools to ensure contrast ratios are met. The Human Interface Guidelines (HIG) are a living document offering best practices. The colors and materials pages are key resources.
Do you have any recommendations for convincing designers concerned with consistency across Android and Web to use Liquid Glass?
Start small and focus on high-utility controls that don't significantly impact brand experience. Native controls offer familiarity and predictability to users. Using the native controls makes sure your app feels at home on the device. Using native frameworks provides built-in accessibility support (dynamic type, reduce transparency, increase contrast). Native controls come with built-in behaviors and interactions.
Can ScrollViews include Liquid Glass within them?
You can technically put a glass layer inside a scroll view, but it can feel heavy and doesn't align with the system's intention for Liquid Glass to serve as a fixed layer. Think of the content layer as the scrolling layer, and the navigational layer as the one using Liquid Glass. If there is glass on the content layer it will collide into the navigational layer.
What core design philosophy guided the direction of iOS 26, beyond the goal of unification?
The core design philosophy involved blurring the line between hardware and software, separating UI and navigation elements from content, making apps adaptable across window sizes, and combining playfulness with sophistication. It was about making the UI feel at home on rounded screens.
Can we layer Liquid Glass elements on top of each other?
Avoid layering Liquid Glass elements directly on top of each other, as it creates unnecessary visual complexity. The system will automatically convert nested glass elements to a vibrant fill style. Use vibrant fills and labels to show control shapes and ensure legibility. Opaque grays should be avoided in favor of vibrant colors, which will multiply with the backgrounds correctly.
What will happen to apps that use custom components? Should they be adapted to the new design within the next year?
The more native components you use, the more things happen for free. Standard components will be upgraded automatically. Look out for any customizations that might clash. Think about what is the minimum viable change, where your app still feels and looks very similar to what it did. Prioritize changes in core workflows and navigational areas. There are a number of benefits to using native components including user familiarity, built-in accessibility support, and built-in behaviors and interactions.
Will Apple be releasing Figma design templates?
Sketch kits were published on Monday and can be referenced. The goal is to ensure the resources are well-organized, well-named, and easy to use. It's a high priority.
Explore the art and science of app design. Discuss user interface (UI) design principles, user experience (UX) best practices, and share design resources and inspiration.
Selecting any option will automatically load the page
Post
Replies
Boosts
Views
Activity
The following icon has been introduced in Safari's address bar for iOS 18:
I’d like to use it in my app to guide users on how to enable my Safari extension, but I couldn’t find it in SF Symbols beta 6.0 (99).
Is this because it’s still in beta and will be available for third-party use later, or is it a private icon that only Apple can use? I hope I just overlooked something.
Bonjour,
Je me permet d'écrire un message car je rencontre un souci avec la vue canvas j'ai le message d'erreur suivant " CrashReportError: XCPreviewAgent crashed because Adjust.framework is missing" je ne sais pas trop comment identifié le problème j'utilise pod
En vous remerciant par avance
Hi,After I tried to submit my APP for review several times, it was still rejected for the following reasons: Guideline 4.1-Design-Copycats: The app or its metadata appears to contain potentially misleading content. Specifically, the app includes content that resembles ODIKING without the necessary authorization.
But odiking belongs to our company's product, I don't know the problem, I don't understand how to prove that this product does not belong to a third party content
Tanks1
In Carplay, is it possible to update the navigation title and also add right tab bar items? Couldn't find these details in the documentation. Please suggest
Hi there,
I'm working on a product which needs to pair with an iOS device (only iPad and iPhone) via Bluetooth. I already have the device pairing and operating fully with android or Windows hosts and have implemented BLE. Obviously, iOS isn't as simple as those for pairing. The product type is not listed under the MFi accessories.
The question I have is what hardware and or firmware needs does the product needs to fulfil in order to pair/bond fully. I've seen some devices have a MFi security chip, some need to be manufactured in a MFi approved facility, I've no idea on the firmware requirements. We're starting the process of joining the MFi program too. So:
Do I need the security chip?
Where is the pairing process documented?
Can I use BLE or do I need to use classic Bluetooth or core Bluetooth?
Any help would be greatly appreciated because I'm kind of lost.
Thanks, Louis
Hi, starting from iOS18, it is impossible to differentiate between completed meetings and future meetings in calendar - almost the same color (unless I switch to dark mode). Is there a way to fix it or is it a human engineering bug?
Hello everyone,
I'm developing an app using RoomPlan where users can capture several rooms individually and assign custom names to each room. When I merge these captured rooms into a single CapturedStructure using the StructureBuilder, I want the merged structure to retain the original sections with their custom labels.
However, I'm encountering an issue:
Problem: After merging, the CapturedStructure's sections have different identifiers (UUIDs) compared to the original sections in the individual CapturedRooms. This means there's no straightforward way to map the custom labels from the original rooms to the sections in the merged structure.
What I've Tried:
Mapping by Identifiers: Attempted to map custom labels using the sections' identifiers, but the identifiers change during the merge, making this ineffective.
Mapping by Positions: Tried matching sections based on their center positions (simd_float3), but these change.
Modifying Section Labels: Considered changing the label property of the sections before merging, but the label is read-only and cannot be modified directly, and the CoreModel is used for merging rather than the data that can be modified via json.
Question:
Is there a recommended way to preserve or map custom section labels when merging multiple CapturedRooms into a single CapturedStructure using RoomPlan? How can I ensure that the custom labels assigned to rooms before the merge are correctly associated with the corresponding sections after the merge?
Any guidance or suggestions would be greatly appreciated!
Thank you!
Hello, I am an app developer from China. We are developing a mobile game that will be released on iOS and Android platforms (as well as some PC and Mac platforms). The game is a commercial app.
My question is: we would like to use the "PingFang" Chinese font in our game software. Do we need to obtain a license, and how should we go about obtaining it? (For example, through which channels should we apply for the license, and what are the associated fees?)
Hello,
I am currently creating a component in swiftUI and I would like on xcode to be able to select the elements individually with the selector button on the xcode preview on the canva but when I click on an element it selects all the iphone and not the element individually how can I do this please?
Hi, I'm trying to create a visualization using charts for vision pro. I want to create a line chart that connects pair of points on a donut chart. So i'm trying to draw the lines radially but it seems that the line chart always has only the bottom left corner of the view as origin. How can I tranform the origin to center of the view?
I'm trying to download version 2.1 of SF symbols even though version 6 is out because I have a older macOS but I can't find it. So, how would I work around this?
When using a double-tap primary action on a button, there will be a 1 second delay before the action is executed after the double-click is detected. Why is the design not like scrollview, which executes actions after double-tap detection? Is there a way to make the button perform an action after detecting a double-tap?
Prior to iOS 18 I could interact with my touchscreen when my phone was in standby mode. This was perfect because I could check weather, time, date, pause and play music, change songs, all at my desk, all without picking up my phone from the wireless charger. This feature is now gone in iOS 18 and I would REALLY like it back. It was super useful all day at work and now I’m constantly fumbling with my phone for every little thing.
I'm trying to setup my view so that there's (in order from top of display to bottom) a VStack with some content, followed by a List, followed by another VStack with a couple buttons where progressive blurs separate the list and the two VStack's content. Now, in the current version of my app when the user scrolls up or down, the list just cuts off. I'm having a very difficult time maintaining the entire view's vertical positioning while adding these blurs with ZStack. The code below is the current implementation with an attempted progressive blur. Right now, it's close, but the list is acting exactly how I don't want it - anchoring to the top of the display (its natural position) and causes the toolbar to blur when scrolled under (I can't disable toolbar without losing my toolbarItems either). Any help is appreciated.
NavigationStack {
VStack {
ZStack {
List(filteredItems) { item in
NavigationLink(destination: ItemDetailView(item: item)) {
HStack(spacing: 15) {
Image(systemName: item.icon)
VStack(alignment: .leading) {
Text(item.name)
Text("")
}
.multilineTextAlignment(.leading)
}
.padding(.vertical, 5)
}
}
.scrollIndicators(.hidden)
.scrollContentBackground(.hidden)
VStack(spacing: 5) {
if #available(iOS 18.0, *) {
Image(systemName: "plus.square.on.square.fill")
.resizable()
.scaledToFit()
.frame(maxHeight: 50)
.symbolEffect(.bounce.up, options: .nonRepeating)
} else {
Image(systemName: "plus.square.on.square.fill")
.resizable()
.scaledToFit()
.frame(maxHeight: 50)
}
Text("Items")
.font(.largeTitle.bold())
Text("Create, View, and Manage Your Items")
.font(.system(size: 12).weight(.bold))
.multilineTextAlignment(.center)
ScrollView(.horizontal) {
HStack(spacing: 20) {
filterButton(icon: "car.fill", color: .red, label: "Auto")
filterButton(icon: "cart.fill", color: .purple, label: "Shopping")
filterButton(icon: "laptopcomputer", color: .blue, label: "Tech")
filterButton(icon: "airplane", color: .orange, label: "Travel")
filterButton(icon: "gamecontroller.fill", color: .green, label: "Entertainment")
}
.padding(.leading, 25)
}
.scrollBounceBehavior(.basedOnSize)
.scrollIndicators(.hidden)
Spacer()
}
.padding(.top)
VStack {
Rectangle()
.fill(.thinMaterial)
.frame(height: 300)
.mask {
VStack(spacing: 0) {
LinearGradient(colors: [Color.black.opacity(0),
Color.black.opacity(0.383),
Color.black.opacity(0.707),
Color.black.opacity(0.924),
Color.black],
startPoint: .bottom,
endPoint: .top)
.frame(height: 400)
Rectangle()
}
}
Spacer()
}
.ignoresSafeArea()
VStack {
Spacer()
Rectangle()
.fill(.thinMaterial)
.frame(height: 200)
.mask {
VStack(spacing: 0) {
LinearGradient(colors: [Color.black.opacity(0),
Color.black.opacity(0.383),
Color.black.opacity(0.707),
Color.black.opacity(0.924),
Color.black],
startPoint: .top,
endPoint: .bottom)
.frame(height: 100)
Rectangle()
}
}
}
.ignoresSafeArea()
VStack(spacing: 12) {
Spacer()
Button {
showingAddItemView.toggle()
} label: {
HStack {
Image(systemName: "plus.circle")
Spacer()
.frame(width: 7)
Text("New Item")
.padding(.trailing, 3)
}
#if os(visionOS)
.padding(.vertical)
#endif
}
.padding(10)
#if os(iOS)
.background {
Capsule()
}
#endif
NavigationLink("Continue") {
}
}
.padding()
Hello everyone, I am currently developing a gambling app and would like to ask if anyone has relevant experience or knowledge regarding whether it is necessary to require users to log in immediately when launching the app? Or is it permissible to offer a "guest mode" for users to try out the app before requiring them to log in? Does this comply with the policies of Apple or Google Play? Thank you all for your guidance!
Question: Guide for Using Apple's macOS Sequoia UI Kit in Figma?
I recently discovered that Apple has published a "macOS Sequoia UI Kit" on their Figma profile: https://www.figma.com/@apple
As someone new to both UI kits in Figma and Mac app development, I'm looking for guidance on how to use this UI kit when designing a Mac app. Does anyone know if such a resource exists? I haven't been able to find one so far.
Background
I started developing a new macOS app about a month ago and have a basic working version with early functionality.
I've realized I need to take a step back and create visual prototypes to inform where to invest future development time.
The Sequoia UI Kit seems like it could be helpful, but I'm unsure how to use it.
iOS but not macOS
There are several tools available for designing iOS apps:
https://createwithplay.com/
https://www.judo.app/
https://detailspro.app/
However, I'm not aware of similar tools specifically for macOS application design.
Direction
Apple publishes design UI kits for both Figma and Sketch.
I want to avoid paying for Sketch (this is a hobby project), so I'm focusing on the Figma option.
Ideally, I'd love to see the iOS-focused tools mentioned above support macOS design fully. Until then (if ever), I'm hoping to make the most of the Sequoia UI Kit in Figma.
Any guidance or resources would be greatly appreciated!
Is it okay to move Apple Log and legal Text up?
like adding 140 bottom padding
Apple Log and legal Text is always clearly shown after moving up
I am creating a LazyVGrid with 2 columns. I want it so that if there is only one item in a row, then it goes to the center of the row. I tried using an HStack with a Spacer, but it doesn't push it to the center. How do I do it?
ForEach(pets) { pet in
VStack {
Image(pet.species.rawValue)
.resizable()
.frame(width: 80, height: 80)
Text(pet.name)
.poppinsBold(size: 16)
}
}
HStack {
if pets.hasEvenNumber {
Spacer(minLength: 0)
}
Button {
addPetSheet = true
} label: {
VStack {
ZStack {
Circle()
.frame(width: 70, height: 70)
.foregroundStyle(.gray)
Image(systemName: "plus")
.foregroundStyle(.white)
.font(.title)
}
Text("Add")
.poppinsBold(size: 16)
}
}
}
}
Last November 13 I came up with a phone keyboard layout (strategy) that can make key size bigger hence less mistyping.
The typical phone keyboard looks like this:
My proposed keyboard looks like this:
Essentially, it's a split keyboard with the left-hand part stacked above/below the right-hand part. Key size/width/height and the vertical distance between the left-hand part and right-hand part may be adjustable to suit different phone widths and user hand sizes.
You guys can show the proposed keyboard's image on your phone and fit this keyboard to your phone width so you can actually simulate typing on it to see how it feels. On my phone, the letter keys in it are a little too big for my thumbs to reach the farthest keys, but as I said, key size should be adjustable to suit different phone widths and user hand sizes.
My application suddenly started crashing on launch when I target "My Mac - designed for iPad." But only after the first build from scratch, which runs once. All subsequent runs crash with:
dyld[90869]: Symbol not found: _OBJC_CLASS_$_AVPlayerView
Referenced from: <D566512D-CAB4-3EA6-9B87-DBD15C6E71B3> /Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/Library/Debugger/libViewDebuggerSupport.dylib
Expected in: <4C34313C-03AD-32EB-8722-8A77C64AB959> /System/iOSSupport/System/Library/Frameworks/AVKit.framework/Versions/A/AVKit
I don't use AVPlayerView anywhere in my application. A file-contents search of the entire source tree doesn't turn it up either. The application doesn't even get to the point of instantiating the app object, so none of my code is involved.
If I switch the target to my iPhone, it will build and run repeatedly. If I then switch back to "My Mac," it will build and run once... and then crash every time.
Further research shows that this only happens in Debug builds.
This is a major issue right now because iOS 18 broke authentication certificates (thus HTTPS), so anyone writing or debugging an app that needs network functionality must use HTTP on localhost. In my case, I'm dead in the water because I can't debug on my local machine.
Has anyone seen something like this before? I can find no reference to anything like it.