Nice and easy with SF Symbols 2
A good way to to get a good design not really knowing what you're doing. 😄
A while ago I’ve came up with a challenge in my, still short, developer life. I was in a team with three other colleagues that I did not know very well until that moment, but we kind of organically fit together when our soon to be project was presented for us. The challenge about our party at that moment was that none of us was a main designer, we were all most acquainted to coding and other product related areas.
To find solutions on how would one of us all of a sudden become a design expert we started to discuss, research — and struggle a little bit 😅 — on how to to keep Nielsen heuristics AND still give a good overall appearance to our app. We decided it was best to stick with Apple’s HIG and then, the magic happened. When we adopted the SF Font we stumbled on SF Symbols, a great way to use apple standard symbols available for iOS 13 or later.
SF Symbols, in summary, is a set of over 2,400 consistent, highly configurable symbols you can use in your iOS app.
Those were a great option because they are designed to go well with text, adapting in weight and scale with it, while enhancing the heuristic that say about standardization and consistency and also the one about recognition besides memorisation.
This approach also made the support for DynamicType on our icons just a checkbox away. For some who might not know this yet, DynamicType is an accessibility feature that empowers the user to change the size of visual elements throughout an app.
Aaaaaaaaaand it’s also really easy to use in code. 🤯
We’ll get to that later…
Having told you that story, I can’t help but to express my excitement when I knew the news about SF Symbols 2. There are a lot new to look at with more than 750 new symbols, including 150 preconfigured multicolor symbols that adapt to system colors. Another great adding to this update, which is also an accessibility one, is the localization improvement related to different writing systems such as Arabic, and Hebrew. It also carried some improvement on optical alignment and other app enhancements.
Here’s what the SF Symbols 2 Beta app looks like:
Of course, like the previous SF Symbols, you can browse categories or search with a part of the symbol’s name. In this version there’s also a row for the new symbols and another one to multicolored symbols.
To show you briefly how to do in code, I created a simple Xcode project using SwiftUI framework using Xcode 12 Beta — you can learn how to get that using this link.
The trick is using the “systemName” parameter call.
In addition, if it’s a multicolor catergory’s symbol, you can select to use that by setting it’s renderingMode to “.original”. Also, because they are designed to go along with fonts, you can change that trait with ".font(.largeTitle")".
Finally, do not miss this link for more detailed information on apple’s guidelines on the use of SF Symbols, and this one for the example project
See you next time! 😊
