iOS開源 - 復制 iOS 樣式庫到 Sketch 以改善、加速設計流程

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.

UIBlurEffectStyle

The API doesn't provide any specs for blurs, so it's a challange 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.

Usage

1. Open UIBlurEffectStyle.sketch
2. Copy style of a blur type
3. Paste style to any shape

Process

1. Created a few colorful shapes to blur
2. Rendered and exported all three types of blur over the shapes in Xcode:
   • extraLight
   • light
   • dark
3. Replicated each blur type in Sketch

UIFontTextStyle

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 .

Usage

1. Open UIFontTextStyle.sketch
2. Copy & Paste artboard into Sketch document
3. Assign texts to a system style

Process

1. Made a list of all ten text styles:
   • Title1
   • Title2
   • Title3
   • Headline
   • Subhead
   • Body
   • Footnote
   • Caption1
   • Caption2
   • Callout
2. Printed out the specs in Xcode (e.g. UIFontTextStyle(_rawValue: UICTFontTextStyleTitle1): .SFUIDisplay-Light, 28 )
3. Used font tracking designcode.io recommends

Get Involved

Suggest a style

1. Create anew issue
2. Describe the iOS style that should be replicated
3. :sparkles: Bonus: Follow the issue to provide feedback

Leave feedback

1. Create anew issue
2. Mention which style you have feedback on
3. :sparkles: Bonus: Follow the issue to provide feedback

Ask a question

• @_bgian
• hi@bobby.so
• Messenger