Safari Sketch Library

Sketch library for Safari by Brent Caswell.

In the library, I include examples using Sketch’s desktop artboard presets: 1024px and 1440px. Using artboard presets is helpful when creating prototypes in Sketch, so I tend to stick with those. The symbols are resizable, so you can use them with any screen size you’d like. Be sure to update the “macOS/Safari Toolbar” symbol with your URL.

Here’s how to setup the symbols:

Aqua:

• 🔄 macOS/Menu Bar/Aqua
• 📂 Safari
  • 🔄 macOS/Safari Toolbar/Aqua
    • Website URL
  • 📂 macOS/Window Frame - Detach to Mask/Aqua
    • Put your design here
    • ⬆️ Mask
• 🔄 macOS/Wallpaper/1024px

Dark Aqua:

• 🔄 macOS/Menu Bar/Dark Aqua
• 📂 Safari
  • 🔄 macOS/macOS/Window Rim Highlight 🔒
  • 🔄 macOS/Safari Toolbar/Dark Aqua
    • Website URL
  • 📂 macOS/Window Frame - Detach to Mask/Dark Aqua
    • Put your design here
    • ⬆️ Mask
• 🔄 macOS/Wallpaper/1024px

Additional resources you might find useful:

• Rob Gill’s Native Web Components Sketch library
• Apple’s macOS Sketch library
• Device mockups by Facebook’s design team