Alongside the introduction of iOS 13, Apple has significantly updated its Design Resources with new tools for developers and designers that will help create consistent, usable, and visually pleasing apps. One of the biggest additions is a brand new set of configurable symbols and a companion macOS app called SF Symbols.
SFSymbols is a set of over 1,000 consistent and highly configurable symbols that was designed to integrate with Apple’s system font, San Francisco. These symbols can be used in iOS 13, watchOS 6, and tvOS 13. Each symbol was designed with a variety of sizes and weights so you can find the right version for your app. From Apple’s Human Interface Guidelines:
SF Symbols come in nine weights—from ultralight to black—each of which corresponds to a weight of the San Francisco system font. This correspondence lets you achieve precise weight matching between symbols and adjacent text, while supporting flexibility for different sizes and contexts.
Each symbol is also available in three scales: small, medium, and large. The scales are defined relative to the cap height of the San Francisco system font. By specifying a scale, you can adjust a symbol’s emphasis compared to adjacent text, without disrupting the weight matching with text that uses the same point size.
Inside the macOS companion app, currently in beta, SF Symbols are presented in a sortable and searchable list. Symbols can be dragged to the desktop, prepared for Xcode, or exported as a template. This allows designers to create their own symbols based on Apple’s set:
To create a custom symbol, export a symbol that’s similar to the design you want and modify the template using a vector-editing tool like Sketch or Illustrator. Use the result in your app as you would use the original template file.
Apple says that some symbols should be used as-is, and provides a list of guidelines and symbols that cannot be customized. You can download the Mac app beta here.
SF Symbols is a promising new asset that should greatly improve the consistency of iOS apps and the speed of development. A rich library of symbols means that designers can spend less time recreating the assets Apple has already built and more time on app illustration, iconography, and visual polish.
New symbols in use in iOS 13.
Apple today also revised its iOS and macOS Resources for Sketch and introduced a new font called New York. A WWDC session on June 6th will dive into the specifics of what’s new in fonts.
Lovely new Apple-designed serif called "New York". pic.twitter.com/cxvndtIUxE
— 𝕞𝕒𝕩𝕧𝕠𝕝𝕥𝕒𝕣 (@maxvoltar) June 3, 2019
Check out our News Hub for everything announced at WWDC 2019.
FTC: We use income earning auto affiliate links. More.
Comments