I’ve decided to take styles from Xcode and do my best to replicate them for Sketch. Along the way, I documented the process of how I ended up with the result so you can look into things even further.
You'll need to download Apple's SF font: https://developer.apple.com/fonts/
The API doesn't provide any specs for blurs, so it's a challenge to replicate. For performance concerns, I understand why Apple isn't open about these specs. However, as designers I think we shuold be aware of these constraints and design with them.
- Open
UIBlurEffectStyle.sketch - Copy style of a blur type
- Paste style to any shape
- Created a few colorful shapes to blur
- Rendered and exported all three types of blur over the shapes in Xcode:
extraLightlightdark
- Replicated each blur type in Sketch
Apple’s system fonts are designed for legibility and provide a variety of sizes which automatically react to accessibility features. You can read more about why it’s best to use system fonts on the iOS Human Interface Guidelines.
- Open
UIFontTextStyle.sketch - Copy & Paste artboard into Sketch document
- Assign texts to a system style
- Made a list of all ten text styles:
Title1Title2Title3HeadlineSubheadBodyFootnoteCaption1Caption2Callout
- Printed out the specs in Xcode (e.g.
UIFontTextStyle(_rawValue: UICTFontTextStyleTitle1): .SFUIDisplay-Light, 28) - Used font tracking designcode.io recommends
- Create a new issue
- Describe the iOS style that should be replicated
- ✨ Bonus: Follow the issue to provide feedback
- Create a new issue
- Mention which style you have feedback on
- ✨ Bonus: Follow the issue to provide feedback
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
