WWDC 2022: SF Symbols 4

Find hereafter a detailed summary of two videos that belong to a taxonomy of some WWDC footages.

The original videos are available on the official Apple website (session 10157, session 10158).

"Explore the latest updates to SF Symbols, Apple's extensive library of iconography designed to integrate seamlessly with San Francisco, the system font for all Apple platforms. Discover the latest additions to the SF Symbols library and new categories in the app. Learn about the new Automatic behavior, which chooses the rendering mode that best highlights what's unique about the symbol's characteristics. See how to use the new Variable Color feature to make a symbol more dynamic. We'll also learn about a more efficient way of annotating symbols with the new unified approach."

"Explore how you can use Variable Color to make SF Symbols even more expressive. We'll show you how system-provided symbols use variable color and provide best practices and guidance for using it effectively. We'll also help you learn how to incorporate variable color into custom symbols using the SF Symbols app and its annotation tools."

The outlines of this speech are indicated hereunder:


Most of the illustrations are parts of the Apple presentations and may be available at the Resources section inside the Overview sheet of each video.

Hereafter, the underlined elements lead directly to the playback of the WWDC video at the appropriate moment.

Many additions of new symbols are introduced in iOS 16 regarding different areas: home, health... including five new categories to provide a better searching experience.

Rendering modes #

Among the four rendering modes, Monochrome is the default one in iOS 15...

... but the new Automatic Rendering configuration offers a preferred mode tailored for each symbol in iOS 16.

In the SF Symbols app, this new option can be selected in the picker to choose the preferred rendering mode of a symbol while watching the selection in the preview area.

Variable Color #

This new feature relies on the organization of the symbol's vector paths into layers arranged in sequential order so as to modify the appearance of a symbol using a percentage value.

All the symbol's paths may be part of the defined sequence...

... while others may just be static with no possible modifications with regard to the Variable Color feature.

This functionality is a brilliant option to be used when dealing with the strength level of shapes that follow a sequence but mustn't be taken into account for emphasizing depth.

Opacity may be used with the Variable Color to point out a better rendering.

Unified annotations #

Annotations (processes used to adopt different rendering modes for a custom symbol) are based on the z-order combined with the Draw and Erase concepts that represent the foundations of all the visual adjustements.

Unified annotation is the new way to streamline the creation of custom symbols by carrying through to all the rendering modes the changes made to the layer structure of one of them.



Practical examples #

  1. Create a collection of your favorite objects in the SF Symbols app⟹ 🎬

  2. Examples for watching the Automatic Rendering on two different objects⟹ 🎬

  3. First example for unified annotation regarding a cupcake symbol⟹ 🎬

  4. Second example for unified annotation regarding a kitchen timer symbol⟹ 🎬

  5. The preview area in the rendering inspector inside the SF Symbols app is the best way to see a symbol in every rendering mode at a glance⟹ 🎬

  6. Modify the percentage value of the Variable Color in the SF Symbols app⟹ 🎬

  7. Understand the link between the percentage value of the Variable Color and the particular layer that's displayed⟹ 🎬

  8. Create a custom symbol in the SF Symbols app using the Variable Color and the unified annotation⟹ 🎬

  9. Use the Erase feature of the unified annotation in the SF Symbols app for handling depth with more complex symbols⟹ 🎬

  10. Activate the Variable Color after using the Erase feature in the SF Symbols app⟹ 🎬