|
Top-level
 Our designer @samhenrigold was curious about how this view was created and investigated. You might think, like he did, that this is the result of some clever algorithm. Some design system with tokens for this, maybe something crazy like a circle packing algorithm. 11 comments
That’s it. That’s the genius algorithm. It’s a JSON file that precisely defines the size and position of these avatars. This probably isn’t generated programmatically – it’s likely a designer somewhere at Apple, meticulously moving circles around on a canvas, nudging them pixel by pixel until they strike the right visual balance. The file is filled with truly hideous numbers that have no place in a design system — 23.5, 7.5, -6 — but it all works. We even wrote a test app that parses this JSON file, just so we could confirm our suspicions. These micro-adjustments are part of what makes great design. And they require an understanding of how our brains perceive visual information. It’s not something you can automate, write a test for, or cram into a design system. Design systems are conceptually against a token like `PlayButtonIconOffset` or `AvatarTopLeftScaleMultiplier` or `OnboardingCompleteCheckmarkDrawAnimationSpringDamping`. Sometimes you just need to go off-roading. The tools will always change. The medium will always change. But these foundations are constants. Your Figma skills probably won’t be relevant in 20 years, just as your Dreamweaver skills probably aren’t paying off in spades right now. But knowing when to break from the grid and nudge things around is a forever skill.  @lickability This doesn't explain the theory of why the flashlight looks good when off center in this almost perfectly symmetrical layout. Is it because of the sun icon on the right? @eb @lickability yeah, I’m not sure it strikes me as scientific or mathematical that “a designer somewhere at Apple, meticulously moving circles around on a canvas, nudging them pixel by pixel until they strike the right visual balance“ So, that’s just like… some designer’s opinion, then. I do think there is something to this idea of “things can look better when not pursuing exact symmetry”, but it’s not super objective what the “right” design is. Or there are multiple answers for diff people  @frstua Yes! This is Berkley Mono: https://berkeleygraphics.com/typefaces/berkeley-mono/ |
Gregory's Server
Sam went on a wild goose chase, ripping open framework binaries to see where this layout was happening. It turns out, it’s not even remotely that deep. On your Mac, right now, go look at this file:
/System/Library/PrivateFrameworks/ContactsUICore.framework/Versions/A/Resources/CNUIIdentityAvatarConfiguration.json