Hi guys, I've exported pngs for the middle and front images of an icon but I still se this weird shadow on top of the icon. Do anyone knows how to solve this?
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
Hi everyone,
I’m new to macOS development and working on an app idea that needs a timeline-based editor interface, similar to what you see in Logic Pro or Final Cut.
The UI I want to build would have:
A horizontal beat ruler that follows BPM and shows beat positions
Several vertical tracks stacked below it (for things like events or markers)
Horizontal zooming and scrolling
A preview panel on the right side that stays in sync with the timeline
I’m currently trying this in SwiftUI, but I’m running into some limitations and wondering if AppKit would be a better fit, or maybe a hybrid of the two.
My questions:
Where should I start when building something like this?
What’s the best way to make the beat ruler and all track layers scroll together?
How should I handle zooming in/out and syncing the display to a BPM timeline?
Is there a clean way to integrate AppKit for the timeline view while keeping SwiftUI elsewhere?
With iOS 26 the CPListSection header has a transparent background, and when the list scrolls under the header it doesn't look good at all. We expected to see a glass fading effect maybe, like the one on the top of the screen. Is it a known bug?
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.
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
I use swiftui to build apps on iPhone and iPad.
There is no problem with the iPhone app.
The game display is fully shown on iPhone.
However, for the iPad, the game display is not shown and the screen goes black.
I had to tap the button on the upper left side.(looks like a side view button)
After that, the game display is only shown in the left side in a very small size.
How can I make the game display fully shown in the iPad?
Scenario is when keyboard is opened within the app being developed then switch to other app, for instance, Notes app and create a note to enable keyboard from there. While the Notes app keyboard is active switch back to the developed app the keyboard in it is dismissed. Any thoughts?Thanks
Hello,
I recently submitted my app to the Apple Store and received a rejection under Guideline 4.3(a) - Design - Spam, stating that my app is similar to others on the store. However, my app has a unique feature set, offers more functionality and content than competitors, and is completely free with ad monetization, unlike most similar apps that require subscriptions.
I have spent five months developing this app from scratch, ensuring it provides an original and valuable experience for users. I did not use an app template or repackaged code, and my app is not a reskinned version of any existing app. I genuinely believe it brings meaningful differentiation to the market.
I would appreciate any guidance on how I can better communicate my app’s uniqueness to the review team or what specific aspects I should adjust to comply with Apple's guidelines.
Thank you for your time and support.
Hello,
I used icon composer to create an icon for my Mac OS app and it seemed to have worked. I see the app icon everywhere except for window expose or stage manager.
Any help or guidance would be greatly appreciated!
I’m working on a SwiftUI sheet that has a specific size 624 x 746, but I’m running into issues on certain devices like the iPad mini in landscape or when using Stage Manager. The sheet sometimes gets cut off, and the content inside isn’t fully visible.
Current Implementation:
The sheet is 624 x 746, but if there's less width or height around the sheet, I want it to scale dynamically while maintaining the aspect ratio (to ensure the content can always be shown)
Ideally, I’d love for the sheet to increase in size on larger screens to cover more of the page behind it.
The sheet contains a NavigationStack with multiple pages.
Problems I’m Facing:
iPad mini (landscape): The bottom content (like buttons) gets cut off when the sheet height is constrained.
Stage Manager: If the user resizes the window, the sheet doesn’t adjust properly, leading to UI clipping.
Ideal behavior: I want the sheet to dynamically scale its width and height while maintaining the aspect ratio.
Questions
How can I prevent content from being cut off when using the sheet in iPad mini landscape?
Is there a better approach to handle Stage Manager resizing dynamically?
Any insights or alternative approaches would be greatly appreciated! 🚀
Also, I’m a designer, and I’m doing this to help our development team—so please bear with my code 😅
Thanks in advance! 😊
I couldn't help noticing that the Maps and Find My apps make extensive use of "sheets stacked on top of each other" to represent its navigation hierarchy, with a "new content comes in from the bottom" orientation instead of a navigation stack with
"new content comes in from the right side" oriented transitions.
I'm interested in this topic because I have a similar navigation-hierarchy-over-a-map case in my app (with a custom map view though) and I'm torn back and forth between the approach of replicating the "stacked sheets" vs. putting a navigation stack in a sheet, esp. with the navstack approach being way more attainable with the iOS 26 glass design.
I couldn't find any guidance for this kind of UI in the Human Interface Guidelines; I'm leaning towards the navstack-approach for my app; but in terms of the behavior of the SwiftUI container views in this scenario it seems a little bit of an uphill path.
Any thoughts on what pattern should be preferred for presenting a deep navigational hierarchy on top of a map-like view?
Hi,
It would be sure if Apple creates a Fgima plug in to convert designs to SwiftUI, no one can do it like Apple and it would be SUPER and super time saving !
--
Kind Regards
hi all,
i have dating app, approved in google store, and working website
but i cant get approval from apple review team
( Guideline 4.3(b) - Design - Spam)
can someone help/suggest how to solve it
our app has 2000 clients already
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.
Post:
In macOS 26 Betas 1–3, the system applied an automatic dark-mode fallback for app icons. This ensured consistency across the Dock and Finder even when developers hadn’t provided dark assets.
Since Beta 4, this fallback was removed. As of Beta 7, icons now rely entirely on developer-updated assets. The result is mixed light and dark icons in the Dock, breaking visual consistency and making app recognition slower in dark mode.
Observed behavior:
• Icons without dark assets are displayed in their original light version.
• Some apps (e.g. Final Cut Pro) show a gray border treatment that feels inconsistent with the rest of the UI.
• The fallback applied in Betas 1–3 is completely absent.
Expected behavior:
System should provide a fallback rendering until developers supply proper dark assets, or offer a toggle in System Settings → Appearance (e.g. “Force Dark Icons”).
This is still present in Beta 7. Is there any plan to restore the fallback mechanism or provide a user option?
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
Hi there. Our designer is designing our app in Figma with the navigation element with compact size navigation bar, and large title. I couldn't find an API to actually configure the nav bar to be compact while keeping the large title enabled. Figma uses the libraries provided by Apple so it's weird I can't find such configuration in iOS26.
I'm adding a screenshot of the options in Figma.
First option is: Large size & large text.
The one our designer is using is compact size & large text.
Hello, Apple developer,
I found in the documentation that the evaluatedPolicyDomainState API has been deprecated in iOS 18. In my project, many users rely on this value for comparison. I would like to ask, what does it mean that this API is deprecated? Will the value returned by this API be empty in the future? How should I adapt for existing users?"
Let me know if you'd like any adjustments!
Thank you. Good luck.
[[context evaluatedPolicyDomainState] bytes]
Some SF Symbols (wifi for example) render fine with the variable. But many, mostly ones with the circle being variable, do not seem to work. The SF Symbols app shows them rendering with a variable fine. But in code it doesn't work. Am I missing something or is there a reason?
var body: some View {
HStack {
Image(systemName: "01.circle", variableValue: 0.5)
Image(systemName: "figure.wave.circle", variableValue: 0.5)
Image(systemName: "wifi", variableValue: 0.5)
}.font(.largeTitle)
}
}
As a very exclusive Apple only I want to share my thoughts on the new iOS 26 update, which I recently installed on my iPhone 16. While I genuinely appreciate Apple’s drive for innovation and personalization, this update introduces visual and stylistic changes that, in my opinion, compromise what has made iOS feel uniquely Apple for so long.
Liquid Glass & Home Screen Aesthetics:
When I first saw previews of the “Liquid Glass” design, I was excited. I assumed it would add more flexibility to things like the home screen customization — something like an optional effect that builds on the popular app tinting feature introduced in the previous iOS version. But instead, it appears that the Liquid Glass look is now the default and, more concerningly, unavoidable.
The result is a visual experience that feels dramatically more bubbly and less refined. App icons appear more rounded and inflated in a way that — and I say this as constructively as I can — reminds me more of Android or Samsung’s One UI than of Apple’s signature design language. For someone who’s chosen Apple specifically because of its clean, crisp, and elegant UI, this shift is disappointing. iOS has always felt visually mature and thoughtfully minimal. With this update, it starts to feel overly stylized and visually heavy, which I don’t associate with Apple’s identity.
Camera App – Icon Design:
While I don’t have major concerns with the layout of the Camera app itself, the new Camera app icon is something I feel very strongly about. The previous design was balanced, clear, and professional — instantly recognizable. The new icon, is completely different, and it has more the camera that look like the actual iPhone camera, which I can respect the want to identify the app the iPhone. But this is not the effect I felt it has, I feel like it is less professional than before, which again makes me think a little bit about androids. This minor change feels bit because icons are what we see every day, and this one doesn’t feel quite right for Apple.
Along with the new camera icon, the other new icons like the notes app, and the slight change in the message app icon, these small shifts aren’t ones I was overly pleased with, kind of felt like something that wasn’t broke and didn’t need fixed
Messages App:
The Messages app is where I felt the biggest disconnect. The updated keyboard with the “keys” looking more bubbly which again, makes me think android. And with the new monogram icons (initials in thick fonts with purple backgrounds), make the app feel — again — much more like an Android UI. While that might sound superficial, it doesn’t make me feel like it’s an iPhone.
As someone who’s always preferred the Apple system, I’ve come to expect a particular standard of visual design — one that’s distinct from other platforms. This new look blurs that line. The once refined look of Messages is not as clean and simple as it used to be. I also preferred the gray background for monogram icons. The new colors and heavy fonts draw attention in ways that don’t feel as clean and simplistic which I have loved Apple for in the past.
Control Center:
Another area where I noticed a slight change is the Control Center. It’s not a big difference to the previous one, which I liked. The main difference I noticed was the brightness and sounds “bar” seems more elongated. Not a major difference but I would rather see the older design if I were to be honest.
What I Did Like:
There are some positives: I think the new lock screen notification styling works well, and the Liquid Glass effect looks great in that specific context. I actually really like the looks that it has with the notifications on the lock screen, having it be that transparent gives a clean and simple look. Lots of the new things that can be done in this update are very nice and convent, the more customization is great.
Final Thoughts:
To be clear, I offer this feedback not because I’m resisting change, but because I value what makes iOS feel like iOS. This update, while visually bold, feels like a departure from Apple’s strengths — the clean and simplistic look. If there’s one big takeaway I hope you’ll consider, some of the new looks that have been put in place give a feeling that’s not Apple, and more Android. it’s that many of these new visual styles would be better received as optional customizations, not system-wide defaults.
I would love to see an update to help fix some of this. I don’t believe there is a way to “un-update” my phone but if I could I would, even though some of these new things do look and feel good.