RSS

What’s New

tvOS Apple Design Resources Updated

Added new tvOS design kit including a Sketch Library, design templates, components sticker sheet, guides, and more.

  • Includes guides for system colors, system materials, and text styles
  • Includes all major tvOS components:
    • Content Rows
    • Grouped Section Headers
    • Keyboard
    • Library Rows
    • Notifications
    • Page Divider with Segmented Control
    • Page Headers
    • Page Indicator
    • Picture in Picture (PIP)
    • Row Headers
    • Segmented Controls
    • Sidebar Button
    • Tab Bar
    • Table View Buttons
    • Table View Rows
    • Text Buttons
    • Top Shelf Button
  • Includes numerous design templates, mostly mirroring what's provided by the system and TVML.
    • Alerts
    • Authentication
    • Content Collection
    • Content Compilation
    • Content Library
    • Content List
    • Control Center
    • Form Input
    • Home Screen
    • HUD Panel
    • Loading
    • Menu Bar
    • Parade
    • Picture in Picture (PIP)
    • Product
    • Product Bundle
    • Product Page
    • Rating
    • Search
    • Search Grid
    • Stack
    • Tabbed App
    • Top Shelf
    • TV App
    • Video Player

macOS Apple Design Resources Updated

Updated macOS design kit to Big Sur (Sketch only). Includes a Sketch Library, design templates, components sticker sheet, guides, and more.

  • Includes all major AppKit components:
    • Alerts
    • Arrow Buttons
    • Checkboxes
    • Circular Slider
    • Color Well
    • Combo Boxes
    • Cursors
    • Disclosure Buttons
    • Group Boxes
    • Help Buttons
    • Image Well
    • Lists
    • Menus
    • Notifications
    • Pop-Up Buttons
    • Popovers
    • Progress Indicators (Circular and Bar)
    • Pull Down Buttons
    • Push Buttons
    • Quick Look
    • Radio Buttons
    • Save Dialogs
    • Search Fields
    • Segmented Controls
    • Sheets
    • Sidebar
    • Sliders (Continuous, Ticked)
    • Stepper
    • Switches
    • Text Fields
    • Title Bars
    • Toggle Buttons
    • Toolbars
    • Tooltip
    • Windows
  • Includes guides for system colors, system materials, and text styles.

Apple Design Resources Updated

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)

Human Interface Guidelines Updated

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

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)