RSS

What’s New

iOS Apple Design Resources Updated

July 1, 2020

Important note for Sketch users

When updating to the iOS 14 version of the Apple Design Resources Sketch Library, some nested symbols may remap incorrectly. This may require manually remapping to the correct nested symbols or replacing symbols altogether. Text and other overrides may revert to their default values. Pay special attention to table rows and action sheet symbols as they're the most likely to be affected. Updating to the latest version of Sketch will minimize problems. Before adding the iOS 14 Sketch Library, save a copy of the iOS 13 Sketch Library which may also be found in your User Library:

~Library/Application Support/com.com.bohemiancoding.sketch3/Libraries

  • Updated Siri templates to iOS 14 (Sketch and Photoshop)
  • Added new Apple Pay Button Types (Sketch and Photoshop): Support, Contribute, Top Up, Add Money, Reload, Order, Rent
  • Added Home Screen templates with Widgets (Sketch)
  • Updated Home Screen icons
  • Fixed layout bugs, typos
  • Fixed iPhone keyboard appearance bug (Sketch)

Human Interface Guidelines Updated

June 23, 2020

Technologies

Additions:

Major updates:

  • SF Symbols now covers multicolor symbols and includes as-is symbols introduced in SF Symbols 2

iOS

Additions:

Major updates:

  • Split Views now covers creating multicolumn and sidebar-based designs

macOS

Additions:

Major updates:

  • Typography now covers the San Francisco variable font format and includes tracking values for SF Pro

watchOS

Additions:

Major updates:

  • Menus now covers ways to elevate content out of hidden menus
  • Typography now covers the San Francisco variable font format, and includes tracking values for SF Compact and SF Compact Rounded
  • All content reorganized and art updated

tvOS

Additions:

Major updates:

  • Typography now covers the San Francisco variable font format and includes tracking values for SF Pro

Apple Design Resources Updated

June 23, 2020

Important note for Sketch users

When updating to the iOS 14 version of the Apple Design Resources Sketch Library, some nested symbols may remap incorrectly. This may require manually remapping to the correct nested symbols or replacing symbols altogether. Text and other overrides may revert to their default values. Pay special attention to table rows and action sheet symbols as they're the most likely to be affected. Updating to the latest version of Sketch will minimize problems. Before adding the iOS 14 Sketch Library, save a copy of the iOS 13 Sketch Library which may also be found in your User Library:

~Library/Application Support/com.com.bohemiancoding.sketch3/Libraries

iOS


Additions:
  • Menu control (Sketch, Photoshop)
  • Date and Time Pickers (Sketch, Photoshop)
  • Color Pickers (Sketch, Photoshop)
  • Sidebar (Sketch, Photoshop)
  • Widgets (Sketch, Photoshop)
  • 4- and 5- symbol options for navigation bar (Sketch, Photoshop)
  • Search field right accessory option for navigation bar (Sketch, Photoshop)
  • Min and max slider control options (Sketch)
  • Page controls with background platter (Sketch, Photoshop)
  • Grouped table views (Sketch, Photoshop)
    • Default and large row height options
    • Inset appearance for compact and regular size classes
  • Material reference guide for Photoshop
  • Color guide for Photoshop
  • 12.9” keyboards in portrait and landscape orientation (Sketch, Photoshop, XD)
  • Named (labeled) text fields (Sketch, Photoshop)
  • Symbols and templates for Apple Wallet passes and Add to Apple Wallet buttons (Photoshop, Sketch)
  • Dark mode action sheets, activity view controllers (share sheets), and alerts for Photoshop

Major updates:
  • Indeterminate Progress Indicators (Spinners) (Sketch, Photoshop)
  • Home Screen, Notification, and Home Screen Quick Action design templates. (Photoshop)
  • Page controls (Sketch, Photoshop)
  • Slider controls (Sketch, Photoshop)
  • Updated Keynote templates and guides to iOS 13

Other improvements and fixes:
  • Slight refinements to Photoshop segmented controls (Paths, layout)
  • Added support for Sketch 64 tints for tab bar, navigation bar, toolbar and most other controls
  • Updated position of some table row accessories (Sketch)
  • Updated section index symbol to fix layout bug and remove background color (Sketch)
  • Added prototyping hotspot to all tab bar buttons (Sketch)
  • Rebuilt two-item navigation bar text buttons to resize correctly
  • Updated grouped table view headers and footers for height accuracy (Sketch)
    • Header includes extra top padding to be used if trailing a grouped table view with footer text
    • Footer supports multiple lines of text
  • Updated size and font size of table row action buttons (was 82.67 points wide with 17 point type, now 74 points wide with 15 point type)
  • Updated appearance of table row reorder indicator
  • Updated appearance of sticky section headers
  • Changed layout of color guides
  • Updated inset values for compact width sliders
  • Updated icon sliders to work with SF Symbols
  • Fixed bug where Home Screen templates weren’t allowing app icon image overrides

Icons and Glyphs

  • Added Add to Apple Watch button artwork
  • Added Game Center icon and glyphs

macOS

  • Added app icon template for macOS (Photoshop, Sketch)
  • Added document icon template for macOS (Photoshop, Sketch)
  • Added feature icon template for macOS (Photoshop, Sketch)

Apple Design Resources Updated

February 14, 2020

  • Sign In with Apple resources added, including:
    • New logo (PDF, PNG, and SVG)
    • Centered buttons (Sketch, Photoshop, and XD)
    • Left-aligned and logo-only buttons (Sketch, Photoshop, and XD)
  • Apple Pay templates for iPhone and iPad added (Sketch and Photoshop)
  • iMessage App and Sticker Pack templates for iPhone and iPad added (Sketch)
  • Business Chat design templates added (Sketch)
  • iPad portrait keyboard added (Sketch and Photoshop)
  • Fixed issue where iPhone XS bezel was 1 pixel larger than display (Sketch)
  • Changed contextual menu radius from 20 points to 12 points
  • Various bug fixes

Photoshop and XD Apple Design Resources Updated for iOS 13

October 4, 2019

  • Support for Dark Mode
  • Toolbars, tab bars, and navigation bar buttons integrate with the new SF Symbols feature. Copying and pasting glyphs from the SF Symbols app into the Sketch Symbol overrides the inspector.
  • Appearance styles added for new and updated iOS system colors:
    • Fill colors
    • Separator colors
    • Label colors
    • Background colors
    • Grouped background colors
    • Tint colors
  • Control appearances updated, including:
    • Segmented control
    • Stepper
    • Slider
  • Background texture updated for:
    • Navigation bar
    • Toolbar
    • Tab Bar
  • New card-style modal sheet options for Navigation Bars
  • ApplePay buttons added
  • Sign in with Apple buttons added
  • Appearance of Info and Add buttons updated
  • Home Screen Quick Action appearance updated
  • Activity View Controller (Share Sheet) updated
  • iPad Form and Page Sheets updated

New Symbols Added

September 3, 2019

SF Symbols beta 2 includes the following new symbols. To browse the full set of symbols, download the SF Symbols app.

  • ant.circle, ant.circle.fill
  • arrow.branch
  • bell.circle, bell.circle.fill
  • bolt.badge.a, bolt.badge.a.fill, bolt.circle, bolt.circle.fill
  • book.circle, book.circle.fill
  • calendar.circle, calendar.circle.fill
  • camera.circle, camera.circle.fill
  • capsule, capsule.fill
  • checkmark.shield, checkmark.shield.fill
  • decrease.quotelevel
  • doc.circle, doc.circle.fill
  • exclamationmark.shield, exclamationmark.shield.fill
  • f.cursive.circle, f.cursive.circle.fill
  • flag.circle, flag.circle.fill
  • gobackward.10.hi, gobackward.15.hi, gobackward.30.hi, gobackward.45.hi, gobackward.60.hi, gobackward.75.hi, gobackward.90.hi
  • goforward.10.hi, goforward.15.hi, goforward.30.hi, goforward.45.hi, goforward.60.hi, goforward.75.hi, goforward.90.hi
  • hexagon, hexagon.fill
  • hifispeaker, hifispeaker.fill
  • increase.quotelevel
  • largecircle.fill.circle
  • lightbulb, lightbulb.fill, lightbulb.slash, lightbulb.slash.fill
  • lock.shield, lock.shield.fill
  • message, message.circle, message.circle.fill, message.fill
  • person.3, person.3.fill
  • rectangle.stack.badge.person.crop, rectangle.stack.fill.badge.person.crop
  • shield.slash, shield.slash.fill
  • speaker.zzz.fill.rtl, speaker.zzz.rtl
  • sportscourt, sportscourt.fill
  • tag.circle, tag.circle.fill
  • tram.fill
  • waveform.circle, waveform.circle.fill
  • xmark.shield, xmark.shield.fill