|
Top-level
 Taking a closer look at that footer, you’ll notice the variable blur effect. This has been showing up in a TON of first-party apps. Achieving this effect is quite difficult. There’s nothing in Figma that lets you do this and the API to do this is private (for now) 😕 6 comments
Here’s another common pattern that’s highly polished here: the media grid. You’d normally see this in a social media timeline, but we love the nested corner radius the grid items, how inner corners are sharper, and how items delightfully spring in and out of the light box view. When you scroll in the timeline, there’s some interesting behavior with the nav bar title — it collapses to the leading edge rather than the center. The stock nav bar, with centered text and trailing buttons, looks a bit lopsided; this is a nice fix! Next: card swipe actions. This rounded style is hard to replicate with public APIs, especially SwiftUI List. Most people give up and write a custom implementation, which is a shame since you relinquish a lot of accessibility features when you do that. Apple uses a few private swipe action styles — circular in Mail, or round-rects in Weather. Seb Vidal is taking one for the team by attempting to get his swizzled implementation through App Review. Godspeed, soldier 🫡 Thanks for following along! Hope you enjoyed this peek into our own design journal. 📓😊 |
Gregory's Server
Some people mimic this by making a blurred overlay and gradient masking it, but that creates a nasty halo effect when you dim the opacity of a blur layer. It’s not worth it, don’t do it.
(By the way, we created this graphic using
Janum Trivedi’s VariableBlurView. Very fun to play with but not App Store-safe!!)
https://github.com/jtrivedi/VariableBlurView