Apple updated their iOS 18 UI kit to include iPhone 16 Pro bezels (in all colors), updated templates to match new display dimensions, and several other bug fixes and improvements.
Apple added nine new design templates for Figma: Apple Pay, App Clips, Live Activities, iMessage apps and sticker packs, Sign in with Apple, App Shortcuts, Tap to Pay, Tip Kit, and Wallet. See also Apple Design Resourcesin the Developer Center.
Mike Rundle points out interesting implementation details in the Apple Design Resources – visionOS file.
“Apple’s initial visionOS design kit for Figma contains a comprehensive set of UI components, views, system interfaces, text styles, color styles, and materials. All of the core ingredients you need to quickly create highly realistic visionOS app designs.” See also Designing for visionOS at Apple Design Resources.
First the iOS kit, and now the official design library and templates for macOS Sonoma from Apple!
Big day for the Figma community! After years of making official design resources only for Sketch, Adobe XD, and Photoshop (!), Apple finally launched a Figma community page and published a UI kit for iOS 17 and iPadOS 17. (Interestingly, this seems to be the first community resource requiring accepting Terms of Service before opening.)
Let’s use this opportunity to thank Joey Banks for his community service in building many iOS kits over the years, starting with iOS 13!
Free virtual try-on for the Vision Pro, because let’s be fair — we all need one now.
Zander with just-in-time tips on creating a spatial UI for Vision Pro, supafast!
3 Spatial UI Design tips in Figma, Supafast! ⚡️ pic.twitter.com/hknTLEPK3e
— Zander Whitehurst (@zander_supafast) June 8, 2023
Landa Dong, Design Evangelist at Apple, recommends three must-watch videos from WWDC23 on designing for Apple Vision Pro — “Principles of spatial design”, “Design for spatial interfaces”, and “Design for spatial input”.
So you wanna learn how to design for Apple Vision Pro? 👀
— Linda Dong 🍉 (@lindadong) June 6, 2023
We just dropped 3 must-watch #WWDC23 videos that go over it all
Principles of spatial designhttps://t.co/Z6IFqBRr0j
Design for spatial interfaceshttps://t.co/0JkklnGZlF
Design for spatial inputhttps://t.co/nmrVm73xcP pic.twitter.com/rLnz2fmsQE
Great resource if you’re designing for Apple Watch.
Beautiful adaptations of popular apps icons for Big Sur.
Getting started on my Big Sur dock pic.twitter.com/DJ3aZMJ73h
— Gavin Nelson (@Gavmn) June 24, 2020
In case you missed some textures lately.
Had about 20 mins today to throw down on designing the new iOS Big Sur contacts icon in @figmadesign. It ain't perfect, but it was sure fun! https://t.co/usKzXiFlgZ pic.twitter.com/gjllCNw1W1
— ˗ˏˋrogieˎˊ (@rogie) June 24, 2020
See also his Figma file.
I recreated the new FaceTime icon in @figmadesign. Original to the left, recreation to the right. The trick when creating these type of icons is an efficient use of your linear gradient, that's it :) #apple #BigSur pic.twitter.com/xfBFFhgBfi
— Pietro Schirano (@skirano) June 23, 2020
See also his Figma file.
Official design resources with all the new stuff announced at WWDC, including files for all platforms and in multiple formats, except for Figma. This is a big omission on Apple’s part, but luckily we have a thriving community that quickly rose to a challenge.