剑客
关注科技互联网

Sketch-iOS-Library:复制 iOS 样式库到 Sketch 以改善、加速设计流程

Sketch-iOS-Library:复制 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.

You’ll need to download San Francisco: https://developer.apple.com/fonts/

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

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址