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
Created
Hello! I am developing an ebook reader iOS app that uses c/c++ codec as a page renderer.
The codec uses TrueType as a font rendering engine that requires access to .ttf (or .ttc) files.
Currently, I supply TrueType with fonts embedded in the app package, so they lay within the app sandbox.
The codec supports the whole unicode plane and many languages that ebooks may use, but the fonts I supply don't have some of the important glyphs (i.e. katakana or hangul).
I see that iOS has its own font storage, located in /System/Library/Fonts/ directory. The codec is able to parse this directory and read .ttf files located inside, using these fonts as a fallback in the case when the supplied fonts can't draw certain glyphs.
I use opendir and fopen(in "rb" mode) as a way to read the data, and it works well.
Does this type of access to the system directory violate the sandbox rule for an app distribution, and, if yes, is there a way to get access to stored .ttf files not violating the mentioned rule?
Hi, I've been trying for an hour to turn the symbols in sf symbols from left to right to right to left, I'd appreciate some help
My app lets users create things with text, and I've included Apple fonts so users can format their text with them. These were fonts I found in the Font Book app that comes with macOS. My assumption is that these, like the San Francisco font, can be distributed with apps.
Do I need to attribute these fonts to their creators and publish a license in my "About" page? If so, where do I find the license(s) and what is the proper way of publishing them? Is there anything else I should know?
Please let me know if this should've been posted under a different topic and tag
This is a follow-up to my previous question: How to attribute/credit Apple Fonts added to app?
In that previous post, I misremembered what I did and said I found fonts via macOS' FontBooks, when instead I came acrossUIFont.familyNames. Since these are included via UIKit, the legal implications should be different.
I looked at various license agreements that govern iOS app development but haven't found anything mentioning fonts. Since these are included as part of UIKit, its reasonable to assume that developers are allowed to include these fonts--but in what ways?
Am I allowed to let users create, say, documents with these fonts?
Am I only allowed to display these fonts?
There are 84 fonts, and judging by their FontBook entries, there is a wide range of licenses and restrictions. It seems unnecessarily harsh to have every iOS developer verify each one and figure out which they can legally keep if they want to offer their users access to all (for, say, a text-editing app). There must be some overarching rule that supersedes/encapsulates them, but this rule isn't clear to me after hours of research. I'm not a lawyer, and I don't think Apple expects every app developer to consult their lawyers on whether they can use system fonts.
I'm about to send an email to Apple's legal team (I will post their response here if allowed), but in the meantime I want to hear what other devs think about this.
In Xcode, entering UIFont.familyNames returns the following:
["Academy Engraved LET", "Al Nile", "American Typewriter", "Apple Color Emoji", "Apple SD Gothic Neo", "Apple Symbols", "Arial", "Arial Hebrew", "Arial Rounded MT Bold", "Avenir", "Avenir Next", "Avenir Next Condensed", "Baskerville", "Bodoni 72", "Bodoni 72 Oldstyle", "Bodoni 72 Smallcaps", "Bodoni Ornaments", "Bradley Hand", "Chalkboard SE", "Chalkduster", "Charter", "Cochin", "Copperplate", "Courier New", "Damascus", "Devanagari Sangam MN", "Didot", "DIN Alternate", "DIN Condensed", "Euphemia UCAS", "Farah", "Futura", "Galvji", "Geeza Pro", "Georgia", "Gill Sans", "Grantha Sangam MN", "Helvetica", "Helvetica Neue", "Hiragino Maru Gothic ProN", "Hiragino Mincho ProN", "Hiragino Sans", "Hoefler Text", "Impact", "Kailasa", "Kefa", "Khmer Sangam MN", "Kohinoor Bangla", "Kohinoor Devanagari", "Kohinoor Gujarati", "Kohinoor Telugu", "Lao Sangam MN", "Malayalam Sangam MN", "Marker Felt", "Menlo", "Mishafi", "Mukta Mahee", "Myanmar Sangam MN", "Noteworthy", "Noto Nastaliq Urdu", "Noto Sans Kannada", "Noto Sans Myanmar", "Noto Sans Oriya", "Optima", "Palatino", "Papyrus", "Party LET", "PingFang HK", "PingFang SC", "PingFang TC", "Rockwell", "Savoye LET", "Sinhala Sangam MN", "Snell Roundhand", "STIX Two Math", "STIX Two Text", "Symbol", "Tamil Sangam MN", "Thonburi", "Times New Roman", "Trebuchet MS", "Verdana", "Zapf Dingbats", "Zapfino"]
Hello,
I noticed a small mistake in the Human Interface Guidelines (HIG).
On the page HIG > Components > System Experiences > Widget > watchOS Widget Dimensions, scroll down to the bottom. In the "watchOS widget dimensions" section, the sizes in the table are in pixels (px), not points (pt) actually. However, the table header indicates the sizes should be in points (pt).
Page link:
https://developer.apple.com/design/human-interface-guidelines/widgets#watchOS-widget-dimensions
For example, the widget size in the Smart Stack on a 49mm watch should be 192x81.5 pt (or 382x163 px), not 382x163 pt. This size can be verified with the information provided here:
https://developer.apple.com/documentation/watchos-apps/supporting-multiple-watch-sizes/.
https://developer.apple.com/documentation/watchkit/wkinterfacedevice/1620974-screenscale
I like this font. but in license only allowed for use in Mockup UI.
Feel free to use in commercial?
https://mobbin.com/apps/bloom-ios-e1251835-34e6-426e-9f94-f9595f2567fa/1c919e9a-d144-4aa0-b788-f9752111e281/screens
What type of licensing does it apply for the usage of FONT_FAMILY='System' in Apple/iOS app?
I have an iPad developed using UIKit and storyboards now I have to develop UI for iPhone. Designs for iPhone app are completely new from iPad app also navigation is different. I have question regarding should I make different view controllers for iPhone and iPad and different storyboard
I have developed a mobile app using SwiftUI. Now I am in the process of building a CarPlay application. I know how to test the CarPlay app using a simulator but here is my confusion,
How to test the iPhone app and CarPlay together? I want to test few scenarios like, user login / logout from mobile app. Location enabled /disabled in the mobile app.
I know that swiftUI handles the scenes by itself. Kindly help me validate the above scenarios as I am getting black screen on iPhone whenever the CarPlay is launched. Below is the code snippet,
func application(_ application: UIApplication,
configurationForConnecting connectingSceneSession: UISceneSession,
options: UIScene.ConnectionOptions) -> UISceneConfiguration {
if connectingSceneSession.role == .carTemplateApplication {
let sceneConfiguration = UISceneConfiguration(name: "CarPlay Scene", sessionRole: connectingSceneSession.role)
sceneConfiguration.delegateClass = CarPlaySceneDelegate.self
return sceneConfiguration
}
// Configuration for other types of scenes
return UISceneConfiguration(name: "Default Configuration", sessionRole: connectingSceneSession.role)
}
struct MyApp: App {
@UIApplicationDelegateAdaptor(AppDelegate.self) var delegate
var body: some Scene {
WindowGroup {
ContentView()
.preferredColorScheme(.light)
}
}
}
Info.plist
<key>UIApplicationSceneManifest</key>
<dict>
<key>UIApplicationSupportsMultipleScenes</key>
<true/>
<key>UISceneConfigurations</key>
<dict>
<key>CPTemplateApplicationSceneSessionRoleApplication</key>
<array>
<dict>
<key>UISceneConfigurationName</key>
<string>CarPlay Scene</string>
<key>UISceneDelegateClassName</key>
<string>$(PRODUCT_MODULE_NAME).CarPlaySceneDelegate</string>
</dict>
</array>
</dict>
</dict>
I previously written here, and some advices were to appeal to rejection sending them message describing uniqueness of the app. Nothing is working.
In short, i have a vpn app (of course by design shares some concept with other apps that are in the app store). But since the rejection i have completely changed the ui, added built in browser, p2p messenger so users could interact with each other without any interference. The app is completely free with no ads. I thought this is it, there's no way it would reject this time, but... i get a notification with rejection repeating the same old message. I'm extremely frustrated and don't know what to do.
Tried changing the logo of the app, the name to "Incognito - Messenger, VPN", app store screenshots.
I've already appealed with screenshots describing unique features that other vpn apps don't have, but the message just repeats from app review team.
Submission ID: 1a49ee0b-c4e2-4a36-8372-e4d3b9a8b13f
Does anybody have an advice what i can do?
Hello -
I have an older app on the store, iAchieved, that suddenly stopped working properly on iOS 18. You can see it on the store, here:
https://apps.apple.com/us/app/iachieved/id1069338478
It still opens runs, and I can try to enter a new item, but something is wrong with the date, so that the "Done" button does not appear. And since it does not, I cannot tap it and create the item.
I'm not a developer, I don't code, I only designed the app and had someone build it for me.
But, if you can put it in layman's terms, any idea what's causing this?
Thanks so much for any insight you can provide,
-- David
How do I import a Reality Composer project into Blender (Windows x86_64)
I'm trying to create custom SF symbols and am getting this error message when I validate the template. It doesn't matter if I Export Template or Symbol. Also, it doesn't even matter if I make any changes or not, as long as it is opened in Adobe Illustrator or Inkscape and then I save it, I will get this error message when validating.
I'm working to emulate the Activity Rings featured in Apple's Fitness app.
Here's a copy of what's in the swift file so far.
//
// ProgressRingPrototype.swift
// Nutrition
//
// Created by Derek Chestnut on 1/13/25.
//
import SwiftUI
struct ProgressRingPrototype: View {
@State var progress = 0.00
let size: CGSize
let thickness: CGFloat
var color: Color?
var gradientColors: [Color]?
var body: some View {
let color = color ?? .primary
ZStack {
RingPrototype(
size: self.size,
thickness: self.thickness,
color: color.opacity(0.2)
)
let gradient = AngularGradient(
colors: gradientColors ?? [.primary, .secondary],
center: .center
)
let style = StrokeStyle(
lineWidth: 32,
lineCap: .round
)
Circle()
.trim(from: 0, to: progress)
.stroke(gradient, style: style)
.rotationEffect(.degrees(-90))
.frame(width: size.width, height: size.height)
}
.onAppear {
DispatchQueue.main.asyncAfter(deadline: .now() + 1) {
withAnimation(.easeInOut(duration: 1)) {
progress = 0.75
}
}
}
}
}
#Preview {
ZStack {
ProgressRingPrototype(
progress: 0.1,
size: CGSize(width: 256, height: 256),
thickness: CGFloat(32),
color: .primary
)
ProgressRingPrototype(
progress: 0.1,
size: CGSize(width: 190, height: 190),
thickness: CGFloat(32),
color: .primary
)
ProgressRingPrototype(
progress: 0.1,
size: CGSize(width: 124, height: 124),
thickness: CGFloat(32),
color: .primary
)
}
}
Here's a snapshot of the live preview.
I'm experiencing an issue where the trailing line cap generated by the stroke exceeds the start angle of the angular gradient, which creates an ugly artifact at 0 degrees.
Anyone have a solution to this problem?
Derek
Helvetica (17.0d1e1) has bugs, hopefully the developers and designers will fix it.
Link to the presentation: https://drive.google.com/file/d/16qfpo9Y7Psghv5c_Xl3JBiTPkP4QNaaS/view?usp=sharing
Our custom ble based app starts a service uuid beacon to advertise. When the app is put in background, the beacon is shifted to another beacon and a specific beacon data is put in the scan response one example is like: 0x14FF4C000100000000000000000000000000040000
I want to know what is the format of this beacon. I can see its a manufacturer type data with apple company id and beacon type is 0x01. I want to know what this type means and how is the data which follows is calculated.
Hello,
I want to make an app that displays the current event(s) (The ones that are ongoing at any given moment) on my Google calendar and shows how far through the event(s) I am with a progress bar, and updates live.
I want it to be as simple as possible and don't want it to take up too much space. I have a little window with some text elements and a progress bar that works if you manually put in values. But I still think the window is too big and clunky and I wonder if it's possible to change it's style?
I'm a bit inexperienced with coding and am completely new to xcode and swift. What approach would you recommend I take with this project? Or what resources would you refer me to?
I recently submitted a new app for review, but it has been rejected multiple times for vague reasons. The most recent rejection reason I received was unclear, leaving me unsure of what improvements are needed to get the app approved for the App Store.
Does anyone have any advice on how to address this?
Additionally, to Apple reviewers: Could you please provide more detailed feedback to help developers improve their apps? The repeated review process takes a significant amount of time, and guessing what needs to be fixed without clear guidance makes it even more challenging.
#################################
The latest rejection reason I got is:
Guideline 4.0 - Design
We noticed an issue in your app that contributes to a lower-quality user experience than App Store users expect:
Your app included hard to read type or typography.
Since App Store users expect apps to be simple, refined, and easy to use, we want to call your attention to this design issue so you can make the appropriate changes.
Next Steps
Please revise your app to address all instances of the issue identified above.
Hi! I've detected that in iOS18 launch screen colors differs from the defined ones, that is, if I create a launch screen with a color like #ff0000 (red) and the initial view controller is a view controller with the same color as background, I can see the transition between launch screen and the initial view controller because the launch screen color is different from the other one (dark in this case).
I've tested it with several colors: left side is the launch screen and right side is the initial view controller. Both views created with IB using the same colors (it also happens with background images using colors)
Is this an intentionall behavior? If so, theres a way to disable it? I need the transition between the launch screen and my initial view controller to be non perceptible...
Thanks!
I am creating a Generate note app but I don't see the text in the button when I applied the MeshGradient. I removed the Mesh Gradient and text is there. Need some help to find the issue. I am new to app Development and I am learning how to use it. Below is the code:
import SwiftUI
struct ContentView: View {
@State private var inputText: String = ""
@State private var isLoading: Bool = false
var body: some View {
ZStack {
Color(.systemGray6).edgesIgnoringSafeArea(.all)
VStack (spacing: 20) {
Text("Generate Notes")
.font(.title)
.fontWeight(.bold)
.frame(maxWidth: .infinity, alignment: .leading)
Text("Transform your thoughts into well-structured notes using artificial intelligence.")
.font(.subheadline)
.foregroundStyle(.secondary)
.frame(maxWidth: .infinity, alignment: .leading)
TextEditor(text: $inputText)
.frame(height: 200)
.padding()
.background(RoundedRectangle(cornerRadius: 16)
.fill(Color(.systemGray6)))
Button(action: {}) {
HStack {
if isLoading {
ProgressView()
.tint(.white)
} else {
Image(systemName: "sparkles")
}
Text(isLoading ? "Generating..." : "Generate Notes")
}
.padding()
.frame(maxWidth: .infinity)
.background(
MeshGradient(width: 3, height: 3, points: [
.init(0, 0), .init(0.5, 0), .init(1, 0),
.init(0, 0.5), .init(0.5, 0.5), .init(1, 0.5),
.init(0, 1), .init(0.5, 1), .init(1, 1)
], colors: [
.blue, .purple, .indigo,
.orange, .white, .blue,
.yellow, .green, .mint
])
)
.mask(
RoundedRectangle(cornerRadius: 16)
.stroke(lineWidth: 16)
.blur(radius: 8)
)
.overlay(
RoundedRectangle(cornerRadius: 16)
.stroke(.white, lineWidth: 1)
.blur(radius: 1)
.blendMode(.overlay)
)
.background(.black)
.foregroundColor(.white)
.cornerRadius(16)
.background(
RoundedRectangle(cornerRadius: 16)
.stroke(.black.opacity(0.5), lineWidth: 1)
)
.shadow(color: .black.opacity(0.15), radius: 20, x: 0, y: 20)
.shadow(color: .black.opacity(0.1), radius: 15, x: 0, y: 15)
}
.disabled(isLoading || inputText.isEmpty)
Spacer()
}
.padding(32)
.background(Color(.systemBackground))
.cornerRadius(44)
.shadow(color: .black.opacity(0.1), radius: 20, x:0, y:10)
}
}
}
#Preview {
ContentView()
}